Develop Reference

How can I refresh "footer" on Kendo Ui Grid using JQuery

I Set Kendo Ui Grid and footer,
footer will get total price,
but it always can't get last data.
hope somebody can help to fix it.
and i try $("#Grid").data("kendoGrid").refresh();
but it didn't work for me.
kendoui grid set
dataSource
var AddGriddataSource = new kendo.data.DataSource({
data: [],
schema: {
model: {
fields: {
id: 'No',
Name: { editable: false, nullable: false },
txtStockNum: { editable: false, nullable: false },
txtReturnNum: { editable: true, nullable: false },
txtPricetax: { editable: false, nullable: false },
txtPriceNum1: { editable: false, nullable: false }
}
} // end of model
}, // end of schema
aggregate: [{ field: "txtPriceNum", aggregate: "sum" }, { field: "txtPriceNum1", aggregate: "sum" }],
});
Cell
var AddGridCells = [
{ field: "Name", title: "Name", width: "20px" },
{ field: "StockNum", title: "Stock", width: "20px" },
{ field: "txtReturnNum", title: "txtReturnNum", width: "100px", template: '<input id = "Del" class="returnDel" type="button" value="▼" style="margin: -1px" /><input id="Txt_test1" class="returnTxtBox" type="textbox" value= #=txtReturnNum# style="margin: 2px" /><input id = "plus" class="returnPlus" type="button" value="▲" style="margin: -1px" />' },
{ field: "txtPrice", title: "txtPrice", width: "20px", hidden: true },
{ field: "txtPricetax", title: "txtPricetax", width: "20px", format: "{0:n3}" },
{ field: "txtPriceNum", title: "Total", width: "20px", footerTemplate: "#= kendo.toString(sum, '0.000')#", hidden: true },
{ field: "txtPriceNum1", title: "Total", width: "30px", footerTemplate: "<span id='footerPlaceholder'>#= kendo.toString(sum, '0.000')#</span>", format: "{0:n3}" },
{ command: [{ text: "X", click: DelchooseDetails }], title: " ", width: "10px" },
];
and
$("#AddGrid").kendoGrid({
dataSource: AddGriddataSource,
selectable: "row",
scrollable: false,
columns: AddGridCells,
change: numberInput,
pageable: {
buttonCount: 3,
messages: GridPageMsg
},
height: '100%',
editable: true
}).data("kendoGrid");
JQuery todo
$(document).on('click', '.returnPlus', function (e) {
if (nowStatus != 0) {
return;
}
var ds2 = $("#AddGrid").data("kendoGrid").dataSource;
var row = $(this).closest("tr"),
grid = $("#AddGrid").data("kendoGrid"),
dataItem = grid.dataItem(row);
debugger;
ds2.fetch(function () {
dataItem.txtReturnNum = dataItem.txtReturnNum - (-1);
dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
})
$("#AddGrid").data("kendoGrid").refresh();
return;
});
$(document).on('click', '.returnDel', function (e) {
if (nowStatus != 0) {
return;
}
var ds2 = $("#AddGrid").data("kendoGrid").dataSource;
var row = $(this).closest("tr"),
grid = $("#AddGrid").data("kendoGrid"),
dataItem = grid.dataItem(row);
debugger;
ds2.fetch(function () {
dataItem.txtReturnNum = dataItem.txtReturnNum - (1);
dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
})
$("#AddGrid").data("kendoGrid").refresh();
return;
});
I'm not sure If i does not described correctly,so i record video
https://imgur.com/mePv5qI
How can i do will be correct

Why are you using fetch()? It seems that you don't need it, since you're not updating data from api. You're only updating local data, right ? So remove it and change dataItem directly:
var row = $(this).closest("tr"),
grid = $("#AddGrid").data("kendoGrid"),
dataItem = grid.dataItem(row);
dataItem.txtReturnNum = dataItem.txtReturnNum - (-1);
dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
$("#AddGrid").data("kendoGrid").refresh();
Or
var row = $(this).closest("tr"),
grid = $("#AddGrid").data("kendoGrid"),
dataItem = grid.dataItem(row);
dataItem.set('txtReturnNum', dataItem.txtReturnNum - (-1));
dataItem.set('txtPriceNum', dataItem.txtReturnNum * dataItem.txtPrice);
dataItem.set('txtPriceNum1', mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax));

