Toggled Selection, jQuery Error when getting selected items

3 posts, 0 answers
  1. Adam
    Adam avatar
    1 posts
    Member since:
    May 2013

    Posted 23 Oct 2013 Link to this post

    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...
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2272 posts

    Posted 24 Oct 2013 Link to this post

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

    Posted 28 Oct 2013 Link to this post

    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!
Back to Top