Find A Row in the Grid by Unique ID or Selected

12 posts, 0 answers
  1. Eric J at FADV
    Eric J at FADV avatar
    17 posts
    Member since:
    Oct 2012

    Posted 31 Oct 2012 Link to this post

    I have seen this code in the documentation on getting the dataItem for a row, in this case the first row:

    // get a reference to the grid widget
    var grid = $("#grid").data("kendoGrid");
    // returns the data item for first row
    grid.dataItem(grid.tbody.find(">tr:first"));

    Three other related questions:

    1. How do I find a dataItem by the selectedRow?
    2. How would I find a certain row by a unique identifier in given cell?
    3. Is it possible to find a row by the dataItem's unique Id, say one set by the dataSource.Model.Id, e.g.:
    .DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .Model(model => model.Id(u => u.Unique_ID))
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Nov 2012 Link to this post

    Hello Eric,

    Regarding your questions:
    1. I suggest to hook up to the change event of the grid and use the dataItem method to retrieve the selected dataSource model. Here is an example:

      //grid configuration
      .Events(e => e.Change("onChange"))
       
      //script
      function onChange(e) {
          var grid = this;
          var model = grid.dataItem(grid.select());
      }


    2. Each table row element has a data-uid attribute which contains the uid value of the dataSource records. You can find the row by its uid via the jQuery find method.

      $("#Grid")
          .data("kendoGrid")
          .tbody
          .find("tr[data-uid='079bd544-28fc-436e-b8f7-7b4ad8634494']")

      I am not sure what do you mean by "a unique identifier in given cell" because by default the cells does not have a unique identifiers. It is possible to use the jQuery's closest method to find the nearest <tr> for the selected cell.

    3. The approach is similar to the one from #2. Here is an example:

      //get the table row for records with model.id = 2
      var dataItem = $("#Grid").data("kendoGrid").dataSource.get(2);
      var row = $("#Grid").data("kendoGrid")
                    .tbody
                    .find("tr[data-uid='" + dataItem.uid + "']");

    I hope this information will help.

    Regards,
    Alexander Valchev
    the Telerik team
    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 MVC is VS 2017 Ready
  4. AspenSquare
    AspenSquare avatar
    60 posts
    Member since:
    Jan 2012

    Posted 14 Nov 2012 Link to this post

    This is the way I ended up getting the 'ID' of my row.

    I ended up hiding the first column of my grid, which contained the ID.

    If there is an easier way to do this I would like to know.
    <script type="text/javascript">
        function deleteIt(e) {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var propId = $("#Grid").data("kendoGrid").tbody.find("tr[data-uid='" + dataItem.uid + "'] td:eq(0)").text();
            PropertyPage.DeleteProperty(propId);
        }
    </script>
            

    @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Width(25).Hidden();
            columns.Bound(p => p.Name).Width(240);
            columns.Bound(p => p.City).Width(170);
            columns.Bound(p => p.State).Width(170);
            columns.Command(command =>
            {
                command.Edit();
                command.Custom("Delete").Click("deleteIt");
             }).Width(166);
        })
        .Scrollable()
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.Id))
            //.Read("PropertyRead", "Property"))
            .Read(read => read.Action("PropertyRead", "Property"))
            .Update(update => update.Action("Update", "Property").Type(HttpVerbs.Put))
            //.Destroy(destroy => destroy.Action("Delete", "Property").Type(HttpVerbs.Delete))
    ))
  5. Eric J at FADV
    Eric J at FADV avatar
    17 posts
    Member since:
    Oct 2012

    Posted 15 Nov 2012 Link to this post

    Fairly close  to what I am doing

    I ended up  following Alexander's 3rd example, since I had the record identifier on hand, i.e:

    var dataItem = $("#GridName").data("kendoGrid").dataSource.get(id);
    Might or might not require setting your dataSource ID in the grid declaration, but it doesnt hurt:

    .DataSource(dataSource => dataSource.Ajax()
    .Batch(
    true)
    .Model(model => model.Id(u => u.ID))
    .Events(events => events.Error(
    "error_handler"))
    .Read(read => read.Action(
    "action", "controller").Data("params to pass"))
    .Update(update => update.Action(
    "action", "controller").Data("params to pass"))
    ))

    and the ID is always available from the model in the event item, i.e:

    var uniqueId =  e.model.ID

    Now in your example is the model available in the e param of the delete event? The dataItem and model seem equivalent.
  6. jose
    jose avatar
    8 posts
    Member since:
    Apr 2012

    Posted 24 Dec 2012 Link to this post

    Assuming a model like this: 
    .Model(model => 
                { 
                    model.Id(p => p.Id);
             
                  
                })

     var grid = $("#Grid").data("kendoGrid");

            grid.bind("change", function (e) {
                alert("Change ");
                grid = e.sender;
                var currentDataItem = grid.dataItem(this.select());
                alert(currentDataItem.Id); 

            });
  7. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 14 Jan 2014 Link to this post

    Alexander's example 3 looks exactly like what I need however on the dataBound event of the grid when I run the code the first line works perfectly, but I never get any results on the second line. 

    Even if I change the statement to something simple like: 
    var row = $("#Grid").data("kendoGrid")
                  .tbody
                  .find("tr[data-uid]");
    (In the hope of finding any row with the data-uid attribute set), nothing gets returned. Ever. 

    Is this still a valid option or have later releases discontinued the use of the data-uid on the rows? 
    Or perhaps there's something in my configuration preventing the data-uid's from being added? 

    Regards,
    Jacques
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 15 Jan 2014 Link to this post

    Hi J.Hoventer,

    The implementation in later releases did not changed, the Grid still adds data-uid attribute to the table rows.
    Do you have a row template in your configuration? This might prevent the Grid from automatically adding the data-uid. In case row template is defined, the developer is responsible for manually adding the attribute in the template.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 15 Jan 2014 Link to this post

    Hi Alexander, 

    Yes it does indeed have a row template and I've manually added the data-ui attribute. This solved my problem.

    Thanks,
    Jacques
  10. Srinivas
    Srinivas avatar
    2 posts
    Member since:
    Jun 2015

    Posted 12 Oct 2015 Link to this post

    Hi Alexander, 

    I am implementing a similar functionality. I do not have a row template in my configuration. It doesn't retrieve the desired uid. It always picks the uid of the first row even though i click on the delete button in the second row. Is there a solution for this? 

    Thanks,

    Srinivas

  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 15 Oct 2015 Link to this post

    Hi Srinivas,

    Can you prepare a small Kendo Dojo test page which demonstrates your current implementation so I can check it?

    Regards,
    Alexander Valchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Ezequiel
    Ezequiel avatar
    36 posts
    Member since:
    Oct 2011

    Posted 30 Oct 2015 in reply to Alexander Valchev Link to this post

    Alexander,

    I have a detail grid which its name is variable:

    "GridDetail_#=​ParentId#"​

    I have this event set:

    .Events(events =>
    {
          events.Change("change");
    })

     in this function, how can I get current grid name?

    $("tr[data-uid='" + e.items[0].uid + "']")
    I've got current row, I was also able to find parent row:

    $("tr[data-uid='"+e.items[0].uid+"']").closest("tr.k-detail-row").prev(".k-master-row").closest("[data-role=grid]").data().kendoGrid.dataItem($("tr[data-uid='"+e.items[0].uid+"']").closest("tr.k-detail-row").prev(".k-master-row"))

    but I need current grid name to do some other stuff.

     Thanks,

    Ezequiel

     

     

     

     

     

     

     

     

     

     

     

  13. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 04 Nov 2015 Link to this post

    Hi Ezequiel,

    It is unclear whether you use the change event of the Grid widget or the change event of its DataSource.
    Please clarify.

    Regards,
    Alexander Valchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready