How to declare the "selectable" column dynamically?

[Nikolay]

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. 

[Nikolay]

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.

 

[Georgi]

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:

• https://dojo.telerik.com/ixExuHod

Regards,
Georgi
Progress Telerik

[Nikolay]

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.

[Georgi]

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

[Nikolay]

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.

 

 

[Georgi]

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

[Nikolay]

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.

[Konstantin Dikov]

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:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/selectable

Do not hesitate to contact us again if any further questions arise.


Regards,
Konstantin Dikov
Progress Telerik

[Nikolay]

Konstantin

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

Thanks for your hint.