Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data. I want to update the second column with the returned data but I'm not having any luck and I'm not even sure if this is the correct approach. I can change the second column with static data by adding a change event to my datasource of my grid, but that of course doesn't help. The only examples I can seem to find show changing another column with client side data, not data returned from the server. Here's what I have so far:
Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data, I want to update the second column with the data returned but I'm not having any luck and I'm not sure if this is the correct approach. The only examples I've seen only show changing another column with client side data, not data returned from the server. Here's what I have so far:
$("#manualStatsGrid").kendoGrid({
dataSource: this.GetManualStatisticsDataSource(),
sortable: true,
pageable: false,
filterable: true,
toolbar: ["create"],
editable: "inline",
messages: {
commands: {
create: "Add New Statistic"
}
},
edit: function (e) {
var _this = _manualStats;
var input = e.container.find(".k-input");
var value = input.val();
input.keyup(function(){
value = input.val();
});
$("[name='Statistic']", e.container).blur(function(){
var input = $(this);
$("#log").html(input.attr('name') + " blurred " + value);
//valid the GL account number
$.ajax({
type: "GET",
url: _this.ValidateGlUrl,
dataType: 'json',
data: { glNumber: value },
success: function (response) {
var newDescription = response.Data.description;
console.log(newDescription);
//change description column here?
},
error: function (response) {
console.log(response);
}
});
});
},
columns: [
{ field: "Statistic" },
{ field: "Description" },
{ field: "Instructions" },
{ command: ["edit", "destroy"], title: " ", width: "250px"}
]
});
}
this.GetManualStatisticsDataSource = function () {
var _this = _manualStats;
var dataSource = {
type: "json",
transport: {
read: {
type: "POST",
url: _this.GetManualStatisticsUrl,
dataType: "json"
},
update: {
type: "POST",
url: _this.UpdateManualStatisticsUrl,
dataType: "json"
},
create: {
type: "POST",
url: _this.CreateManualStatisticsUrl,
dataType: "json"
},
destroy: {
type: "POST",
url: _this.DeleteManualStatisticsUrl,
dataType: "json"
}
},
schema: {
model: {
id: "Statistic",
fields: {
Statistic: {
type: "string",
editable: true,
validation: { required: true, pattern: "[0-9]{5}.[0-9]{3}", validationmessage: "Please use the following format: #####.###" }
},
Description: { editable: false },
Instructions: { type: "string", editable: true }
}
}
}
//change: function (e) {
// if (e.action === "itemchange" && e.field === "Statistic") {
// var statistic = e.items[0].Statistic;
// $.ajax({
// url: this.ValidateGlUrl,
// data: { statistic: statistic },
// async: true,
// cache: false,
// contentType: "application/json; charset=utf-8",
// type: "GET",
// success: function (result) {
// debugger;
// console.log(result);
// var model = e.items[0],
// type = model.Type,
// currentValue = "new description";
// model.Description = currentValue;
// $("#manualStatsGrid").find("tr[data-uid='" + model.uid + "'] td:eq(1)").text(currentValue);
// },
// error: function (xhr) {
// console.log(xhr.error);
// }
// });
// }
//}
}
return dataSource;
};
1 Answer, 1 is accepted
0
Hello Tommy,
I can suggest two possible approaches in this scenario:
1) Once you have the newDescription value, use logic similar to the one used to take the value of the input in the first column, to take the instance of the element in the second column and set its value to newDescription.
2) Create a new function in the Model's definition that makes the calculations and bind to a certain column, as shown in this Dojo example:
http://dojo.telerik.com/ecoPU
I hope this is helpful.
Regards,
Stefan
Telerik by Progress
I can suggest two possible approaches in this scenario:
1) Once you have the newDescription value, use logic similar to the one used to take the value of the input in the first column, to take the instance of the element in the second column and set its value to newDescription.
2) Create a new function in the Model's definition that makes the calculations and bind to a certain column, as shown in this Dojo example:
http://dojo.telerik.com/ecoPU
I hope this is helpful.
Regards,
Stefan
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.