Develop Reference

EJ2 Java script Server side Pagination

I am working on EJ2 Javascript grid. which is working fine. But my problem is i am having around 10K + records, if i am loading these into grid, page takes ages to load. So i was thinking to make pagination, for each page i will load 10-20 records, that time load time will decrease. I have checked Ej2 website as well. but i am not able to find any proper manual for that.
https://ej2.syncfusion.com/javascript/demos/#/material/grid/default-paging.html
My current code :
var grid = new ej.grids.Grid({
dataSource: data,
allowPaging: true,
allowResizing: true,
showToolbar: true,
allowExcelExport: true,
allowPdfExport: true,
allowSearching: true,
allowFiltering: true,
filterSettings: { type: 'CheckBox' },
columns: [
{ field: 'InvoiceNumber', headerText: 'Test', customAttributes: { class: "customcss" },
textAlign: 'center', width: 100 },
],
});
}
}
grid.appendTo('#tblPo');
Where we can pass offset and page records here?

How to remove multiple header from kendo grid

I am creating a sample application in which I show data in kendo grid.
For this I get the page size data in kendo grid and then load it. when page change I load next data.
When my page change event call the grid is added in already exist grid. By this it shows multiple column header.
My sample is - http://jsfiddle.net/pporwal26/y6KdK/78/
var jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-174\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\\\\vMbhdo\\\\TgFSW\\\\42Ioulj0w.txt\"},{\"owner\":\"machine-174admin\",\"path\":\"C:\\\\workarea\\\\bada_data\\\\Employee Database - Copy (7) - Copy.mdb\"}],\"Count\":100,\"total\":100,\"page\":4}");
function nextData(page){
jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-170\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\"},{\"owner\":\"machine-170admin\",\"path\":\"C:\\\\workarea\"}],\"Count\":100,\"total\":100,\"page\":5}");
$("#grid").kendoGrid({ dataSource: {
serverPaging: true,
schema: {
data: "FileList",
total: "total"
},
data: jsonData
} })
}
createGrid(jsonData);
function createGrid(jsonData){
$("#grid").kendoGrid({
pageable: true,
scrollable: true,
pageable: {
pageSize: 2,
refresh: true,
change:function(e){
nextData(e.index);
}
},
dataSource: {
serverPaging: true,
schema: {
data: "FileList",
total: "total",
},
data: jsonData
}
});
}
How I remove multiple header when page change event call?

Try modifying your nextData function as below.
function nextData(page){
jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-170\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\"},{\"owner\":\"machine-170admin\",\"path\":\"C:\\\\workarea\"}],\"Count\":100,\"total\":100,\"page\":5}");
var _dataSource = new kendo.data.DataSource({
schema: {
data: "FileList",
total: "total"
},
data: jsonData,
serverPaging : true,
pageSize : 2,
page : page
});
$("#grid").data("kendoGrid").setDataSource(_dataSource);
}

http://jsfiddle.net/y6KdK/79/
var grid = createGrid(jsonData);
create the instance of your grid.
var dataSource = new kendo.data.DataSource({
data: jsonData
});
grid.setDataSource(dataSource);
And set your newly created datasource into your nextData function. please see the above fiddle link.

Initialize and load Kendo Grid from JQuery

in my project i want to initialize Kendo Grid from jquery file. i have created a .js file in which i have created a function
function initializeGrid(gridName, url, onSelectFunction) {
onSelectFunction = onSelectFunction || null;
$("#" + gridName).kendoGrid({
dataSource: {
type: "json",
transport: {
read: url
},
schema: {
model: {
fields: {
ClientID: {type: "number"},
Client:{type: "string"}
}
}
},
pagesize: 30,
Paging: true,
Filtering: true,
},
selectable: "multiple cell",
filterable: true,
columns: [
{ field: "ClientID" },
{ Template: ("<input type='checkbox' id='#:data.ClientID#' class='k-checkbox'/><label class='k-checkbox-label' onclick='event.stopPropagation()' for='#:data.ClientID#'></label>") },
{ field: "Client" }
]
});
$("#" + gridName).attr("data-val-number", "Invalid input.");
}
this function accepts name of the control and url to load data source from as arguments. in another .js file i have all code that loads controls by calling the earlier function.
initializeGrid("client", "/Clients/GetDataForGrid", null);
issue is that when i run the program it is not creating the grid and loading the data instead showing a drop down with no data. i checked http://docs.telerik.com/kendo-ui/api/javascript/ui/grid?utm_medium=social-owned&linkId=38973492 for reference but no use.
i would really appreciate help here.

