Toggled Selection, jQuery Error when getting selected items

[Adam]

So, I started off with my grid being selectable like so:

(Html.Kendo().Grid(Model.TPOrderDetails)
       .Name("Grid")
       //.HtmlAttributes(new { style = "height: 750px; width: 1000px; "})

       .ToolBar(toolBar => toolBar.Template(

           @<text>
               <label>Plant Personnel:</label>
               @Html.DropDownList("PersonnelID", (SelectList)ViewData["PersonnelList"])

               @item.CustomCommandToolBarButton("assignWork", "Assign", "AssignOrders", "Production", null, new { id = "assignButton", @class="btn-success" })
               @item.CustomCommandToolBarButton("unassignWork", "Clear Assignment", "UnassignOrders", "Production", null, new { id = "unassignButton", @class = "btn-error"})
               @item.CustomCommandToolBarButton("clearSelections", "Clear Selections", "ClearSelections", "Production", null, new { id = "clearSelections", @class="btn-warning"})
               @item.CustomCommandToolBarButton("refreshGrid", "Refresh", "RefreshGrid", "Production", null, new { id = "refreshGrid", @class = "btn-success"})

           </text>
           )

       )


       .Columns(columns =>
           {
               columns.Bound(p => p.RequestedShipDate).Format("{0:d}").Hidden(true);
               columns.Bound(p => p.ContainerSize);
               columns.Bound(p => p.SystemNumber);
               columns.Bound(p => p.CustomerName);
               columns.Bound(p => p.Order_ID).Groupable(false).Visible(false);

               columns.Bound(p => p.CreditApproval)
                   .Template(@<text>
                           @Html.CheckBox("test", false);
                       </text>)

                   .ClientTemplate("<input type='checkbox' #= CreditApproval ? checked='checked':'' # class='input-checkbox' disabled='disabled' />")
                   .Title("Approved");



               columns.Bound(p => p.AssignedPersonnel).Title("Assigned");

           })
       .Groupable()

           .Pageable(pager =>
               pager.Refresh(true))
           .Sortable()
           .Filterable()
           .Selectable(selectable => {
               selectable.Mode(GridSelectionMode.Multiple);
           })
           .DataSource(dataSource => dataSource
                   .Ajax()
                   .PageSize(100)

                   .Read(read => read.Action("Orders_Read", "Production"))


                   .Sort(sort =>
                   {
                       sort.Add("ContainerSize");
                       sort.Add("SystemNumber");
                   })
                   .Group(group =>
                   {
                       group.Add("RequestedShipDate", typeof(DateTime?));
                   })
           )

This lets me select items and then my custom toolbar buttons work fine when they send the selected rows off to the ajax handlers.  But, I want to be able to toggle them and not use the default behavior, which deselects other rows when you select an individual row.  

After hunting around for a while on the forums and through the support docs, it seems you can't do this through Selectable and have to turn that off to use some other jquery to handle the selection.    This is easy enough to accomplish, so I do it this way:

$("#Grid").delegate('tbody >tr', 'click', function () {
     $(this).toggleClass('k-state-selected');
});

This also works fine.  Until I start trying to handle my CustomToolbarButtons via javascript.  These are my javascript functions, which work(ed) when Selectable was configured in the razor syntax, but do not work with the javascript selection:

function assignProductionWork()
    {
        var selection = getGridSelectedItems('#Grid');
        var personnelID = $('#PersonnelID').val();

        $.ajax({
            type: "POST",
            url: "/Production/AssignOrders",
            data: JSON.stringify({ personnelID: personnelID, items: selection }),
            dataType: "html",
            contentType: "application/json; charset=utf-8",
            success: function (data) {

                refreshGrid();
            },
            error: function () {
                alert('Unable to assign production!');
            }

        });
    }

    function unassignProductionWork()
    {
        var selection = getGridSelectedItems('#Grid');

        $.ajax({
            type: "POST",
            url: "Production/UnassignOrders",
            data: JSON.stringify({ items: selection }),
            dataType: "html",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                refreshGrid();
            },
            error: function() {
                alert('Unable to clear work assignments.');
            }
        });
    }

    function getGridSelectedItems(gridid)
    {
        var grid = $(gridid).data("kendoGrid");
        var selection = [];

        grid.select().each(
            function () {
                var dataItem = grid.dataItem($(this));
                selection.push(dataItem);
            }
        );

        return selection;
    }

When these run now, I get: Uncaught TypeError: Cannot call method 'value' of undefined , which is being through by the "var dataItem = grid.dataItem($(this));" line.  

If I flip back to selectable, it works just fine - does anyone have any thoughts?  I've been banging my head against this for quite awhile now...

[Dimiter Madjarov]

Hello Adam,


The select method of the Grid won't work if the selectable option of the Grid is disabled. If you would like to disable it and retrieve the selected rows, I would suggest you to use pure jQuery and retrieve them via the k-state-selected class.

 

Regards,
Dimiter Madjarov
Telerik

[Adam]

Yep, that is definitely the case.  Here's my amended code:

function getGridSelectedItems(gridid)
{
    var grid = $(gridid).data("kendoGrid");
    var selectedItems = $('.k-state-selected');
    var selection = [];

    selectedItems.each(
        function () {
            var dataItem = grid.dataItem($(this).closest('tr'));
            if (dataItem != null)
                selection.push(dataItem);
        }
    );

    /*
    grid.select().each(
        function () {
            var dataItem = grid.dataItem($(this));
            selection.push(dataItem);
        }
    );
    */

    return selection;
}

Thanks!