Checkbox

2 Answers 44 Views
Checkbox Grid
Anonim
Top achievements
Rank 1
Iron
Anonim asked on 09 Dec 2021, 02:05 PM

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")))

 


2 Answers, 1 is accepted

Sort by
0
Anonim
Top achievements
Rank 1
Iron
answered on 13 Dec 2021, 09:43 AM

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
Telerik team
commented on 13 Dec 2021, 12:31 PM

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
Top achievements
Rank 1
Iron
commented on 13 Dec 2021, 01:21 PM

Ok thanks a lot, it's work.
Anonim
Top achievements
Rank 1
Iron
commented on 13 Dec 2021, 01:33 PM

The last question is whether it is possible to select all lines if I have, for example, twenty pages?
Petar
Telerik team
commented on 15 Dec 2021, 12:20 PM

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
Top achievements
Rank 1
Iron
commented on 17 Dec 2021, 11:52 AM

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
Telerik team
commented on 22 Dec 2021, 11:43 AM

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.

-1
Petar
Telerik team
answered on 10 Dec 2021, 08:11 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Anonim
Top achievements
Rank 1
Iron
commented on 10 Dec 2021, 08:49 AM

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
Telerik team
commented on 10 Dec 2021, 09:50 AM

Hi Anonim,

Which product version do you use?

Anonim
Top achievements
Rank 1
Iron
commented on 10 Dec 2021, 09:56 AM

2017.1.118
Anonim
Top achievements
Rank 1
Iron
commented on 10 Dec 2021, 01:27 PM

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
Telerik team
commented on 13 Dec 2021, 07:29 AM

Hi Anonim, 

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

Anonim
Top achievements
Rank 1
Iron
commented on 13 Dec 2021, 08:50 AM

The selection is remembered, but the color of the row is not and for the user this row is not selected
Tags
Checkbox Grid
Asked by
Anonim
Top achievements
Rank 1
Iron
Answers by
Anonim
Top achievements
Rank 1
Iron
Petar
Telerik team
Share this question
or