I have an AJAX call, which updates a Highcharts chart and is supposed to update a Kendo Grid, as well. The data returned from AJAX is updated, but the grid doesn't refresh.
This is the setup for the grid's dataSource:
And this is the JS for the Kendo Grid:
I had thought this would work, but the grid stays the same. I know I must be missing a command somewhere, but I'm just not seeing it.
This is the setup for the grid's dataSource:
var smry_data = [{ mean : rtrn_data.SUMMARY["Mean"], std_deviation : rtrn_data.SUMMARY["Std. Deviation"], median : rtrn_data.SUMMARY["Median"], mode : rtrn_data.SUMMARY["Mode"], range : rtrn_data.SUMMARY["Range"], minimum : rtrn_data.SUMMARY["Minimum"], maximum : rtrn_data.SUMMARY["Maximum"], count : rtrn_data.SUMMARY["Count"], quintile20 : rtrn_data.SUMMARY["Quintile 20%"], quintile40 : rtrn_data.SUMMARY["Quintile 40%"], quintile60 : rtrn_data.SUMMARY["Quintile 60%"], quintile80 : rtrn_data.SUMMARY["Quintile 80%"], quintile100 : rtrn_data.SUMMARY["Quintile 100%"]}];And this is the JS for the Kendo Grid:
if(!$("#cntr-smry").data("kendoGrid")) { dtsc_smry_data = new kendo.data.DataSource({ data : smry_data , schema : { model : { fields : { mean : {type : "number"} , std_deviation : {type : "number"} , median : {type : "number"} , mode : {type : "number"} , range : {type : "number"} , minimum : {type : "number"} , maximum : {type : "number"} , count : {type : "number"} , quintile20 : {type : "number"} , quintile40 : {type : "number"} , quintile60 : {type : "number"} , quintile80 : {type : "number"} , quintile100 : {type : "number"} } } } }); $("#cntr-smry").kendoGrid({ dataSource : dtsc_smry_data , columns : [ {field : "mean", title : "Mean", template : '<span style="float:right;" class="fontBold">#=kendo.toString(mean, "n1")#</span>'} , {field : "std_deviation", title : "Std. Deviation", template : '<span style="float:right;" class="fontBold">#=kendo.toString(std_deviation, "n1")#</span>'} , {field : "median", title : "Median", template : '<span style="float:right;" class="fontBold">#=kendo.toString(median, "n1")#</span>'} , {field : "mode", title : "Mode", template : '<span style="float:right;" class="fontBold">#=kendo.toString(mode, "n0")#</span>'} , {field : "range", title : "Range", template : '<span style="float:right;" class="fontBold">#=kendo.toString(range, "n1")#</span>'} , {field : "minimum", title : "Minimum", template : '<span style="float:right;" class="fontBold">#=kendo.toString(minimum, "n1")#</span>'} , {field : "maximum", title : "Maximum", template : '<span style="float:right;" class="fontBold">#=kendo.toString(maximum, "n1")#</span>'} , {field : "count", title : "Count", template : '<span style="float:right;" class="fontBold">#=kendo.toString(count, "n0")#</span>'} , {field : "quintile20", title : "Quintile 20%", template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile20, "n1")#</span>'} , {field : "quintile40", title : "Quintile 40%", template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile40, "n1")#</span>'} , {field : "quintile60", title : "Quintile 60%", template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile60, "n1")#</span>'} , {field : "quintile80", title : "Quintile 80%", template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile80, "n1")#</span>'} , {field : "quintile100", title : "Quintile 100%", template : '<span style="float:right;" class="fontBold">#=kendo.toString(quintile100, "n1")#</span>'} ] });} else { $("#cntr-smry").data("kendoGrid").dataSource.read();}I had thought this would work, but the grid stays the same. I know I must be missing a command somewhere, but I'm just not seeing it.
8 Answers, 1 is accepted
0
Hello,
Atanas Korchev
the Telerik team
The read method will work only if your data source is reading data from a remote service. This is not the case here. You need to use the data method of the data source in order to update it (and all widgets bound to it).
dtsc_smry_data.data(newData);
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
Rank 1
answered on 13 Apr 2012, 04:00 PM
Now I'm getting somewhere, but I'm getting blanks, meaning I have something syntactically incorrect.
This is what I have in my else statement:
This is what I have in my else statement:
dtsc_smry_data.data({ mean : rtrn_data.SUMMARY["Mean"], std_deviation : rtrn_data.SUMMARY["Std. Deviation"], median : rtrn_data.SUMMARY["Median"], mode : rtrn_data.SUMMARY["Mode"], range : rtrn_data.SUMMARY["Range"], minimum : rtrn_data.SUMMARY["Minimum"], maximum : rtrn_data.SUMMARY["Maximum"], count : rtrn_data.SUMMARY["Count"], quintile20 : rtrn_data.SUMMARY["Quintile 20%"], quintile40 : rtrn_data.SUMMARY["Quintile 40%"], quintile60 : rtrn_data.SUMMARY["Quintile 60%"], quintile80 : rtrn_data.SUMMARY["Quintile 80%"], quintile100 : rtrn_data.SUMMARY["Quintile 100%"]});0
Hello,
All the best,
Atanas Korchev
the Telerik team
The newData should be a JavaScript array. Try this:
dtsc_smry_data.data( [ { mean : rtrn_data.SUMMARY["Mean"], std_deviation : rtrn_data.SUMMARY["Std. Deviation"], median : rtrn_data.SUMMARY["Median"], mode : rtrn_data.SUMMARY["Mode"], range : rtrn_data.SUMMARY["Range"], minimum : rtrn_data.SUMMARY["Minimum"], maximum : rtrn_data.SUMMARY["Maximum"], count : rtrn_data.SUMMARY["Count"], quintile20 : rtrn_data.SUMMARY["Quintile 20%"], quintile40 : rtrn_data.SUMMARY["Quintile 40%"], quintile60 : rtrn_data.SUMMARY["Quintile 60%"], quintile80 : rtrn_data.SUMMARY["Quintile 80%"], quintile100 : rtrn_data.SUMMARY["Quintile 100%"] } ] );All the best,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
Rank 1
answered on 13 Apr 2012, 05:08 PM
Using this logic, I now get [object Object] in my fields. The console.log command returns the correct data, so I know at least that part is correct.
if(!$("#cntr-smry").data("kendoGrid")) { dtsc_smry_data = new kendo.data.DataSource({ data : [{ mean : rtrn_data.SUMMARY["Mean"] , std_deviation : rtrn_data.SUMMARY["Std. Deviation"] , median : rtrn_data.SUMMARY["Median"] , mode : rtrn_data.SUMMARY["Mode"] , range : rtrn_data.SUMMARY["Range"] , minimum : rtrn_data.SUMMARY["Minimum"] , maximum : rtrn_data.SUMMARY["Maximum"] , count : rtrn_data.SUMMARY["Count"] , quintile20 : rtrn_data.SUMMARY["Quintile 20%"] , quintile40 : rtrn_data.SUMMARY["Quintile 40%"] , quintile60 : rtrn_data.SUMMARY["Quintile 60%"] , quintile80 : rtrn_data.SUMMARY["Quintile 80%"] , quintile100 : rtrn_data.SUMMARY["Quintile 100%"] }] , schema : { model : { fields : { mean : {type : "number"} , std_deviation : {type : "number"} , median : {type : "number"} , mode : {type : "number"} , range : {type : "number"} , minimum : {type : "number"} , maximum : {type : "number"} , count : {type : "number"} , quintile20 : {type : "number"} , quintile40 : {type : "number"} , quintile60 : {type : "number"} , quintile80 : {type : "number"} , quintile100 : {type : "number"} } } } }); $("#cntr-smry").kendoGrid({ dataSource : dtsc_smry_data , height : 50 , columns : [ {field : "mean", title : "Mean", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(mean, "n1")#</span>'} , {field : "std_deviation", title : "Std. Deviation", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(std_deviation, "n1")#</span>'} , {field : "median", title : "Median", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(median, "n1")#</span>'} , {field : "mode", title : "Mode", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(mode, "n0")#</span>'} , {field : "range", title : "Range", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(range, "n1")#</span>'} , {field : "minimum", title : "Minimum", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(minimum, "n1")#</span>'} , {field : "maximum", title : "Maximum", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(maximum, "n1")#</span>'} , {field : "count", title : "Count", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(count, "n0")#</span>'} , {field : "quintile20", title : "Quintile 20%", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(quintile20, "n1")#</span>'} , {field : "quintile40", title : "Quintile 40%", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(quintile40, "n1")#</span>'} , {field : "quintile60", title : "Quintile 60%", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(quintile60, "n1")#</span>'} , {field : "quintile80", title : "Quintile 80%", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(quintile80, "n1")#</span>'} , {field : "quintile100", title : "Quintile 100%", template : '<span style="margin-left:40%;" class="fontBold">#=kendo.toString(quintile100, "n1")#</span>'} ] });} else { console.log(rtrn_data.SUMMARY["Mean"]); dtsc_smry_data.data([{ mean : rtrn_data.SUMMARY["Mean"] , std_deviation : rtrn_data.SUMMARY["Std. Deviation"] , median : rtrn_data.SUMMARY["Median"] , mode : rtrn_data.SUMMARY["Mode"] , range : rtrn_data.SUMMARY["Range"] , minimum : rtrn_data.SUMMARY["Minimum"] , maximum : rtrn_data.SUMMARY["Maximum"] , count : rtrn_data.SUMMARY["Count"] , quintile20 : rtrn_data.SUMMARY["Quintile 20%"] , quintile40 : rtrn_data.SUMMARY["Quintile 40%"] , quintile60 : rtrn_data.SUMMARY["Quintile 60%"] , quintile80 : rtrn_data.SUMMARY["Quintile 80%"] , quintile100 : rtrn_data.SUMMARY["Quintile 100%"] }]);}0
Mike
Top achievements
Rank 1
Rank 1
answered on 13 Apr 2012, 05:19 PM
I found a problem. The data returned the first time is formatted as such:
I reference the values using this logic:
The second run returns this:
But the data seems to be handled differently, because now I have to reference the value using this logic:
Is this a bug? I can also use the [0] in the first run, and it'll work that way. Just seems odd that the first run is handled differently than subsequent runs.
,"SUMMARY":{"Mean":[12.77057382013079],...I reference the values using this logic:
rtrn_data.SUMMARY["Mean"]The second run returns this:
,"SUMMARY":{"Mean":[53.94829639783739],...But the data seems to be handled differently, because now I have to reference the value using this logic:
rtrn_data.SUMMARY["Mean"][0]Is this a bug? I can also use the [0] in the first run, and it'll work that way. Just seems odd that the first run is handled differently than subsequent runs.
0
Hi,
Atanas Korchev
the Telerik team
I don't see a difference in the response format. In both cases "Mean" is an array and data from it should have been referenced using the indexer. It is very strange that it works initially.
Greetings,Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
Rank 1
answered on 16 Apr 2012, 02:31 PM
My point exactly. They're made by the same PHP page, so the format is the same. This oddity is consistent across any fields in the response array.
0
Hello,
Atanas Korchev
the Telerik team
Well I tried to reproduce the problem to no avail. Here is a jsFiddle that I created: http://jsfiddle.net/korchev/hDfDc/
I am using [0] in both cases and things seem to work as expected.
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!