How to add a checkBox (with select all in header) to the the dynamically generated grid

1 Answer 338 Views
Data Source Grid
Vaibhav
Top achievements
Rank 1
Iron
Vaibhav asked on 20 Sep 2021, 06:34 PM

Hi team, 

I was able to generate the model and columns and grid dynamically using the articles

Adding to this I want to add a column to the front of the grid with a checkbox against each row. 

I need to add a master checkbox in that column, which can select all of the rows if grid.

How do I achieve this? I tried, but I am not able to have the column visible.

Please help!.

 

Thanks

 

Vaibhav
Top achievements
Rank 1
Iron
commented on 22 Sep 2021, 03:18 PM

Could anyone from @Telerik answer this question?

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 23 Sep 2021, 12:14 PM

Hello, Vaibhav,

Here is a small example on how to add a checkbox to dynamic columns.

Let me know if you have any questions.

Regards,
Martin
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.

Vaibhav
Top achievements
Rank 1
Iron
commented on 23 Sep 2021, 02:06 PM

Hi Martin, 

Thanks for your help. 

How do I pass DataSourceRequest from when I try to create the grid dynamically?


 $.ajax({
        url: "https://www.mocky.io/v2/5835e736110000020e0c003c",
        dataType: "jsonp",
        success: function(result) {
          generateGrid(result);
        }
      });

Code snapshot is attached.

As at the time of the API call I will not have the grid initlized.

Neli
Telerik team
commented on 28 Sep 2021, 09:36 AM

Hi Vaibhav,

You could try to use the approach suggested by my colleague Martin when the ajax is completed

 $.ajax({
        url: "https://www.mocky.io/v2/5835e736110000020e0c003c",
        dataType: "jsonp",
        success: function(result) {
          generateGrid(result);
        },
        complete: function (data) {
          var grid = $("#grid").data("kendoGrid");
          var newitem = {
            selectable: true,
            width: 35
          };

          grid.columns.splice(0, 0, newitem);
          grid.setOptions({
            columns: grid.columns
          });
        }
      });

Here is the modified Dojo example.

Regards,

Neli

Tags
Data Source Grid
Asked by
Vaibhav
Top achievements
Rank 1
Iron
Answers by
Martin
Telerik team
Share this question
or