KendoUI Grid footer extras from returned JSON - javascript

I have the following JSON being returned from my PHP script to populate my Kendo grid:
data: [{id:1, sku:-, theName:Two tier wedding veil, basePrice:77.00, dimensions:-, weight:-,…},…]
querytime: "0.0000"
rowcount: 4
Which works great. As you can see I have added an extra parameter called "querytime".
How do I access that on the JS side of things so I can append that to the footer of the grid?
I have tried:
console.log($('#productGrid').data("kendoGrid").dataSource);
To try and find where my extra parameter is located but to no avail.
How can I access my customer parameter?
var columns = [
{
field: 'dateRaw',
title: 'Date added',
width: '90px',
template: '<span class="data" data-menu-id="1" data-item-id="#=id#" data-item-type="products"><abbr title="At #=time#">#=dateFormatted#</abbr></span>'
},
{
field: 'sku',
title: 'SKU',
width: '120px'
},
{
field: 'theName',
title: 'Name'
},
{
field: 'dimensions',
title: 'Dimensions',
//width: '120px'
},
{
field: 'weight',
title: 'Weight',
width: '80px'
},
{
field: 'basePrice',
title: 'Price',
width: '60px',
format: '{0:n}'
}]
$('#productGrid').kendoGrid({
rowTemplate: '',
dataSource: {
transport: {
read: {
type: 'POST',
dataType: 'json',
url: 'Ajax',
data: {
call: 'Product->productGrid'
}
}
},
schema: {
data: 'data',
querytime: 'querytime',
total: 'rowcount',
model: {
id: 'id',
fields: {
dateRaw: {
type: 'date'
},
id: {
type: 'number'
},
sku: {
type: 'string'
},
basePrice: {
type: 'number'
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
error: function(e) {
modalError(e.errorThrown + "<br/>" + e.status + "<br/>" + e.xhr.responseText)
}
},
height: 700,
autoBind: false,
filterable: true,
sortable: true,
pageable: true,
columns: columns
})

you are pretty close:
querytime is available inside the options object of your dataSource:
$('#productGrid').data('kendoGrid').dataSource.options.querytime

Related

Is it possible to have multiple instances of kendo grid

Hi i have a Kendo grid which works fine but I was wondering if its possible to add another exact one with a button click so i could have multiple instances of the same grid?
I am getting all the data from a sql database.
My code for the grid is ->
function DisplaySearch() {
var textS = $('#searchBox').val();
Textvalue = textS;
$.ajax({
type: "post",
data: JSON.stringify({
search_string: Textvalue,
}),
url: "Search.aspx/display_search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
$("#searchGrid").kendoGrid({
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
},
},
pageSize: 20,
},
reorderable: true,
navigatable: true,
selectable: "multiple",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
pageable: {
input: true,
numeric: true
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
]
});
}
};
any help would be appreciated.
Of course you can! You only need to make sure that the id of the grid is unique.
This code will add a div to a given container and create a grid - with any button click a new grid. Hope it works, I haven't tested it.
var gridNr = 1;
$("#btn").click(function(e){
$("#gridContainer").append("<div id='grid_'" + gridNr + " />");
$("#grid_" + gridNr).kendoGrid({ ... your grid code here ... });
gridNr++;
})

Why does BootstrapTable work just once?

I'm making a webApp and in one screen there are two tables, the first one for the categories I store on a DB and the second for the elements that belong to those categories. Both are BootstrapTable. What I'm trying to do is that when the user clicks on a row of the first table, the items of that category will load in the second table, and I managed to do so but it just works once. If I click on the first table then the second fills up, but if i click again over any other element of the first table nothing happens. I even used console.log to see if the event works and it does, before and after the table "reload".
function getProductos(Categoria) {
var id_cat=Categoria||iSeldCat;
$('div#tableProds').bootstrapTable({
url: '../../../controllers/classproductos?getProductos=-&categoria='+id_cat,
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
console.log(id_cat + " Print");
}
When running that code, I get in my console 1 Print, 3 Print and son on, but the table just doesn't do anything.
This is the first table, including the event which as I said before, works everytime:
function getCategorias(){
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
}
Any idea what it could be?
This approach of bootstrapping the table again should be avoided. Handle this in the following way.
On document ready
$(document.ready(function() {
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
$('div#tableProds').bootstrapTable({
data: [],
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
}
On selection of item
function getProductos(iSeldCat) {
$('div#tableProds').bootstrapTable('refresh', {url: "../../../controllers/classproductos?getProductos=-&categoria=" + iSeldCat});
}
I have not tested this code functionality. But this should be the approach. You may refer Bootstrap Table documentation for property and method call details.

ExtJS 5 grid filtering and sorting breaks in IE9

I am trying to add filtering to a simple ExtJS 5 Grid. I am using a simple example provided by the installation and looks like it is working fine, except in IE when I try to do filtering all the records get wiped.
Has anyone seen this issue? Here is the code that I am using.
`$("#SearchEmployees").click(function () {
var criteria = $("#employeeName").val();
if (criteria == '' || criteria == null) {
alert("Please apply search criteria.");
return;
}
var baseurl = $("#hdnUrlSearch").val();
var data = (function () {
$("#employeesSearchGrid").empty();
$.ajax({
type: "POST",
url: baseurl,
dataType: "json",
data: { employeeName: criteria },
async: false
}).done(function (retData) {
data = retData;
}).fail(function (xhr) {
alert(xhr.responseText);
});
return data;
})();
Ext.define('EmployeeSearch', {
extend: 'Ext.data.Model',
fields: [
'FullName',
'DepartmentName',
'PhoneNumber',
'EmailAddr'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'EmployeeSearch',
proxy: {
type: 'ajax'
},
data: data
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
forceFit: true,
columns: [{
header: 'Name',
dataIndex: 'FullName',
flex: 1,
filter: 'string',
width: 440
}, {
header: 'Department',
dataIndex: 'DepartmentName',
filter: 'string',
flex: 1,
width: 200
}, {
header: 'Direct Phone',
dataIndex: 'PhoneNumber',
filter: 'string',
flex: 1,
width: 240
}, {
header: 'Notification Email',
dataIndex: 'EmailAddr',
flex: 1,
filter: 'string'
}],
renderTo: 'employeesSearchGrid',
frame: true,
plugins: ['gridfilters']
});
});`
The issue was fixed by adding height of the grid. Once I did that filtering and sorting got fixed. Here is how my grid looks like now:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
text: 'Name',
dataIndex: 'FullName',
flex: 1,
width: 440,
sortable: true,
filter: 'string'
}, {
text: 'Department',
dataIndex: 'DepartmentName',
flex: 1,
width: 200,
sortable: true,
filter: 'string'
}, {
text: 'Direct Phone',
dataIndex: 'PhoneNumber',
flex: 1,
width: 240,
sortable: true,
filter: 'string'
}, {
text: 'Notification Email',
dataIndex: 'EmailAddr',
flex: 1,
sortable: true,
filter: 'string'
}],
forceFit: true,
split: true,
renderTo: 'employeesSearchGrid',
height: 210,
frame: true,
plugins: ['gridfilters']
});

Setting a data item for "Create" in Kendo Grid

I need to pass an additional parameter along with my grids datasources create routine but I am having trouble getting it to work.
I have tried:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem.set('phoneId', phoneId)
but this gives me the error Cannot read property 'set' of undefined.
Code for my grid:
function contactPhoneGrid() {
var contactPhoneGrid = $('#contactPhonesGrid').kendoGrid({
dataSource: {
pageSize: 25,
serverSorting: false,
serverFiltering: true,
sort: {
field: "ref",
dir: "asc"
},
transport: {
read: {
url: ROOT + 'Contact/contactPhoneGrid',
dataType: 'json',
type: 'POST'
},
create: {
url: ROOT + 'Contact/createContactPhone',
type: 'POST'
},
update: {
url: ROOT+'Contact/updateContactPhone',
dataType: 'json',
type: 'POST'
},
destroy: {
url: ROOT+'Contact/deleteContactPhone',
dataType: 'json',
type: 'POST'
}
},
error: function(e) {
alert(e.errorThrown + "\n" + e.status + "\n" + e.xhr.responseText);
},
schema: {
data: "data",
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
type: {
type: 'string',
editable: true
},
tel: {
type: 'string',
editable: true
},
typeId: {
type: 'number',
editable: true
}
}
}
}
},
autoBind: false,
columns: [
{
field: 'phoneId',
headerTemplate: '<b>Phone Id</b>',
filterable: false,
width: '50px',
hidden: true
},
{
field: 'type',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
// template: '#=type#'
},
{
field: 'tel',
headerTemplate: '<b>Number</b>',
filterable: false,
}
],
edit: function(e) {
var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
if (ddl) {
ddl.open();
}
},
height: '75',
filterable: true,
editable: true,
sortable: true,
scrollable: true
}).data("kendoGrid");
}
dataItem is a method so you should not use it as:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem
but as:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem(something here)
See documentation here : http://docs.telerik.com/kendo-ui/api/web/grid#methods-dataItem

ExtJS 4.1 Infinite Grid Scrolling doesnt work

I want to get an infinite scrolling grid with extjs4 and a c# backend... i am setting the proxy api in my controller..
My Model:
Ext.define('SCT.model.training.course.TrainingRequirementList', {
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [
{ name: 'ID', type: 'int', convert: null },
{ name: 'EmployeeName', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'StatusText', type: 'string' },
{ name: 'Status', type: 'int' },
{ name: 'Priority', type: 'string' },
{ name: 'Date', type: 'string' },
{ name: 'Cost', type: 'string' },
{ name: 'CanApprove', type: 'bool' },
{ name: 'CanRequest', type: 'bool' },
{ name: 'ConfirmStatus', type: 'string' },
{ name: 'PlanId', type: 'int'}
]
});
My Grid:
{
xtype: 'gridpanel',
flex: 1,
padding: '0 10 10 10',
minHeight: 200,
verticalScroller: {
xtype: 'paginggridscroller'
},
store: {
model: 'SCT.model.training.course.TrainingRequirementList',
pageSize: 200,
autoLoad: true,
remoteSort: true,
sorters: {
property: 'Date',
direction: 'DESC'
},
proxy: {
type: 'direct',
extraParams: {
total: 50000
},
reader: {
type: 'json',
root: 'ID',
totalProperty: 'totalCount'
},
simpleSortMode: true
}
},
columns:
[{
text: Lang.Main.Employeee,
dataIndex: 'EmployeeName',
flex: 1,
filterable: true
},
{
text: Lang.Main.Course,
dataIndex: 'Description',
flex: 1,
filterable: true
},
{
text: Lang.Main.Status,
dataIndex: 'StatusText',
flex: 1,
filterable: true
},
{
text: Lang.Main.Priority,
dataIndex: 'Priority',
flex: 1
},
{
text: Lang.Main.Date,
dataIndex: 'Date',
flex: 1
},
{
text: Lang.Main.Cost,
dataIndex: 'Cost',
flex: 1,
filterable: true
},
{
text: Lang.Main.Actions,
flex: 1,
align: 'center',
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'Design/icons/cog_edit.png',
tooltip: Lang.Main.Open,
handler: function (grid, rowIndex, colIndex, item) {
this.onGridOpen(grid.getStore().getAt(rowIndex));
}
}]
}],
selModel: { mode: 'MULTI', selType: 'checkboxmodel' },
}
setting proxy in controoler:
view.grid.getStore().setProxy({
type: 'direct',
model: 'SCT.model.training.course.TrainingRequirementList',
api: { read: SCT.Service.Training.Plan.GetFilteredRequirements },
extraParams: { total: 50000 },
reader: {
type: 'json',
root: 'ID',
totalProperty: 'totalCount'
},
simpleSortMode: true
});
additional information about my view:
Ext.define('SCT.view.training.course.TrainingRequirements',
{
extend: 'Ext.panel.Panel',
require: [ 'Ext.grid.PagingScroller', 'Ext.ux.grid.FiltersFeature'],
My grid is still loading all data at once (about 8000 rows...) ...
i've searched for solutions and worked through tutorials.. i still dont get it.
please help me out... i dont get it at all...
UPDATE
this is my srv request:
and the response got 3MB (about 8k datasets... ) ..??
Your request dump shows that Ext effectively sends the limit param, so that's your server that is not handling it...
Just a piece of advice, but you should consider upgrading to last version of Ext, since buffered grid seems to have been simplified, and that will avoid you having to rework it if you eventually upgrade.

Categories