This is a migrated thread and some comments may be shown as answers.

grid.select() throws error in Kendo UI v2013.2.814

2 Answers 313 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jark Monster
Top achievements
Rank 1
Jark Monster asked on 15 Aug 2013, 03:53 PM
I have a grid that I can select a row on and then click a button on the grid to move that row's data item to a different grid.

This code has been working fine for months, but broke after the last official release.  I upgraded to the most up to date internal release today (2013.2.814), but still no luck.

Basically, anytime I run code like this:

var grid = $("#ItemBook").data("kendoGrid");
console.log(grid.select()); //Errors
I get a strange error in Firebug and no code after the select line executes.  The error looks a bit like this:
TypeError: r is undefined
...table)),t.css(kt?"padding-left":"padding-right",l.virtual?c+1:c),n=e('<tabl
However, searching for the row by the selected class DOES work.  E.g.:
console.log($("#SavedQuoteBook tr.k-state-selected"));  //Gives tr element
console.log(grid.dataItem($("#SavedQuoteBook tr.k-state-selected")));  //Give dataItem

I don't think it should matter, but the grid as well as the script executing the code above are inside a partial view that's loaded into a Menu Widget.

Here's the code for the views:

Menu Widget Declaration:
@(Html.Kendo().Menu()
                .Name("ItemMenu")
                .OpenOnClick(true)
                .CloseOnClick(false)
                .Items(items =>
                {
                    items.Add()
                        .Text("Items")
                        .Content(Html.Partial("ItemBook", Model.Items).ToHtmlString());
                })
                .Events(events =>
                {
                    events.Open("ItemMenuOpen");
                })
            )

Partial View (Grid + Script):
<script type="text/javascript">
    function ConfigureItemBook() {
   
        //Drives multi-selection of grid rows (Overrides native functionality)
        $("#ItemBook").delegate('tbody tr', 'click', function () {
            $(this).toggleClass('k-state-selected');
        });
 
        //Drive single selection by double click
        $("#ItemBook").delegate('tbody tr', 'dblclick', function () {
            $(this).addClass('k-state-selected');
            PopulateItem();
        });
    }
 
    function PopulateItem() {
        var grid = $("#ItemBook").data("kendoGrid");
 
        console.log("Manual Search");
        console.log($("#ItemBook tr.k-state-selected"));  //This works
        console.log("Manual Search + Get DataItem");
        console.log(grid.dataItem($("#ItemBook tr.k-state-selected")));  //This works
        console.log("Kendo Grid Select");
        console.log(grid.select());  //ERROR
        console.log("Kendo Grid Select + GetDataItem");
        console.log(grid.dataItem(grid.select()));  //ERROR
    }
</script>
 
@(Html.Kendo().Grid(Model)
    .Name("ItemBook")
    .TableHtmlAttributes(new { @style = "cursor:pointer;" })
    .Columns(columns =>
    {
        columns.Bound(i => i.DateCreated).Width(90);
        //Other columns omitted for brevity
    })
    .ToolBar(toolbar =>
    {
        toolbar.Custom().Text("Select").Url("#_").HtmlAttributes(new { onclick = "PopulateItem()" });
    })
    .Events(events =>
    {
        events.DataBound("ConfigureItemBook");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(i => i.ID);
        })
    )
)


2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Popov
Telerik team
answered on 19 Aug 2013, 10:31 AM
Hi Mark, 

After reviewing the provided code I noticed that the Grid's Selectable option is not defined - please note that when the Selectable option is set to false (by default) the select method cannot be used. In current scenario I would suggest either to enable the Selectable option or to use jQuery to get the selected rows:

  • Enable the Grid selection:
    .Selectable()
  • Get selected rows using jQuery:  
    var grid = $("#grid").data("kendoGrid");
    var selectedRows = grid.tbody.find(".k-state-selected");
  •       
Kind Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jark Monster
Top achievements
Rank 1
answered on 19 Aug 2013, 01:12 PM
that does make sense.  I have been overriding the native select functionality so I can support double click selection as well as single row toggling.

I suppose I've just been lucky up until now.  I'll grab the selected rows by the 'k-state-selected' class from now on when I'm overriding the selectable() functionality.

Thanks!
Tags
Grid
Asked by
Jark Monster
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Jark Monster
Top achievements
Rank 1
Share this question
or