How to make a cell in a jqxGrid dynamically editable depending on the content of the row

I am trying to make a cell in a jqxGrid editable depending on the value of another column in the row (with the name Editable).
{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
editable: function (index, datafield, value, defaultvalue, column, rowdata) {
return rowdata.Editable;
}
},
This does not work. The cell is always editable regardless of the value of rowdata.Editable.
Replacing return rowData.Editable; with return false; does not work either.
I am using jqWidgets 3.9.0 in combination with JQuery 1.7.1.
Can anybody explain why this does not work and how to get it to work?

I got this to work by doing the following:
Replacing the url in the data source with localdata which references a local array called "data".
This array is filled using the original source url.
var data = [{}];
var source =
{
datatype: "json",
datafields: [
{ name: 'Id', type: 'number' },
{ name: 'Name', type: 'string' },
{ name: 'Percentage', type: 'string' },
{ name: 'Editable', type: 'bool' }
],
localdata: data
}
Using the cellbeginedit property instead of the editable property when defining the columns in the jqxGrid:
var dataAdapter = new $.jqx.dataAdapter(source);
$("#myGrid").jqxGrid(
{
width: 800,
source: dataAdapter,
editable: true,
editmode: 'click',
selectionmode: 'singlecell',
columns: [
{ text: "Id", datafield: "Id", columntype: 'textbox', editable: false, hidden: true },
{ text: "Name", datafield: "Name", columntype: 'textbox', width: 400, editable: false },
{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
cellbeginedit: function (row) {
return data[row].Editable;
}
},
]
});

I was using the cellclick to do this kind of control.
$("#jqxGrid").on('cellclick', function (event) {
var args = event.args;
var datafield = event.args.datafield;
var rowIndex = args.rowindex;
var data = $('#jqxGrid').jqxGrid('getrowdata', rowIndex);
if(datafield == 'assign'){
if(data.assign){
$('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', true);
}else{
$('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', false);
}
}
});

KnockoutJS components with KendoUI chart only works for the last chart

I have an Observable Array of items that creates components with a parameter.
Within each component, I use that parameter to query for data (through AJAX). I return that data into an Observable Array and use that Array as a data source for a KendoUI chart.
Example of list of created components with a parameter:
<csglist params="account:'08167526'"></csglist>
<hr>
<csglist params="account:'0873458'"></csglist>
<hr>
<csglist params="account:'0828337'"></csglist>
<hr>
<csglist params="account:'086778'"></csglist>
call that gets the data
getCategory = function () {
self.categoryChart([]);
xhr_get(cont.publish + 'api/dbmain/getCategory', { 'id': params.account }).done(function (allData) {
var mappedLogs = $.map(allData, function (item) { return new categoryData(item) });
self.categoryChart(mappedLogs);
buildChart();
})
}
function buildchart(){
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
}
the create chart
function createChart() {
$("#" + self.act() + "chart").kendoChart({
dataSource: {
data: ko.toJS(self.categoryChart)
//, sort: { field: "category", dir: "asc" }
},
title: {
text: self.type()
},
legend: {
visible: true,
position: "bottom"
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
field: "sales",
name: "Current Sales",
color: "#66110F"
}, {
field: "opp",
name: "Opportunity",
color: "#E65F5B"
}],
valueAxis: {
// max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
visible: false
},
categoryAxis: {
field: "category",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: false,
template: "#= series.name #: #= value #"
}
});
}
But when the components are all created, only the last one has data.
Can anyone tell me why is this happening?

when I changed the the buildChart = function to self.buildChart = function, it works!

Kendo Grid Aggregate for current page only

