Find A Row in the Grid by Unique ID or Selected

[Eric J at FADV]

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))

[Alexander Valchev]

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

[Jacques]

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

[Alexander Valchev]

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

[Jacques]

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

[Srinivas]

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

[Alexander Valchev]

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

[Ezequiel]

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

 

 

 

 

 

 

 

 

 

 

 

[Alexander Valchev]

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

[AspenSquare]

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))

))

[Eric J at FADV]

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.

[jose]

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); 

        });

[Samra]

So that it may benefit someone..i wanted to get a particular cell by rowid and colid and set its font as red..(rowid and colid are unique keys set in data tables)

var editedInvalidRow = grid.dataSource.get(studentId);
                    var pos = GetColumnIndexFromName(colId);
                    var row = grid.tbody.find("tr[data-uid='" + editedInvalidRow.uid + "']");

                    row.find("td:eq(" + pos + ")")[0].style.color = "red";

 

function GetColumnIndexFromName(strName) {
        
        var index = -1;
        var grid = $("#mapsDiv").data("kendoGrid");
        var columns = grid.options.columns;
        if (columns.length > 0) {
            for (var i = 0; i < columns.length; i++) {
                if (columns[i].field == strName) { // columns[i].title -- You can also use title property here but for this you have to assign title for all columns
                    index = i;
                }
            }
        }

        if (index == -1) {
            alert("column name not exists");
        }
        else {
            return index;
        }
    }

ref: https://stackoverflow.com/questions/34345363/get-column-index-from-column-name-in-kendo-grid-in-javascript