Checkbox

[Anonim]

I want to add checbox to my grid. I tried to use the Select() method but the method shows an error No overload for method Select takes 0 arguments.  I need to pass to controller a collection of id elements that the user has selected.

    @(Html.Kendo()
             .Grid<Model>()
             .Name(gridId)
             .Columns(col =>
             {
                 col.Select();
                 col.Bound(fds => fds.Id);
                 col.Bound(fds => fds.CreateDateTime).ClientTemplateDateTime();
                 col.Bound(fds => fds.IdClient);
             })
             .Pageable()
             .Sortable()
             .DefaultPageable()
             .Resizable(c => c.Columns(true))
             .AllowCopy(true)
             .DataSource(d =>
                  d.Ajax()
                        .Model(m => m.Id(vm => vm.Id))
                        .Read("GetAnalysis", "Export")))

 

[Anonim]

Now my code look like this:

<div class="inn">
    @(Html.FilterSectionFor<PFItemFilterViewModel, PFItemFilter>(vm => vm.Filter, gridId)
          .Portlet(Lang.Filters)
          .Layout(l => l.Horizontal().LayoutClass("form-horizontal clearfix"))
          .LabelEditorValidatorFor(m => m.Filter.Id)
          .LabelEditorValidatorFor(m => m.Filter.ExternalId)
          .LabelEditorValidatorFor(m => m.Filter.CreateDateTimeFrom)
          .LabelEditorValidatorFor(m => m.Filter.CreateDateTimeTo)
          )

    @Html.ButtonGroup().ToLeft(
       @Html.Kendo().DefaultButton("exportToExcel", Lang.Export_to_excel).OnClickNavigateTo(@Url.Action("Export", "MassExport"))
      )

    @(Html.Kendo()
             .Grid<PFItemFilterViewModel>()
             .Name(gridId)
             .Columns(col =>
             { 
                 col.Bound(fds => fds.Id);
                 col.Bound(fds => fds.CreateDateTime).ClientTemplateDateTime();
                 col.Bound(fds => fds.UserId);
             })
             .Pageable()
             .Sortable()
             .Selectable(s => s.Mode(GridSelectionMode.Multiple))
             .Events(events => events.Change("change"))
             .DefaultPageable()
             .Resizable(c => c.Columns(true))
             .AllowCopy(true)
             .DataSource(d =>
                  d.Ajax()
                        .Model(m => m.Id(vm => vm.Id))
                        .Read("GetAnalysis", "MassExport")))
    <script>
        var selectedOrders = [];       
        function change(e, args) {
            debugger;
            var grid = e.sender;
            var items = grid.items();
            items.each(function (idx, row) {
                var idValue = grid.dataItem(row).Id;
                if (row.className.indexOf("k-state-selected") >= 0) {
                    debugger;
                    selectedOrders[idValue] = true;

                    $('tr[data-uid="' + grid.dataItem(row).uid + '"] ').css("background-color", "green");
                } else if (selectedOrders[idValue]) {
                    debugger;
                    delete selectedOrders[idValue];
                    $('tr[data-uid="' + grid.dataItem(row).uid + '"] ').css("background-color", "transparent");
                }

            });
        }
    </script>


</div>

 

But still, if I go to the next page, the colors on the first one disappear.

                               

[Petar]

Hi,

I can see that your implementation is missing the dataBound event definition which in the Knowledge base article I sent you is defined as follows:

          dataBound: function (e) {
            var grid = e.sender;
            var items = grid.items();
            var itemsToSelect = [];
            items.each(function (idx, row) {
              var dataItem = grid.dataItem(row);
              if (selectedOrders[dataItem[idField]]) {
                itemsToSelect.push(row);
              }
            });

            e.sender.select(itemsToSelect);
          }

Add the above definition to your project and let me know if this resolves the issue. If it doesn't, can you send me a runnable example in which the reported issue can be replicated?

[Anonim]

Ok thanks a lot, it's work.

[Anonim]

The last question is whether it is possible to select all lines if I have, for example, twenty pages?

[Petar]

Hi Anonim,

Here is a Dojo example demonstrating how you can select all rows in the Grid. The function that does the selection is this one:

      function selectAll(){
        var grid = $("#grid").data("kendoGrid");
        const items = grid.dataSource.data();

        $(items).each(function (idx, row) {
          var idValue = row.OrderID;
          selectedOrders[idValue] = true;
        })

        grid.refresh();
      }

I hope the provided example will help you achieve what you need in your application. 

[Anonim]

My table is divided into twenty records and has several pages and how to pass all rows from a table? Because now code below:

var grid = $("#pf-grid").data("kendoGrid"); -> it pass data from one side, i.e. twenty records, not for example one hundred.

[Petar]

Hi Anonim,

Try to define the DataSource in your project as follows:

.DataSource(d =>d
     .Ajax()
     .Model(m => m.Id(vm => vm.Id))
     .Read("GetAnalysis", "MassExport"))
     .ServerOperation(false)
)

Let me know if the suggested approach resolves the issue on your end.

[Petar]

Hello Anonim,

Here is a StackOverflow discussion about the error that you've shared. Check the link and what is shared inside it. Most probably you are using an older version of the Grid component that doesn't have the implementation of the Select() column configuration. 

The above link also provides a possible solution you can use.

Regards,
Petar
Progress Telerik

[Anonim]

This solution only adds a checkbox in the header, it is not like the select method. Additionally, there are no options in the older version persist selection.

[Petar]

Hi Anonim,

Which product version do you use?

[Anonim]

2017.1.118

[Anonim]

I can't upgrade version but I wish I could use a method persist selection. I have checkbox columns but when I go to the next page, the checkboxes marked earlier are unchecked.

[Petar]

Hi Anonim, 

The approach you can use for your product version is demonstrated in this Knowledge base article.

[Anonim]

The selection is remembered, but the color of the row is not and for the user this row is not selected