Go To first page returns Previously used data in Kendo Grid

2 posts, 1 answers
  1. Dimantha
    Dimantha avatar
    2 posts
    Member since:
    Jun 2012

    Posted 16 Dec 2012 Link to this post

    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>

  2. Answer
    Daniel
    Admin
    Daniel avatar
    1364 posts
    Member since:
    Sep 2012

    Posted 19 Dec 2012 Link to this post

    Hello Dimantha,

    The change event is probably triggered twice because it is initialized twice:

    $("#DropDownList1").width(500).kendoComboBox();
     
            var destroyer1;
            var destroyer2;
     
            $("#DropDownList1").kendoComboBox({
            ....
    Check if removing the first initialization resolves the problem. If it persists, I will need a runnable sample to check what exactly goes wrong.
    The Grid is also initialized each time the event is triggered. You should just filter the data with the dataSource filter method to show the correct result. If this is not possible in your scenario you should destroy it before creating the new Grid. Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Back to Top