This is a migrated thread and some comments may be shown as answers.

How to declare the "selectable" column dynamically?

9 Answers 317 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nikolay
Top achievements
Rank 2
Nikolay asked on 03 Apr 2019, 07:46 PM

Hi there

Could you give me a clue on how to include the row select check box to the grid?
The example from Telerik Web site:

columns: [ { selectable: true, width: "50px" },
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}"},
{ field: "UnitsInStock", title:"Units In Stock"},
{ field: "Discontinued"}]  

is the static one but I need a hint on how to declare "selectable" in javascript dynamically. This is how I populate it:

for (i = 0; i < kendoData.columns.length; i++)
                    {
                        var column = kendoData.columns[i];
                        var ccolumn = data.ColumnDefinitions.filter(function (x) { return x.field == column.field; })
                        if ((ccolumn.length == 0) || (!ccolumn[0].visible))
                        {
                            kendoData.hideColumn(i);
                            continue;
                        }
                                               
                        if (ccolumn[0].width > 0) kendoData.resizeColumn(column, ccolumn[0].width+24);
                        $("#grid th[data-field=" + column.field+"] .k-link").html(ccolumn[0].title);
                    } 
The column variable does not expose a selectable. How can I do column.selectable=true? Maybe hook to any cell event?
Thanks. 

9 Answers, 1 is accepted

Sort by
0
Nikolay
Top achievements
Rank 2
answered on 04 Apr 2019, 05:33 PM

Hey guys

One of the solutions I had tried is as following:

var kendoData = grid.data("kendoGrid");
var datasource = kendoData.dataSource;

var newitem = {};
newitem = {
                        selectable: true,
                        width: 35
                    };

//Insert it to the very top of the column list
 kendoData.columns.splice(0, 0, newitem);
 kendoData.refresh();

 

Nevertheless, it does not show me the "checkbox" column.

How the heck it can be done? Any clue?

Thanks.

 

0
Georgi
Telerik team
answered on 05 Apr 2019, 08:49 AM
Hi Nikolay,

The columns are generated during the initialization of the grid. Therefore a possible solution would be to use the setOptions method as it internally calls the init function of the widget.

e.g.

var kendoData = grid.data("kendoGrid");
var datasource = kendoData.dataSource;
 
var newitem = {};
newitem = {
selectable: true,
width: 35
};
 
//Insert it to the very top of the column list
 kendoData.columns.splice(0, 0, newitem);
 
grid.setOptions({
columns: kendoData.columns
});

Below you will find a small sample which demonstrates the above approach:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nikolay
Top achievements
Rank 2
answered on 05 Apr 2019, 01:05 PM
Hey Georgi

Having your code a bit corrected to

var newitem = {};
                    newitem = {
                        selectable: true,
                        width: 35
                    };
                    kendoData.columns.splice(0, 0, newitem);
                    kendoData.setOptions({
                        columns: kendoData.columns
                    });

it is working. It shows the check boxes!

Nevertheless, its "select all" check box works weirdly. I hope the attached image would say more.

Please let me know your thoughts on it.

Thanks.

0
Georgi
Telerik team
answered on 09 Apr 2019, 07:06 AM
Hello Nikolay,

I have tested the check all checkbox in the sample from my previous post but it seems to be working as expected.

Are you able to replicate it in that sample? Could you please let me know what are the differences in the configuration of the grid in your project?


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nikolay
Top achievements
Rank 2
answered on 11 Apr 2019, 12:42 PM

Hi Georgi

I will try to isolate all the code related to the problem. So far the project is huge and inextricably linked to the WCF back side so it is not worthy for sending to you.

I will let you know when it is ready.

Thanks.

 

 

0
Georgi
Telerik team
answered on 12 Apr 2019, 07:41 AM
Hi Nikolay,

Take your time to assemble a sample. Once you are ready, send it to me and I will further investigate the case.


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nikolay
Top achievements
Rank 2
answered on 15 Apr 2019, 06:11 PM

Hi Georgi

Please find the project here:

https://www.dropbox.com/s/rzzw366t3c7fjb2/SSCWebKendoExample.zip?dl=0

When run, use Login 1, Password 1. In the right top corner you will see the Employee Panel icon. When hit, it shows you a Kendoo grid of 3 employees. When hit "select all", it selects only 1 item.

The main view is _EmployeeGrid.cshtml, the main controller is EmployeePanelController.

Thanks.

0
Accepted
Konstantin Dikov
Telerik team
answered on 17 Apr 2019, 01:51 PM
Hi Nikolay,

The issue that you are facing with the "Select all" is due to the fact that the select mode of the Grid is set to "row", which is a single selection mode. In order to enable the multiple selection you should use "multiple row" mode instead:
selectable: "multiple row",

Please note that the checkbox selection allows multiple rows selection by default, but the the "selectable" option, which is not related with the checkbox selection, has multiple modes:
Do not hesitate to contact us again if any further questions arise.


Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nikolay
Top achievements
Rank 2
answered on 17 Apr 2019, 03:09 PM

Konstantin

I removed the "selectable: "row"" declaration and it works like a charm now.

Thanks for your hint.

Tags
Grid
Asked by
Nikolay
Top achievements
Rank 2
Answers by
Nikolay
Top achievements
Rank 2
Georgi
Telerik team
Konstantin Dikov
Telerik team
Share this question
or