[Solved] Row Selection Handle

[Christophe Geers]

Hi,

I'm using the Telerik grid with Ajax binding and client side selection. This works fine.

However I would like to prevent that the user can select a row by clicking anywhere on the row.

I'm using a client template for the column(s) and in this client template I placed a button. When clicking upon this button I would like to select the row. The row selection should not be triggered if I click anywhere else in the column.

Is there an easy way to achieve this?

Attached is a screenshot of how I restyled my grid.

[Atanas Korchev]

Hello Christophe Geers,

 A possible solution is to simulate the Selectable() behavior:

<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
                {
                    columns.Bound(c => c.ID);
                    columns.Bound(c => c.Name);
                    columns.Bound(c => c.Gender);
                    columns.Template(c => { }).ClientTemplate("<button onclick='doSelect(event)'>select</button>");
                })
            .ClientEvents(e => e.OnRowSelect("onRowSelect"))
            .DataBinding(dataBinding => dataBinding.Ajax().Select("_Select", "Home"))
    %>
<script type="text/javascript">

    function doSelect(e) {
        $.Event(e).preventDefault();

        var $row = $(e.target).closest('tr');


        $row.addClass('t-state-selected')
            .siblings()
            .removeClass('t-state-selected');

        $.telerik.trigger($('#Grid')[0], 'rowSelect', { row : $row[0] });
    }

    function onRowSelect(e) {
        alert('select ' + e.row.cells[0].innerHTML);
    }
    </script>

 I prepared a sample project which you can try. Find it attached.

Regards,
Atanas Korchev
the Telerik team

[Christophe Geers]

Thanks very much! 

Works perfectly in Chrome and FireFox.

Though IE 7 and 8 don't seem to select the row.

[Atanas Korchev]

Hi Christophe Geers,

 Try this

var $row = $(e.target || e.srcElement).closest('tr');

All the best,
Atanas Korchev
the Telerik team

[Christophe Geers]

Top notch support!

Thanks, it works fine now.

[Christophe Geers]

Hrm, oddly enough it works in IE, but only for every other row. Only when I select odds rows (1st, 3rd, 5th...etc.) it works. The even rows can't be selected.

This only happens in IE7 (IE8 run in compatability mode). IE8 works fine...

[Atanas Korchev]

Hi Christophe Geers,

 My example works fine in IE8 compatibility view. See this video: http://screencast.com/t/0G7qUvcafYyI

Regards,

Atanas Korchev
the Telerik team

[Christophe Geers]

Yeah I noticed when I ran your sample project in IE. 

It works fine there. Must be something with my client template of the grid columns.

[Christophe Geers]

My bad. Had some CSS which set the background color of the alternating rows to none. 

In IE7 it appeared that the even rows were not selected because of this.

Thank you very much for your time and help.