import React from 'react';
import ReactDOM from 'react-dom';
import KendoPivotGrid from 'kendo-ui-react-jquery-pivotgrid';
 
//Don't forget CSS, webpack used to include CSS
import 'kendo/css/web/kendo.common.min.css';
import 'kendo/css/web/kendo.default.min.css';
 
var App = React.createClass({
  render: function() {
      return (
            <KendoPivotGrid options={{
                dataSource: {
                type: "xmla", //define the type
                columns: [{ name: "[Date].[Calendar]" }], //specify a dimesion on columns
                rows: [{ name: "[Product].[Category]" }], //specify a dimesion on rows
                measures: ["[Measures].[Internet Sales Amount]"], //specify a measure to display
                transport: {
                connection: {
                    catalog: "Adventure Works DW 2008R2", //specify the name of the catalog
                    cube: "Adventure Works" //specify the name of the cube
                },
                read: {
                    url: "http://demos.telerik.com/olap/msmdpump.dll", //define the URL of the service
                    dataType: "text",
                    contentType: "text/xml",
                    type: "POST"
                }
                },
                schema: {
                type: "xmla" //specify the type of the schema
                },
                }
            }}></KendoPivotGrid>
      );
    }
});
 
ReactDOM.render(<App />, document.getElementById('app'));

<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>