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

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

7 Answers 148 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Rob Schoenaker
Top achievements
Rank 1
Rob Schoenaker asked on 15 Apr 2010, 02:04 PM
...  
 
    $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.

7 Answers, 1 is accepted

Sort by
0
Jack Ma
Top achievements
Rank 1
answered on 20 Apr 2010, 02:17 AM
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

0
Rob Schoenaker
Top achievements
Rank 1
answered on 20 Apr 2010, 07:22 AM
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  
}                
                <%     
            }))    
 

0
Jack Ma
Top achievements
Rank 1
answered on 20 Apr 2010, 07:53 AM
Thanks a lot!!!
I'll try to leverage this skill. Study.. Appreciate!!!

Jack
0
Jack Ma
Top achievements
Rank 1
answered on 20 Apr 2010, 08:10 AM
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
0
Rob Schoenaker
Top achievements
Rank 1
answered on 20 Apr 2010, 08:14 AM
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
0
Jack Ma
Top achievements
Rank 1
answered on 20 Apr 2010, 08:22 AM
Hi Bob,
    Thank you anyway. Still learnt a lot from you. Have a nice day!

Jack
0
Sam Critchley
Top achievements
Rank 1
answered on 05 Jul 2010, 05:22 AM
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:


Tags
Grid
Asked by
Rob Schoenaker
Top achievements
Rank 1
Answers by
Jack Ma
Top achievements
Rank 1
Rob Schoenaker
Top achievements
Rank 1
Sam Critchley
Top achievements
Rank 1
Share this question
or