I have looked over the examples given by the SlickGrid wiki as well as searched over stackoverflow, but I am having trouble finding a solution to my problem. I am trying to display random data about tweets I am receiving from the Twitter API using SlickGrid.
In my script, the grid and dataview seem to initialize after I call beginUpdate(), however, the script seems to crash on endUpdate(). Here is my code:
function TweetGrid(){
this.dataView = new Slick.Data.DataView();
this.grid = this.initGrid();
this.dataView.onRowCountChanged.subscribe(function(e, args){
grid.updateRowCount();
grid.render();
});
this.dataView.onRowsChanged.subscribe(function(e, args){
grid.invalidateRows(args.rows);
grid.render();
});
//dummy value for testing
var data = [{ id: "id_1", Time: "11:11:11", PictureUrl: "someimageurl", Name: "name", ScreenName: "screen name", Text: "some tweet" }];
this.dataView.beginUpdate();
alert("Begin Update"); //this gets called
this.dataView.setItems(data);
alert("Set items"); //this gets called
this.dataView.endUpdate();
alert("End Update"); //this DOES NOT get called - script does not move on
this.dataView.render();
alert("data rendered");
}
TweetGrid.prototype.initGrid = function(){
var columns = [
{
id: "Time", name: "Time", field: "Time", cssClass: "custom-column"
},
{
id: "PictureUrl", name: "Picture", field: "PictureUrl", cssClass: "custom-column"
},
{
id: "Name", name: "Name", field: "Name", cssClass: "custom-column"
},
{
id: "ScreenName", name: "Screen Name", field: "ScreenName", cssClass: "custom-column"
},
{
id: "Text", name: "Tweet", field: "Text", cssClass: "custom-column"
}
];
var options = {
enableCellNavigation: true,
forceFitColumns: true,
enableColumnReorder: false
};
return new Slick.Grid("#tweetGrid", this.dataView, columns, options);
}
I reviewed your code one more time and I didn't find errors.
But this code in one function works well.
var dataView = new Slick.Data.DataView();
var columns = [
{
id: "Time", name: "Time", field: "Time", cssClass: "custom-column"
},
{
id: "PictureUrl", name: "Picture", field: "PictureUrl", cssClass: "custom-column"
},
{
id: "Name", name: "Name", field: "Name", cssClass: "custom-column"
},
{
id: "ScreenName", name: "Screen Name", field: "ScreenName", cssClass: "custom-column"
},
{
id: "Text", name: "Tweet", field: "Text", cssClass: "custom-column"
}
];
var options = {
enableCellNavigation: true,
forceFitColumns: true,
enableColumnReorder: false
};
var grid = new Slick.Grid("#tweetGrid", dataView, columns, options);
var data = [{ id: "id_1", Time: "11:11:11", PictureUrl: "someimageurl", Name: "name", ScreenName: "screen name", Text: "some tweet" }];
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
grid.render();
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
Related
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I refresh the kendo grid for every 10 seconds, I used following code and I used the kendo.all.min.js
$(document).ready(function () {
loadData();
intervalManager(true, TableStatus, 10000);
});
var TableStatus = function () {
loadData();
}
var refreshorderplacedgrid;
function intervalManager(flag, animate, time) {
if (flag)
refreshorderplacedgrid = setInterval(animate, time);
else
clearInterval(refreshorderplacedgrid);
}
function loadData() {
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
{ ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true },
{ ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true}],
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
},
scrollable: true,
sortable: true,
selectable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
}
This code gives me the output like following screenshot in system chrome,
But in mobile [All devices]
It appends with the old grid, instead of rebinding like following screenshot
I dont know what is problem here, I have googled and used $("#grid").data("kendoGrid").refresh(); this code too. Nothing happend, Any help will be highly appreciable.
Thanks,
Guna
#gitsitgo 's comment, I changed the code as following way, for avoid the re initialization of the grid, and now its working fine.
var myDataSource = new kendo.data.DataSource({
data: [
{ ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true },
{ ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true },
{ ID: '1003', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true}],
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
});
$(document).ready(function () {
initGrid();
loadData();
intervalManager(true, TableStatus, 10000);
});
var TableStatus = function () {
loadData();
}
var refreshorderplacedgrid;
function intervalManager(flag, animate, time) {
if (flag)
refreshorderplacedgrid = setInterval(animate, time);
else
clearInterval(refreshorderplacedgrid);
}
function loadData() {
$("#grid").data("kendoGrid").setDataSource(myDataSource);
$("#grid").data("kendoGrid").refresh();
}
function initGrid() {
var grid = $("#grid").kendoGrid({
dataSource: myDataSource,
scrollable: true,
sortable: true,
selectable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
}
Thanks,
Guna
I have a JSON dataSource that looks like this:
var productDataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'http://...',
dataType: "json"
}
},
pageSize: 10
});
And returns something like this:
{
"ProdSet1":[
{
"Name": "Product 1-1",
"Price": 20,
"Quantity": 50,
"Change": 4
},
{
"Name": "Product 1-2",
"Price": 14,
"Quantity": 74,
"Change": 5
}
],
"ProdSet2":[
{
"Name": "Product 2-1",
"Price": 15,
"Quantity": 12,
"Change": 2
}
]
}
Then I have multiple grids that use this one dataSource:
$("#prodSet1").kendoGrid({
dataSource: productDataSource,
columns: [
{ field: "ProdSet1[0].Name", title: "Name" },
{ field: "ProdSet1[0].Price", title: "Price" },
{ field: "ProdSet1[0].Quantity", title: "Quantity" },
{ field: "ProdSet1[0].Change", title: "Change" }
]
});
$("#prodSet2").kendoGrid({
dataSource: productDataSource,
columns: [
{ field: "ProdSet2[0].Name", title: "Name" },
{ field: "ProdSet2[0].Price", title: "Price" },
{ field: "ProdSet2[0].Quantity", title: "Quantity" },
{ field: "ProdSet2[0].Change", title: "Change" }
]
});
But doing { field: "ProdSet1[0].Name" ...} isn't working.
How can I reference the correct product data?
Since the collections are named in the return object, you can set the schema.data property to each ProdSet, and bind a grid to it.
I would manually fetch the data from the datasource, with a datasource.read()
var datafromService = productDataSource.read();
Documentation... http://docs.telerik.com/kendo-ui/documentation/api/framework/datasource#methods-read
Then bind each grid to that datafromService, with each specifying the collection inside the JSON object to bind to.
$("#prodSet1").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet1'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
and
$("#prodSet2").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet2'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
Now they will be bound to the same set of data, just displaying different collections from the JSON data.
See sample... http://jsbin.com/dokub/1/edit
If you are needing full CRUD operations, that gets into another bag of cats.
I have been struggling with this issue and hit a roadblock. I have a kendo grid that has a dropdownlist.
Problem
When i edit a record by selecting a value in the DropdownList, the
field is not updated.
When i select the Add Command from the toolbar, a different
template tries to render and raises the error "Uncaught ReferenceError:
ParentMenu is not defined" in Chrome debugs. So nothing happens consequently.
When i comment out "values: parentRef" from the kendogrid columns definition all commands[Add,Edit] display properly
I have demonstrated the error i am experiencing here http://jsfiddle.net/BlowMan/5tNQy/
JS Code
$(function () {
var mbModel = kendo.data.Model.define({
id: "MenuId",
fields: {
"MenuId": {
type: "number"
},
"DisplayText": {
type: "string"
},
"MenuOrder": {
type: "number"
},
"MenuStatus": {
type: "boolean"
},
"HasKids": {
type: "boolean"
},
"ParentMenu": {
type: "number",
defaultValue: 1
}
}
});
var mbDataSource = new kendo.data.DataSource({
data: [{
"MenuId": 1,
"DisplayText": "Home",
"MenuOrder": 0,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}, {
"MenuId": 2,
"DisplayText": "Finance",
"MenuOrder": 1,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}]
});
var parentRef = [{
"value": 1,
"text": "Finance"
}, {
"value": 2,
"text": "Corp. Services"
}];
$("#menuBuilder1").kendoGrid({
columns: [{
field: "MenuId",
title: "Menu",
editable: true
}, {
field: "DisplayText",
title: "Name",
editable: true
}, {
field: "MenuOrder",
title: "Order",
editable: true
}, {
field: "MenuStatus",
title: "MenuStatus",
editable: true
}, {
field: "HasKids",
title: "Depends",
editable: true
}, {
field: "ParentMenu",
title: "ParentMenu",
values: parentRef
}, {
title: "Action",
command: ["edit"]
}],
toolbar: ["create"],
editable: "popup",
schema: {
model: mbModel
}
});
var mbObject = new kendo.data.ObservableObject({
data: mbDataSource,
//parentRef:[]
});
kendo.bind($("#menuBuilder1"), mbObject);
mbDataSource.bind("change", function (e) {
});
var grid = $("#menuBuilder1").data("kendoGrid");
grid.bind("save", function (e) {
var that = this;
that.refresh();
});
grid.bind("edit", function (e) {
});
$.ajax({
url: "/MenuBuilder/GetMenuWithKids",
dataType: "json",
type: "GET",
success: function (ret) {
mbObject.set("parentRef", ret);
}
});
});
HTML Code
<div id="menuBuilder1" data-bind="source:data"></div>
Am in a tight corner and any help will be much appreciated.
MustafaP solved Problem 1.
For problem 2,
I realised that i had placed the schema definition at the wrong place within the kendoGrid. I placed it at the bottom after the toolbar.
It should rather be placed just after the kendoGrid brackets
$("#menuBuilder1").kendoGrid({
schema: {
model: mbModel
},
columns: [{
field: "MenuId",
title: "Menu",
editable: true
I want to group the values in grid panel
Below is the code:
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "School Friends", expanded: true, children: [
{ text: "Mike", leaf: true, name: "Mike", email: "mike#stackoverflow.com", phone: "345-2222"},
{ text: "Laura", leaf: true, name: "Laura", email: "laura#stackoverflow.com", phone: "345-3333"}
] },
{ text: "Facebook Friend", expanded: true, children: [
{ text: "Steve", leaf: true, name: "Steve", email: "steve#stackoverflow.com", phone: "345-2222"},
{ text: "Lisa", leaf: true, name: "Lisa", email: "lisa#stackoverflow.com", phone: "345-3333"}
] },
]
}});
Ext.create('Ext.tree.Panel', {
title: 'All My Friends',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners : {
itemdblclick : function(tree, record, index){
Ext.getStore('simpsonsStore').loadRawData([record.raw], true);
}
}});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}});
Ext.create('Ext.grid.Panel', {
title: 'Best Friends',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()});
From the above code I am able to get the values from treepanel to grid panel by double clicking.
I want an extra column to group values if we double click the same leaf in the treepanel.
For example if we double click Bart 6 times
Name email phonenumber groupby(number of times)
Bart bart#simpsons.com 555-222-1234 6
It should not append same value in the grid panel.
Could any one please help me.
Regards,
sreekanth
You'll need to add a count field to your store's fields. Then, you'll need to add the field to your grid. When you double-click the tree, you'll need to check the store to see if the record already exists. If it does, change the value in the count field; otherwise, add a new row.
itemdblclick: function (tree, record, index) {
var s = Ext.getStore('simpsonsStore'),
existingRecIdx = s.findBy(function (r) {
return r.get('email') === record.raw['email'];
});
if (existingRecIdx === -1) { //row not found
record.raw.clickCt = 1;
s.loadRawData([record.raw], true);
} else {
var r = s.getAt(existingRecIdx);
r.data.clickCt++;
grid.getView().refresh(); //once the data has changed
//refresh the grid
}
}
See http://jsfiddle.net/Kk7gL/