Select KendoGrid cell via JavaScript

3 posts, 0 answers
  1. Erik
    Erik avatar
    2 posts
    Member since:
    Apr 2011

    Posted 14 Dec 2017 Link to this post

    Scenario:

    I have a Grid, and a column with text, with inline editing and OnChange event.

    User Clicks a cell and the OnChange event it fired

    Once clicked, a modal window is opened (Standard Bootstrap)

    Question:

    How do I update that Cell again from the Modal. How do I pass the ID or context of the Cell down the stack to the Modal Window?

    I have seen there is a TR data-uid, but I'm not sure how to get it in the click event or how to select it with the api down the road in the modal.

  2. Erik
    Erik avatar
    2 posts
    Member since:
    Apr 2011

    Posted 15 Dec 2017 in reply to Erik Link to this post

    Here is a same of my solution. I think this will work.

    // Get the Row and Cell information from the Grid.
    var grid = $("#31PlusGrid").data("kendoGrid");
    var row = this.select().closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var colIdx = this.select().index();
    console.log(rowIdx + '-' + colIdx);
     
    //In another code block, this can be cleaned up a little, but the point is doing this at different times. Get the right row by index, then set the field you want to update.
    var row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(rowIdx);
    console.dir(row);
    console.dir(grid.dataItem(row));
    grid.dataItem(row).set("Comments", $('#textboxThing').val());

     

    Thanks!

  3. Stefan
    Admin
    Stefan avatar
    1786 posts

    Posted 18 Dec 2017 Link to this post

    Hello, Erik,

    Thank you for sharing the approach with the community.

    We can also suggest the following one:

    //Outside of the function declare the editedDataItem variable
    change: function(e) {
          editedDataItem = this.dataItem(this.select());
          //Open the modal and pass the dataItem
     }
     
    //Then when closing the Window use the same dataItem and set its new values

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top