Progress® Kendo UI Wrappers for React

Progress® Kendo UI Wrappers for React are wrappers for the Kendo UI widgets which enable you use and configure the controls in your React application.

This means that although you might be using React directives or components to set up the user interface with Kendo UI, the underlying functionality of the UI controls comes from the Kendo UI for jQuery suite.

Before You Start

Before you start using the wrappers, make sure you get familiar with the documentation on:

Initializing the Grid

The following example demonstrates how to initialize the Kendo UI Grid by utilizing the Kendo UI wrappers for React.

Example
<div id="root" style="width: 100%"></div>
    <script type="text/jsx">
    const Grid = KendoGridReactWrapper.Grid;

    const gridOptions = {

    dataSource: {  
    transport: {
        read:  {
            url:"https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp"
        },
        update: {
            url: "https://demos.telerik.com/kendo-ui/service/Products/Update",
            dataType: "jsonp"
        },
        destroy: {
            url: "https://demos.telerik.com/kendo-ui/service/Products/Destroy",
            dataType: "jsonp"
        },
        create: {
            url: "https://demos.telerik.com/kendo-ui/service/Products/Create",
            dataType: "jsonp"
        },
        parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
            }
        }
    },
      schema: {
        model: {
            id: "ProductID",
            fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: "number", validation: { required: true, min: 1} },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
            }
        }
    },
    pageSize: 20
    },
    height: 550,
    selectable: true,
    filterable: true,
    groupable:true,
    sortable:true,
    pageable: true,
    editable:"popup",
    toolbar:['create'],
    columns: [{field:"ProductID", filterable: false, title: "ProductID"},
    { field: "ProductName", title: "Product Name"},
    { field: "UnitPrice", title: "Unit Price", format:"{0:c}"},
    { field: "UnitsInStock", title: "Units In Stock"},
    { field: "Discontinued", title: "Discontinued"},
    {command: ['edit', 'destroy']}
    ]
    }


    const element = (
    <div>
        <Grid {...gridOptions} />
    </div>
    );

    ReactDOM.render(element, document.getElementById('root'));
    </script>

See Also