Small modification to RowSelected to allow adding the dataitem bound to the row

[Rob Schoenaker]

...

    $t.grid.prototype = {

        rowClick: function (e, element) {
            $(element).addClass('t-state-selected')
                      .siblings().removeClass('t-state-selected');

            if (this.onRowSelected) {
                var rows = this.$tbody[0].rows;
                var item = null;

                // find the selected row index
                for (var i = 0, l = this.data.length; i < l; i++) {
                    if (rows[i] == element) {
                        item = this.data[i];
                        break;
                    }
                }

                $t.trigger(this.element, 'rowSelected', { row: element, dataItem: item });
            }
        },


        rowDblClick: function (e, element) {
            $(element).addClass('t-state-selected')
                      .siblings().removeClass('t-state-selected');

            if (this.onRowDoubleClicked) {
                var rows = this.$tbody[0].rows;
                var item = null;

                // find the selected row index
                for (var i = 0, l = this.data.length; i < l; i++) {
                    if (rows[i] == element) {
                        item = this.data[i];
                        break;
                    }
                }

                $t.trigger(this.element, 'rowDoubleClicked', { row: element, dataItem: item });
            }
        },

...

this is an addition to telerik.grid.js. Hope you find it useful.

[Jack Ma]

Hi Rob,

    I'm interested with your code but not sure how to implement it. Can you explain under what scenario it is used and how to implement?

    Thanks in advance!

Jack

[Rob Schoenaker]

In the normal samples, the way to get a value from a row is by addressing the cells of the grid. This may be messy (imho) since the grid could potentially change the column order, fields etc.

So, in order to get the ID field of an entity connected to a row when the selection changes, one would want to use the dataItem attached to the row. A small example:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<...>>" %>

<script type="text/javascript">

var rowId;

var select_row;

</script>

<%

Html.Telerik().Grid<...>(Model)

.DataBinding(databinding => databinding.Ajax().Select("Action", "Controller"))

.Name("Grid")

.Scrollable(scrolling => scrolling.Height(400))

.Columns(columns =>

{

columns.Bound(o => o.ID).Width(0);

columns.Bound(o => o.C2).Width(100).Sortable(true);

columns.Bound(o => o.C3).Width(200).Sortable(true);

columns.Bound(o => o.C4).Width(120).Sortable(true);

})

.Selectable()

.ClientEvents(events => events.OnRowDataBound(() =>

{

%>

function(e) {

// select the row if we cached it

if (e.dataItem) {

if (e.dataItem.ID == rowId) {

select_row = e.row;

}

}

}

<%

}))

.ClientEvents(events => events.OnDataBound(() =>

{

%>

function(e) {

// After a modal action, set focus to the previously selected row

if(select_row)

$(select_row).click();

select_row = null; }

<%

}))

.ClientEvents(events => events.OnRowDoubleClicked(() =>

{

%>

function(e) {

rowId = e.dataItem.ID;

$.fancybox(

{

autoDimensions: false,

width: 'auto',

height: 'auto',

transitionIn: 'none',

transitionOut: 'none',

modal: 'true',

title: 'Edit item',

modal: 'true',

onClosed: function(e){

// refresh the data in the grid

var grid = $('#Grid');

grid.data('tGrid').ajaxRequest();

},

href: '<%= Url.Content(Url.Action("Edit", "Controller"))%>?id=' +  e.dataItem.ID

}

);

}

<%

}))

.Pageable(pages => pages.PageSize(20))

.Sortable()

.Scrollable()

.Render();

%>

Please note that there was an error with the OnDataBound event. I fixed it above as such:

            .ClientEvents(events => events.OnDataBound(() =>
            {
                %>
                function(e) {
                    // After a modal action, set focus to the previously selected row
                    if(select_row)
                        $(select_row).click();
                        select_row = null; // <-- FIX
}
                <%
            }))

[Jack Ma]

Thanks a lot!!!

I'll try to leverage this skill. Study.. Appreciate!!!

Jack

[Jack Ma]

Hi Rob,

    I just tried that code, but the ID field is shown though the width set to zero. This is not what I expect. I don't want the ID field shown on the grid, but still want to access it in the javascript.

Regards

Jack

[Rob Schoenaker]

I guess that having an ID in the grid *without* adding it a a column would be a feature request. I do not mind having the column in the html myself, but it would be nicer (ofcourse) to be able to specify coulmns without adding them in the html code.

You could try to ask the Telerik guys to add this to the feature list, so we could all benefit from this.

As a sidenote, this code exposes an OnDoubleClicked event on the grid which is not yet incorporated in the grids code. I posted the changes necessary to another forum post:
Double click added to grid

[Jack Ma]

Hi Bob,

    Thank you anyway. Still learnt a lot from you. Have a nice day!

Jack

[Sam Critchley]

function rowSelected(e){
    var grid = $(e.row).parents('.t-grid').data('tGrid');
    var data = grid.data[$(grid.$tbody[0].rows).index(e.row)];

    var id;
    for (x in grid.dataKeys)
        id = data[x];

document.location.href = grid.ajax.updateUrl + '/' + id;
}

This should be inbuilt! You should get the array of data and the values for the datakeys specified (for that row).

To get click to edit redirection going i wrote this: