Working with bound data on client side

[Bobby Davis]

Could you provide a sample of how to get the data item for a row?

[Iliana Dyankova]

Hi Bobby,

You could get the data item for a given row in Kendo UI Grid by using the dataItem() method. 

Regards,
Iliana Nikolova
the Telerik team

[Bobby Davis]

No, I can't because it's undefined. That's why I asked for a sample.

[Brian]

I'm searching this forum for the answer to a similar question. In my scenario I was trying to get it for a row which was selected in my grid.

If you're also looking to do that, add this change event implementation to your grid:
change: function (e) {
      var selectedRow = e.sender.selectable.value();
}

Then you can do whatever you want with that row. To use data item you can then do something like this:

$("#grid").data("kendoGrid").dataItem(selectedRow)

Hopefully that helps you get in the right direction!

[Iliana Dyankova]

Hi Bobby,

Here is a simple jsFiddle example which illustrates how to get the data item for a given row in Kendo UI Grid using the dataItem() method.  
    

Greetings,
Iliana Nikolova
the Telerik team

[Nuno]

I am also unable to get dataItem , here is my code:

Any Help here?

@model IEnumerable<MVC3.Areas.CRM.Models.EntityModel>

 

@{

    ViewBag.Title = "List of Entities";

}

 

<h2>List Of Entities</h2>

 

@(Html.Kendo().Grid(Model)

//    .Events(evt => evt.Change("selected"))

    .Name("Grid")

    .Columns(columns =>

    {

        columns.Bound(e => e.EntityID).Groupable(false).Hidden(true);

        columns.Bound(e => e.Name );

        columns.Bound(e => e.NIF);

        columns.Command(command => command.Custom("Select").Action("Select", "Entity").Text("Select")

        .DataRouteValues(values =>

               {

                   values.Add(e => e.Name);

                   values.Add(e => e.NIF);

               })

           ).Width(80);

         columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));

 

 

    })

 

        .Selectable(selectable => selectable

            .Enabled(true)

            .Mode(GridSelectionMode.Single)

            )

        .Pageable()

        .Sortable()

        .Scrollable()

        .Filterable()

        .DataSource(datasource => datasource

             

            .Server()

            .Model(model => model.Id(e => e.EntityID))

 

 

            ))

     

 

@(Html.Kendo().Window().Name("Details")

    .Title("Entity Details")

    .Visible(false)

    .Modal(true)

    .Draggable(true)

    .Width(300)

 

 

)

 

 

<script type="text/x-kendo-template" id="template">

    <div id="details-container">

        <h2>#= Name # #= NIF #</h2>

        <em>#= Entity #</em>

        <dl>

            <dt>ID: #= EntityID #</dt>

            <dt>IsCRM: #= IsOnlyCRM #</dt>

        </dl>

     </div>

</script>

 

 

@* Window with details using Template *@

<script type="text/javascript">

 

    var detailsTemplate = kendo.template($("#template").html());

 

    function showDetails(e) {

       e.preventDefault();

 

        var dataitem = this.dataItem($(e.currentTarget).closest("tr")); //Returns Undefined

         

        var wnd = $("#Details").data("kendoWindow");

 

        wnd.content(detailsTemplate(dataitem));

        wnd.center().open();

    }

</script>

[Raj]

Anyone find a way to do this yet?

[towpse]

I'm having the same frustration.
Seems that I can't create a data item in javascript from a grid row if my grid was created using the Kendo grid helper?

 I'm able to do it in a client side grid no problem.

But when I create the grid in cshtml file, I cannot create a data item from a row. 

var grid = $("#hardware-grid").data("kendoGrid");
var select = grid.select(0);
grid.dataItem(select);

var grid = $("#hardware-grid").data("kendoGrid");
var select = grid.select(0);
grid.dataItem(select);

var grid = $("#hardware-grid").data("kendoGrid");
var select = grid.select(0);
grid.dataItem(select);

var grid = $("#hardware-grid").data("kendoGrid");
var select = grid.select(0);
grid.dataItem(select);

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

var select = grid.select(0);

grid.dataItem(select);

TypeError: this._data is undefined  kendo.all.min.js (line 16)

[Jim]

FWIW - I am having the same problem 

[Iliana Dyankova]

Hello guys,

You can get the data through the dataItem() method only if you are using Ajax binding. When using server binding the data is not available and you need to locate the row and get the HTML content. For example: 

var grid = $("#rowSelection").data("kendoGrid");
grid.tbody.find(">tr:first").html();

Kind regards,
Iliana Nikolova
the Telerik team

[Carlos]

i have same problem; it's like a missing declaration library in the _layout...