I am having an issue with the Kendo Grid aggregate function that I can't seem to solve.
I have a number of rows containing number values. At the bottom of the grid I want to display the sum of the rows.
This is already working as demonstrated in this fiddle:
http://jsfiddle.net/0Ly94e49/
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize: 7,
aggregate: [{
field: "ProductName",
aggregate: "count"
}, {
field: "UnitPrice",
aggregate: "sum"
}, {
field: "UnitsOnOrder",
aggregate: "sum"
}, {
field: "UnitsInStock",
aggregate: "min"
}, {
field: "UnitsInStock",
aggregate: "max"
}]
},
sortable: true,
scrollable: false,
pageable: true,
columns: [{
field: "ProductName",
title: "Product Name",
footerTemplate: "Total Count: #=count#",
}, {
field: "UnitPrice",
title: "Unit Price"
}, {
field: "UnitsOnOrder",
title: "Units On Order",
footerTemplate: "Sum: #=sum#",
}]
});
});
The problem is that, as in the fiddle, the sum is for all of the rows on all pages. What I want is the sum of the rows on the current page only.
Any ideas how to change the fiddle to do that?
The project is in Angular, if that makes any difference.
Thank you in advance.

My achievement for this situation. I`ve written an aggregate:
dataSource: {
data: dataOfTable,
aggregate: [
{field: "field1", aggregate: "sum"},
{field: "field2", aggregate: "sum"},
{field: "field3", aggregate: "sum"}
],
pageSize: 20
},
FooterTemplate for column:
{
field: "field1",
title: 'Field1',
footerTemplate: "#=getCurrentField1()#"
}
for field2, field3, etc.:
{
field: "field2",
title: 'Field2',
footerTemplate: "#=currentField2#"
}
And function getCurrentField1:
// aggregates data on current page
var currentField1 = 0;
var currentField2 = 0;
var currentField3 = 0;
function getCurrentField1() {
var displayedData = $("#grid").data().kendoGrid.dataSource.view()
var resField1 = 0;
var resField2 = 0;
var resField3 = 0;
for (var i = 0; i <= displayedData.length; i++) {
if (displayedData[i] != undefined) {
resField1 += displayedData[i].field1;
resField2 += displayedData[i].field2;
resField3 += displayedData[i].field3;
}
}
currentField1 = resField1;
currentField2 = resField2;
currentField3 = resField3;
return currentPayAmount;
}
With dataBound pagination works improperly. Current data in footerTemplates were incorrect as binding was made after value of footerTemplates` was setted. So I add a function to first column, that evaluates all current values and set it properly.

In the end what I did was calculate the current page sum like this:
$scope.getCurrentPageSums = function () {
var pageNumber = $scope.grid.dataSource.page();
var pageSize = $scope.grid.dataSource.pageSize();
var first = pageSize * (pageNumber - 1);
var last = first + pageSize - 1;
var resAmount = 0;
var resDistance = 0;
for (var i = first; i <= last; i++) {
if (allReports[i] != undefined) {
resAmount += allReports[i].AmountToReimburse;
resDistance += allReports[i].Distance;
}
}
$scope.currentPageAmountSum = resAmount;
$scope.currentPageDistanceSum = resDistance;
}
I assign the rows returned from the server to allReports in the schema part of the datasource
Schema {
Data: function(data){
allReports = data;
}
}
Then I call getCurrentPageSums in the databound part of the datasource
dataBound: function () {
$scope.getCurrentPageSums();
}
Finally I bind to the value of currentPageSum in the footerTemplate of the relevant field
field: "Distance",
title: "Afstand",
footerTemplate: "Side: {{currentPageDistanceSum}}, total: #= sum # "

Set serverPaging to true.
pageSize: 7,
serverPaging : true,
aggregate: [{
field: "ProductName",
aggregate: "count"
}, {
field: "UnitPrice",
aggregate: "sum"
}, {
field: "UnitsOnOrder",
aggregate: "sum"
}, {
field: "UnitsInStock",
aggregate: "min"
}, {
field: "UnitsInStock",
aggregate: "max"
}]

Kendo UI Grid Refesh on Dropdown Selection

