Working with bound data on client side

10 posts, 0 answers
  1. Bobby Davis
    Bobby Davis avatar
    5 posts
    Member since:
    Dec 2003

    Posted 04 Jun 2012 Link to this post

    Could you provide a sample of how to get the data item for a row?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 05 Jun 2012 Link to this post

    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
    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. Bobby Davis
    Bobby Davis avatar
    5 posts
    Member since:
    Dec 2003

    Posted 05 Jun 2012 Link to this post

    No, I can't because it's undefined. That's why I asked for a sample.
  5. Brian
    Brian avatar
    8 posts
    Member since:
    Apr 2012

    Posted 07 Jun 2012 Link to this post

    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!
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 08 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Nuno
    Nuno avatar
    12 posts
    Member since:
    May 2008

    Posted 16 Jul 2012 Link to this post

    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>

  8. Raj
    Raj avatar
    1 posts
    Member since:
    Aug 2012

    Posted 17 Jan 2013 Link to this post

    Anyone find a way to do this yet?
  9. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 23 Jan 2013 Link to this post

    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);
  10. Jim
    Jim avatar
    19 posts
    Member since:
    Feb 2008

    Posted 28 Jan 2013 Link to this post

    FWIW - I am having the same problem 
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 29 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready