kur
kendo-ui-react-jquery-map
npm i kendo-ui-react-jquery-map
kur

kendo-ui-react-jquery-map

Kendo UI for jQuery widgets wrapped as React components.

by Cody Lindley

1.0.1 (see all)License:Apache-2.0TypeScript:Not Found
npm i kendo-ui-react-jquery-map
Readme

Kendo UI (for jQuery) React Component Wrappers

React component wrappers (around Kendo UI) that you can include via npm so that Kendo UI for jQuery widgets can be used in a React app.

Read more about it here: http://developer.telerik.com/featured/using-kendo-ui-jquery-react-app/

For example:

<KendoDropDownList options={{index: 0}}>
    <select>
        <option>S - 6 3/5"</option>
        <option>M - 7 1/4"</option>
        <option>L - 7 1/8"</option>
        <option>XL - 7 5/8"</option>
    </select>
</KendoDropDownList>

Available Wrappers on npm

FeatureCore (free)Professional ($)wrapper on npmgithub
Data Management
Gridnpm install kendo-ui-react-jquery-gridsource
SpreadsheetBUG https://github.com/telerik/kendo-ui-core/issues/2162
ListViewnpm install kendo-ui-react-jquery-listviewsource
PivotGridnpm install kendo-ui-react-jquery-pivotgridsource
TreeListnpm install kendo-ui-react-jquery-treelistsource
Editors
AutoCompletenpm install kendo-ui-react-jquery-autocompletesource
Color Pickernpm install kendo-ui-react-jquery-colorpickersource
ComboBoxnpm install kendo-ui-react-jquery-comboboxsource
DatePickernpm install kendo-ui-react-jquery-datepickersource
DateTimePickernpm install kendo-ui-react-jquery-datetimepickersource
DropDownListnpm install kendo-ui-react-jquery-dropdownlistsource
EditorBUG https://github.com/telerik/kendo-ui-core/issues/2176
MaskedTextBoxnpm install kendo-ui-react-jquery-maskedtextboxsource
MultiSelectnpm install kendo-ui-react-jquery-multiselectsource
NumericTextBoxnpm install kendo-ui-react-jquery-numerictextboxsource
Slidernpm install kendo-ui-react-jquery-slidersource
TimePickernpm install kendo-ui-react-jquery-timepickersource
Uploadnpm install kendo-ui-react-jquery-uploadsource
Validatornpm install kendo-ui-react-jquery-validatorsource
Charts
Area
Bar
Box Plot
Bubble
Bullet
Donut
Funnel
Line
Pie
Polar
Radar
Range Bar
Scatter
Waterfall
npm install kendo-ui-react-jquery-chartssource
Sparklinesnpm install kendo-ui-react-jquery-sparklinessource
Stock Chartsnpm install kendo-ui-react-jquery-stockchartsource
TreeMapnpm install kendo-ui-react-jquery-treemapsource
Gauges
LinearGaugenpm install kendo-ui-react-jquery-lineargaugesource
RadialGaugenpm install kendo-ui-react-jquery-radialgaugesource
Barcodes
Barcodenpm install kendo-ui-react-jquery-barcodesource
QR Codenpm install kendo-ui-react-jquery-qrcodesource
Diagram and Maps
DiagramBUG https://github.com/telerik/kendo-ui-core/issues/2202
MapBUG https://github.com/telerik/kendo-ui-core/issues/2203
Scheduling
Calendarnpm install kendo-ui-react-jquery-calendarsource
Ganttnpm install kendo-ui-react-jquery-ganttsource
Schedulernpm install kendo-ui-react-jquery-schedulersource
Layout
Dialognpm install kendo-ui-react-jquery-dialogsource
Notificationnpm install kendo-ui-react-jquery-notificationsource
Responsive Panelnpm install kendo-ui-react-jquery-responsivepanelsource
Splitternpm install kendo-ui-react-jquery-splittersource
Tooltipnpm install kendo-ui-react-jquery-tooltipsource
Windownpm install kendo-ui-react-jquery-windowsource
Media
MediaPlayernpm install kendo-ui-react-jquery-mediaplayersource
Navigation
Buttonnpm install kendo-ui-react-jquery-buttonsource
Menunpm install kendo-ui-react-jquery-menusource
PanelBarnpm install kendo-ui-react-jquery-panelbarsource
TabStripnpm install kendo-ui-react-jquery-tabstripsource
ToolBarnpm install kendo-ui-react-jquery-toolbarsource
TreeViewnpm install kendo-ui-react-jquery-treeviewsource
Interactivity and UX
Draggablenpm install kendo-ui-react-jquery-draggablesource
DropTargetnpm install kendo-ui-react-jquery-droptargetsource
DropTargetAreanpm install kendo-ui-react-jquery-droptargetareasource
ProgressBarnpm install kendo-ui-react-jquery-progressbarsource
Sortablenpm install kendo-ui-react-jquery-sortablesource

Installing Wrappers from npm

npm i kendo-ui-react-jquery-[NAME OF WIDGET ALL LOWERCASE e.g. dropdownlist]

For example the following command will install the dropDownList wrapper:

npm i kendo-ui-react-jquery-dropdownlist

Example Usage in React app (assumes webpack)

import React from 'react';
import ReactDOM from 'react-dom';
import KendoDropDownList from 'kendo-ui-react-jquery-dropdownlist';

//Don't forget CSS, webpack plugin used to include CSS
import 'kendo-ui-core/css/web/kendo.common.core.min.css';
import 'kendo-ui-core/css/web/kendo.default.min.css';

var App = React.createClass({
  render: function() {
      return (
                <KendoDropDownList
                    //only updates upon state change from above if widget supports setOptions()
                    //don't define events here, do it in events prop
                    options={{ //nothing new here, object of KUI configuration values
                        dataSource:[{
                            text: "Item1",
                            value: "1"
                        }, {
                            text: "Item2",
                            value: "2"
                        }, {
                            text: "Item3",
                            value: "3"
                        }],
                        dataTextField: "text",
                        dataValueField: "value"
                    }}
                    //updates if object is different from initial mount
                    methods={{ //name of method and array of arguments to pass to method
                        open:[], //send empty array if no arguments
                        value:['2']
                    }}
                    //Right now, always updates
                    events={{ //name of event, and callback
                        close:function(){console.log('dropdown closed')},
                        select:function(){console.log('item selected')},
                        open:function(){console.log('dropdown opened')}
                    }}
                    //updates if array is different from initial mount
                    unbindEvents={[ //name of event to unbind, string
                        "select"
                    ]}
                    //updates if array is different from initial mount
                    triggerEvents={[ //name of event to trigger, string
                        "open",
                    ]}>
                        <input className="kendoDropDownList" />
                </KendoDropDownList>
            );
    }
});

ReactDOM.render(<App />, document.getElementById('app'));

License

Apache License, Version 2.0

Downloads/wk

7

GitHub Stars

27

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

9

OPEN PRs

1
VersionTagPublished
1.0.1
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial