Telerik Forums / UI for ASP.NET MVC

Find A Row in the Grid by Unique ID or Selected

4 Answers 17869 Views
Grid
Eric J at FADV
Top achievements
Rank 1
Eric J at FADV asked on 31 Oct 2012, 08:07 PM
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))

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 05 Nov 2012, 07:59 AM
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!
Jacques
Top achievements
Rank 2
commented on 15 Jan 2014, 05:20 AM

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
Telerik team
commented on 15 Jan 2014, 08:11 AM

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!
Jacques
Top achievements
Rank 2
commented on 15 Jan 2014, 08:29 AM

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
Top achievements
Rank 1
commented on 12 Oct 2015, 06:14 PM

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
Telerik team
commented on 15 Oct 2015, 12:35 PM

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
Ezequiel
Top achievements
Rank 2
commented on 30 Oct 2015, 07:27 PM

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
Telerik team
commented on 04 Nov 2015, 03:25 PM

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
0
AspenSquare
Top achievements
Rank 1
answered on 14 Nov 2012, 06:22 PM
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
Top achievements
Rank 1
commented on 16 Nov 2012, 01:52 AM

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.
0
jose
Top achievements
Rank 1
answered on 24 Dec 2012, 11:47 PM
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); 

        });
0
Samra
Top achievements
Rank 1
answered on 06 Jul 2017, 01:54 AM

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

Tags
Grid
Asked by
Eric J at FADV
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
AspenSquare
Top achievements
Rank 1
jose
Top achievements
Rank 1
Samra
Top achievements
Rank 1
Share this question
or