Skip to content

Latest commit

 

History

History

pivotGrid

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

kendo-ui-react-jquery-pivotgrid

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

Install

npm i kendo-ui-react-jquery-pivotgrid

Usage Example

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'));

React Props

Every KUI React Wrapper can make use of the following React props:

  • options
  • methods
  • events
  • unbindEvents
  • triggerEvents

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>

KUI API

License

Apache License, Version 2.0