Telerik Mvc Grid control Row Select: How do we know which cell is selected?

[Chunsheng]

Hi Everyone. The Telerik Mvc Grid has something like ".ClientEvents(events => events.OnRowSelect("onRowSelected"))" to handle the row select event and it knows which row is selected. Can we have further know which cell of the row is selected?

Thanks very much in advance.

[Dimo]

Hello Chunsheng,

The RowSelect event provides information about the clicked row only, not the exact cell. You can modify the Grid source code to enhance the component's behavior:

telerik.grid.js

rowClick: function (e) {
    var $target = $(e.target);
    if (!$target.is(':button,a,input,select,textarea,option,a>.t-icon')) {
        e.stopPropagation();
        var $cell = $target.closest('td');
        var $row = $target.closest('tr')
                            .addClass('t-state-selected')
                            .siblings()
                            .removeClass('t-state-selected')
                            .end();
        $t.trigger(this.element, 'rowSelect', { row: $row[0] , cell: $cell[0] });
    }
}


Kind regards,
Dimo
the Telerik team

[Chunsheng]

Hi Dimo

Thanks very much for your help. In order to implement your method, I need the source file of telerik.grid.js; but I only find the telerik.grid.min.js in my project. How can I find the telerik.grid.js, then change it following your suggestion and convert it to telerik.grid.min.js? A further issue related to this is: could you please help with example code about how to use the cell selection of the new telerik.grid.js?

Thanks very much in advance.

Chunsheng

[Dimo]

Hello Chunsheng,

The source can be found in your MVC extensions' installation folder. You can also modify the minified Javascript file.

Converting a non-minifed JS file to a minified one can be accomplished with any of the free tools available online.

Since the MVC Grid does not support cell selection, you should implement it, according to your requirements and scenario.

All the best,
Dimo
the Telerik team