The Kendo UI for jQuery PivotGrid widget wrapped as a React component.
WARNING: Must npm install professional version of Kendo UI using credentials.
You'll need to setup a .netrc file on your local system. This file contains the login (username & password) of the account on telerik.com in which you purchased Kendo UI professional or DevCraft.
Below are the instructions for both Windows and Mac users.
On Windows:
Create a text file called \_netrc in your home directory (e.g. c:\users\jane\_netrc).
Next, Declare a HOME environment variable.
EXAMPLE
C:\> SETX HOME %USERPROFILE%
Add the credentials using the format in the example above.
Git might have problems resolving your home directory if it contains spaces in its path—for example, c:\Documents and Settings\jane). Therefore, update your %HOME% environment variable to point to a directory having no spaces in its name.
On Mac:
Create a file called .netrc in your home directory ~/.netrc (i.e /User/USERNAME/.netrc). Make sure you modify the file permissions to make it readable only to you.
Add your credentials to the ~/.netrc (i.e /User/USERNAME/.netrc) file using the format from the example below.
EXAMPLE:
machine bower.telerik.com
login [email protected]
password my-password-here
npm i kendo-ui-react-jquery-pivotgridimport 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'));Every KUI React Wrapper can make use of the following React props:
optionsmethodseventsunbindEventstriggerEvents
Each is demonstrated below using a <KendoDropDownList> KUI React wrapper.
<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>- PivotGrid demos: http://demos.telerik.com/kendo-ui/pivotgrid/index
- PivotGrid docs: http://docs.telerik.com/kendo-ui/controls/data-management/pivotgrid/overview
- PivotGrid API: http://docs.telerik.com/kendo-ui/api/javascript/ui/pivotgrid