Need Help regarding Kendo Detailed Editable grid

2 posts, 0 answers
  1. Nagaraju
    Nagaraju avatar
    5 posts
    Member since:
    Apr 2016

    Posted 11 May Link to this post

      I am working on Detailed editable grid in which,
      Parent Grid shows the summary data and the child grid shows the detailed rows.
      At the starting, I am using some filters in which whenever "submit" button clicked, then the parent grid is loaded.
      and I am implementing the "detailExpand" to read the data from the servlet with the parameters from the parent grid.
      I have 2 Issues:
      Issue 1:
          Whenever "Submit" button is clicked, The parent grid is showing all the rows for a while, and then showing the actual filtered rows.
         And I see "SubmitController" is called twice. One without any parameters and the other with the selected "CostCenter,Team,Location" fields.

         And I am getting the same behaviour whenever I expand the parent row.

      Issue 2:
       whenever Edit/"Create New" is clicked in child grid, I need to populate the Child grid column "employeeID" with the same field from parent and want to make it as non-editable.

      I am attaching the jsp file and the ServletController.

    Can you please help. 

  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    1728 posts

    Posted 13 May Link to this post

    Hello Nagaraju,

    Straight to your questions: 

       1. By default the Kendo UI Grid reads its data (makes a request to its read url) when the widget is initialized. This behavior is controlled by the autoBind property, which by default is set to true. So basically in your case the grids reads its data (default behavior) and immidiately after that a second request is made to filter. My suggestion is simply to set the autoBind property to false in order to avoid the initial request to load its entire data. 

      2. It is possible to access the master row (of parent grid) in the edit event of the child grid. This way one of the fields of the data item (child grid) can be set to a value extracted from the master row data item. Please refer to the for a live demonstration of this approach. 

    edit: function(e) {
        var parentRow = this.wrapper.closest("tr").prev();
         var masterRow = $("#grid").data().kendoGrid.dataItem(parentRow); 
            //just for testing purpose the field "ShipCountry" of the child data item is           //set to the EmployeeID of the master data item
         e.model.set("ShipCountry", masterRow.EmployeeID);


    Boyan Dimitrov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
Back to Top