Dear Kendo Team,
I am using a kendo combobox which displays util codes which belongs to each customer water meter. When user selects one
util code the kendo grid will populate the meter reading belongs to that meter. Now suppose that the user selects one customer
util code from kendo combobox it is calling a handler HandlerGetUtilsDetails.ashx.
My first question is the handler get called twice when I choose a util code. This was recognize as a bug in kendo combobox Our developers are still facing this issue.Is there anyway that we can prevent multiple calls to the handler?
The second issue is think that you get some results for a given util code. You should be able to navigate through the grid
using the paging available. Suppose you want to check another util code then the user will again choose the relavent util
code. Now the problem is the user navigates to the end of the result using the page numbers and select go to first page
button in the kendo grid navigation bar. Now instead of showing the first page of the current records it shows previous
result first page( result belongs to the previous util code details which the user browse little bit earlier).
I am sending my code to you guys to review. A quick solution is highly appreciated because we cannot go down with development.
Cheers!!!
My code block looks like this
<script type="text/javascript">
$(document).ready(function () {
$("#DropDownList1").width(500).kendoComboBox();
var destroyer1;
var destroyer2;
$("#DropDownList1").kendoComboBox({
placeholder: "Select Meter...",
dataTextField: "Display",
dataValueField: "CustCode",
suggest: true,
dataSource: {
serverFiltering: true,
serverPaging: true,
transport: {
read: function (options) {
var persons;
var new_obj;
var done;
destroyer1 = $.ajax({
url: "HandlerGetUtils.ashx",
dataType: "text",
success: function (result) {
// notify the DataSource that the operation is complete
persons = '';
persons = result.split(",");
new_obj = { data: [] };
for (var a = 0; a < persons.length - 1; a++) {
var temp = persons[a].split(":");
for (var b = 0; b < 1; b++) {
if (temp[2] == "" && temp[1] != "undefined") {
new_obj.data.push({
CustCode: temp[0] + "," + temp[1],
UtilCode: temp[1],
Display: temp[1] + "-" + temp[3]
});
done = new_obj.data;
result = done;
options.success(result);
}
if (temp[2] != "" && temp[1] != "undefined") {
new_obj.data.push({
CustCode: temp[0] + "," + temp[1],
UtilCode: temp[1],
Display: temp[1] + "-" + temp[2]
});
done = new_obj.data;
result = done;
options.success(result);
}
}
}
}
});
}
}
}
});
var combobox = $("#DropDownList1").data("kendoComboBox");
combobox.bind("change", function (e) {
// handle event
// bind to the change event
var value1 = combobox.value();
var valueselector = value1.split(",");
var text1 = combobox.text();
var hell = null;
destroyer2 = $.ajax({
url: "HandlerGetUtilsDetails.ashx",
data: { utilcodes: EncodeURIC(valueselector[1]), customercodes: EncodeURIC(valueselector[0]) },
dataType: "json",
cache:false,
success: function (result) {
// notify the DataSource that the operation is complete
if (valueselector[1] != "undefined" && valueselector[1] != null && valueselector[1] != "" ) {
if (result != "" && result != "undefined" && result != null && result != "[]") {
hell = null;
hell = result;
$("#gridMeterReading").kendoGrid({
dataSource: {
data: hell,
pageSize: 12,
schema: {
model: {
fields: {
ReadDate: { field: "ReadDate", type: "date", format: "{0:dd/MM/yyyy}" },
}
}
}
},
pageable:true,
groupable: true,
sortable: true,
scrollable: false,
filterable: true,
columns: [
{ field: "Meter", title: "Meter" },
{ field: "ReadDate", title: "ReadDate", type: "date", format: "{0:dd/MM/yyyy}" },
{ field: "Reading", title: "Reading" },
{ field: "UtilCode", title: "UtilCode" },
{ field: "Actual", title: "Actual" }
]
});
var dataSource = $("#gridMeterReading").data("kendoGrid").dataSource;
var filters = dataSource.filter();
var allData = dataSource.data();
dataSource.cache(false);
var historyCount = history.length;
history.go(-historyCount);
}
else{
var data = "";
var dataSource = new kendo.data.DataSource({
data: data,
pageSize: 12
});
$("#gridMeterReading").kendoGrid({
dataSource: dataSource,
pageable: true,
groupable: true,
sortable: true,
scrollable: false,
filterable: true,
columns: [
{ field: "Meter", title: "Meter" },
{ field: "ReadDate", title: "ReadDate" },
{ field: "Reading", title: "Reading" },
{ field: "UtilCode", title: "UtilCode" },
{ field: "Actual", title: "Actual" }
]
});
}
}
}
});
});
});
</script>
I am using a kendo combobox which displays util codes which belongs to each customer water meter. When user selects one
util code the kendo grid will populate the meter reading belongs to that meter. Now suppose that the user selects one customer
util code from kendo combobox it is calling a handler HandlerGetUtilsDetails.ashx.
My first question is the handler get called twice when I choose a util code. This was recognize as a bug in kendo combobox Our developers are still facing this issue.Is there anyway that we can prevent multiple calls to the handler?
The second issue is think that you get some results for a given util code. You should be able to navigate through the grid
using the paging available. Suppose you want to check another util code then the user will again choose the relavent util
code. Now the problem is the user navigates to the end of the result using the page numbers and select go to first page
button in the kendo grid navigation bar. Now instead of showing the first page of the current records it shows previous
result first page( result belongs to the previous util code details which the user browse little bit earlier).
I am sending my code to you guys to review. A quick solution is highly appreciated because we cannot go down with development.
Cheers!!!
My code block looks like this
<script type="text/javascript">
$(document).ready(function () {
$("#DropDownList1").width(500).kendoComboBox();
var destroyer1;
var destroyer2;
$("#DropDownList1").kendoComboBox({
placeholder: "Select Meter...",
dataTextField: "Display",
dataValueField: "CustCode",
suggest: true,
dataSource: {
serverFiltering: true,
serverPaging: true,
transport: {
read: function (options) {
var persons;
var new_obj;
var done;
destroyer1 = $.ajax({
url: "HandlerGetUtils.ashx",
dataType: "text",
success: function (result) {
// notify the DataSource that the operation is complete
persons = '';
persons = result.split(",");
new_obj = { data: [] };
for (var a = 0; a < persons.length - 1; a++) {
var temp = persons[a].split(":");
for (var b = 0; b < 1; b++) {
if (temp[2] == "" && temp[1] != "undefined") {
new_obj.data.push({
CustCode: temp[0] + "," + temp[1],
UtilCode: temp[1],
Display: temp[1] + "-" + temp[3]
});
done = new_obj.data;
result = done;
options.success(result);
}
if (temp[2] != "" && temp[1] != "undefined") {
new_obj.data.push({
CustCode: temp[0] + "," + temp[1],
UtilCode: temp[1],
Display: temp[1] + "-" + temp[2]
});
done = new_obj.data;
result = done;
options.success(result);
}
}
}
}
});
}
}
}
});
var combobox = $("#DropDownList1").data("kendoComboBox");
combobox.bind("change", function (e) {
// handle event
// bind to the change event
var value1 = combobox.value();
var valueselector = value1.split(",");
var text1 = combobox.text();
var hell = null;
destroyer2 = $.ajax({
url: "HandlerGetUtilsDetails.ashx",
data: { utilcodes: EncodeURIC(valueselector[1]), customercodes: EncodeURIC(valueselector[0]) },
dataType: "json",
cache:false,
success: function (result) {
// notify the DataSource that the operation is complete
if (valueselector[1] != "undefined" && valueselector[1] != null && valueselector[1] != "" ) {
if (result != "" && result != "undefined" && result != null && result != "[]") {
hell = null;
hell = result;
$("#gridMeterReading").kendoGrid({
dataSource: {
data: hell,
pageSize: 12,
schema: {
model: {
fields: {
ReadDate: { field: "ReadDate", type: "date", format: "{0:dd/MM/yyyy}" },
}
}
}
},
pageable:true,
groupable: true,
sortable: true,
scrollable: false,
filterable: true,
columns: [
{ field: "Meter", title: "Meter" },
{ field: "ReadDate", title: "ReadDate", type: "date", format: "{0:dd/MM/yyyy}" },
{ field: "Reading", title: "Reading" },
{ field: "UtilCode", title: "UtilCode" },
{ field: "Actual", title: "Actual" }
]
});
var dataSource = $("#gridMeterReading").data("kendoGrid").dataSource;
var filters = dataSource.filter();
var allData = dataSource.data();
dataSource.cache(false);
var historyCount = history.length;
history.go(-historyCount);
}
else{
var data = "";
var dataSource = new kendo.data.DataSource({
data: data,
pageSize: 12
});
$("#gridMeterReading").kendoGrid({
dataSource: dataSource,
pageable: true,
groupable: true,
sortable: true,
scrollable: false,
filterable: true,
columns: [
{ field: "Meter", title: "Meter" },
{ field: "ReadDate", title: "ReadDate" },
{ field: "Reading", title: "Reading" },
{ field: "UtilCode", title: "UtilCode" },
{ field: "Actual", title: "Actual" }
]
});
}
}
}
});
});
});
</script>