Kendo UI grid filter doesn't work when opening a popup before

I have a Kendo UI grid where some of the columns can be filtered. For each row in that column, you can open a popup to see some details to the specific entry.
I can open the popup without any problems. But: after closing it and trying to filter any of the columns, I get the following error: JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference
If I filter a column before I open a popup, it works like a charm.
If I filter a column and then open the popup, the already filtered column can be filtered again but the others not.
I don't know why I can't filter columns after opening and closing the popup.
Any ideas or hints would be really helpful. Thanks
HTML:
<div id="windoofTestOuter"><div id="windoofTest"></div></div>
<div id="processGrid"></div>
My grid:
$("#processGrid").kendoGrid({
sortable: true,
pageable: true,
selectable: true,
filterable: {
extra: false
},
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "/Home/GetProcesses",
cache: false,
type: "POST",
dataType: "json"
},
parameterMap: function (data) {
return $.extend({}, data, { sort: data.sort, filter: data.filter });
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: true,
page: "#ViewBag.ProcessPage",
schema: { data: "Data", total: "Total", model: { id: "Id" } },
pageSize: "#(#Model.MaxCountToShow)"
},
columns: [
{ field: "ErrorDateTime", title: "ProcessDateTime", width: "170px"/*, filterable: { ui: dateFilter }*/ },
{ field: "Name", title: "Processtype", attributes: { value: "type" }, width: "240px;", filterable: { ui: processtypeFilter} },
{ field: "Service", title: "Service", width: "181px;", filterable: { ui: serviceFilter } },
{ field: "Operation", title: "Operation", width: "130px", filterable: { ui: operationFilter } }
]
}).data("kendoGrid");
The link/string which shall open the popup:
function createProcessActionString(process) {
var det = '<a class="makeANiceMouse" onclick="processDetailUrl(' + process.Id + ', ' + grid.dataSource.page() + ')">Details</a>';
return det;
}
My popup:
function processDetailUrl(id, page) {
var windoof = $("#windoofTest").kendoWindow({
width: "1150px",
height: "300px",
content: det,
title: "Process Details",
actions: ["Minimize", "Maximize", "Close"],
close: function (e) {
windoof.data("kendoWindow").content(" ");
}
});
windoof.data("kendoWindow").center().open();
}
I deleted the unnecessary columns and so on..
EDIT: I tried to intitialize the filter in the filterMenuInit. After opening and closing the popup, I clicked on the filter icon of one of the columns, and I get the error : JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference . The same one as before.
EDIT: I used the windoof.destroy() but the filters weren't accessable afterwards.
EDIT solution: I have a workaround for working with the filters again. I just fake a click on each of it before I open a popup. It's not beautiful but it serves me so far.
BUT It seems like everything gets kicked/killed by that damn popup. I can't even access the grid's datasource anymore.. It's strange...

I'm dealing with the same issues but got well passed the Data not being there. Check out or use onDataBound and use e.sender to get a handle to the Grid Object opposed to .data("KendoGrid") from the onClose of the popup this is what fixed it for me. I'm still trying to get my filters to work though after the pop up closes.

ExtJS 4 Grid unwanted scrolling on load and node selection

I have a problem with the ExtJS 4 grid. I am using ExtJS 4.2.1, and whenever I load data into my grid using the loadRawData function, it automatically scrolls to the bottom, or near the bottom. Also, I am using grouping in the grid, and whenever I expand or collapse the node, it auto scrolls to the bottom again. This is really frustrating, and I can't seem to find a solution. I tried any solutions in this post from the Sencha forums, but nothing seemed to work.
This is my grid config:
gridPanel = new Ext.grid.Panel({
header: false,
title: 'Resultset',
id: 'resultTable',
width: 400,
split: true,
collapsible: true,
collapseMode: 'mini',
store: {
model: 'resultset',
autoLoad: false,
pageSize: 100,
proxy: {
type: 'ajax',
url: STORE_URL,
reader: {
type: 'json',
root: 'rows'
}
},
groupField:'tid'
},
features: [{ftype:'grouping'}],
deferRowRender: false,
columns: createColumns(),
selModel: {
checkOnly: true,
moveEditorOnEnter: false,
width: 20,
mode: 'MULTI'
},
selType: 'rowmodel',
tbar: [ createMenubar() ],
bbar:[ createPagingBar() ],
/*viewConfig: {
preserveScrollOnRefresh: true
}*/
});
And then when I load the data, I just do something like this:
var store = gridPanel.getStore();
store.loadRawData(data, false);
Any help would be appreciated!