I have a grid where each row has a select drop down box in with values.
When an item is selected, how can I make the grid reload to reflect the change?
The reason I want to do this is because the item selected from the drop down effects an amount in another column.
Here is the code for my dropdown:
function shippingModelSelect(container, options)
{
$('<input required data-text-field="modelName" data-value-field="modelId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: [
{
"modelName": "Individual shipping cost",
"modelId": 1
},
{
"modelName": "Based on weight",
"modelId": 2
},
{
"modelName": "Based on value",
"modelId": 3
}
],
close: function()
{
handleChange();
}
});
}
My handle change function:
var gridAlert = $('#gridAlert');
var handleChange = function(input, value) {
if(input && value)
{
detail = 'Product <b>'+input[0].name+'</b> changed to <b>'+value+'</b>';
gridAlert.html('<b>Changes saved!</b><p>'+detail+'</p>');
gridAlert.fadeIn('slow', function(){
setTimeout(function(){
gridAlert.fadeOut();
}, 2000)
});
}
dataSource.sync();
}
And finally my grid setup:
dataSource = new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
transport: {
read: {
url: ROOT+'products/manage'
},
update: {
url: ROOT+'products/set-product',
type: "POST",
data: function(data)
{
data.dateAdded = kendo.toString(data.dateAdded, 'yyyy-MM-dd hh:ii:ss')
return data;
}
}
},
pageSize: 20,
sort: {
field: 'id',
dir: 'desc'
},
error: function(e) {
alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
},
schema: {
data: "data",
total: "rowcount",
model: {
id: "id",
fields: {
id: {
type: 'number',
editable: false
},
SKU: {
type: "string"
},
name: {
type: "string"
},
dateAdded: {
type: "date",
format: "{0:yyyy/MM/dd hh:mm}",
editable: false
},
shippingModel: {
type: "string"
},
shippingModelId: {
type: "number"
},
price: {
type: "number"
}
}
}
}
})
$('#productGrid').kendoGrid({
dataSource: dataSource,
autoBind: true,
columns: [
{
field: "image",
title: "Image",
width: 30,
template: "#= '<img title=\"'+alt+'\" src=\"images/'+image+'\"/>' #"
},
{
field: "SKU",
title: "SKU",
width: 50,
headerTemplate: "<abbr title=\"Stock Keeping Unit - A unique identifier for this product\">SKU</abbr>"
},
{
field: "stockQuantity",
title: "Quantity",
width: 30
},
{
field: "name",
title: "Name",
width: 200
},
{
field: "dateAdded",
title: "Date Added",
width: 80,
template: "#= niceDate #"
},
{
field: "shippingModelId",
title: "Shipping Model",
width: 50,
editor: shippingModelSelect,
template: "#= shippingModel #"
},
{
field: "price",
title: "Price",
width: 80,
//format: "{0:c}",
template: "#= '£'+price.toFixed(2)+'<br /><span class=\"grey\">+£'+shipping+' shipping</span>' #"
}
],
sortable: true,
editable: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50]
},
scrollable: false,
reorderable: true,
edit: function(e) {
var value;
var numericInput = e.container.find("[data-type='number']");
// Handle numeric
if (numericInput.length > 0)
{
var numeric = numericInput.data("kendoNumericTextBox");
numeric.bind("change", function(e) {
value = this.value();
handleChange(numericInput, value);
});
return;
}
var input = e.container.find(":input");
// Handle checkbox
if (input.is(":checkbox"))
{
value = input.is(":checked");
input.change(function(){
value = input.is(":checked");
handleChange(input, value);
});
}
else
{
// Handle text
value = input.val();
input.keyup(function(){
value = input.val();
});
input.change(function(){
value = input.val();
});
input.blur(function(){
handleChange(input, value);
});
}
}
}
)

You will need to do two things.
Wait for changes to finish syncing
Tell the grid to re-read the datasource
This should do both for you
dataSource.bind("sync", function(e) {
$('#productGrid').data("kendoGrid").dataSource.read();
});
For more info see the datasource sync event and datasource read method on their docs site.