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

[Solved] Custom Select for Grid Row

9 Answers 325 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.

Frank Michael asked on 04 May 2010, 11:05 PM

I was following the instructions here:
http://www.telerik.com/community/forums/aspnet-mvc/grid/custom-commands-in-grid.aspx
I took the suggestion with redirecting the select command by java script.
This works as long as I have not previously performed an action like add record or delete record. Then it does not work any more.
I am using Ajax binding.
Here is the view:

    
            <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<RenderSprint>>" %> 
        
            <%@ Import Namespace="WorkstreamPlatform_WebRole.Controllers" %> 
        
            [<%= Html.ActionLink("Create New", "Create", "Sprint") %>] 
        
            <% 
        
                Html.Telerik().Grid<RenderSprint>() 
        
                    .BindTo(Model) 
        
                    .Name("SprintGrid") 
        
                    .Localizable("de-DE") //ToDo Culture allgemein ersetzen 
        
                    .ToolBar(tb => {  
        
                        tb.Insert(); 
        
                        tb.Custom().Action<SprintController>(sc => sc.Aggregate()).Text("Aggregate"); // ToDo hier muss ich Ajax machen.   
        
                    }) 
        
                    .DataBinding(b => b.Ajax() 
        
                        .Select<SprintController>(sc => sc.AjaxGridSelect()) 
        
                        //ToDo .Delete<SprintController>(sc => sc.AjaxGridDelete()) 
        
                        .Delete("AjaxGridDelete", "Sprint") 
        
                        .Insert<SprintController>(sc => sc.AjaxGridInsert()) 
        
                        // ToDo .Update<SprintController>(sc => sc.AjaxGridUpdate())) 
        
                        .Update("AjaxGridUpdate", "Sprint")) 
        
                    .DataKeys(k => k.Add(s => s.RowKey)) 
        
                    .Columns(c => 
        
                    { 
        
                        c.Command(s => 
        
                        { 
        
                            s.Delete(); 
        
                            s.Edit(); 
        
                            s.Select(); 
        
                        }); 
        
                        c.Bound(s => s.Title); 
        
                        c.Bound(s => s.RemainingDays).Format("{0}").ReadOnly(true); 
        
                        c.Bound(s => s.RemainingHours).Format("{0}").ReadOnly(true); 
        
                        c.Bound(s => s.Date).Format("{0:d}"); 
        
                    }) 
        
                    .Sortable() 
        
                    .Pageable() 
        
                    .Render(); 
        
                 %> 
        
                 <% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => { 
        
                %> 
        
                    $('.t-grid-select').live('click', function (e) { 
        
                        e.preventDefault(); 
        
                        location.href = "/Sprint/Detail/" + e.target.pathname.substring(14,e.target.pathname.length); 
        
                    }); 
        
            <% }); %>

With firebug it seems like as if the scripts disappear. Do I have it at the wrong place?

9 Answers, 1 is accepted

answered on 05 May 2010, 10:53 AM

First, when I enter the page and press Select, then the variable e.target.pathname contains /Sprint/Index/9ff1fdcb-29fb-44be-8c57-8e7b5a42739b and I am taking the guid from it by doing e.target.pathname.substring(14,e.target.pathname.length).

When I entered the page and I click delete and then after the deletion the Grid is rendered again, and then I press Select again, the variable e.target contains only the value /Sprint - thus the operation e.target.pathname.substring(14,e.target.pathname.length) yields an empty string.

Maybe I am using the wrong variable alltogether. Originally you suggested to use $(e.target).closest('tr')[0].rowid, but it does not work for me and I don't understand what it means. Probably I am missing some context here. I must admit I am new to Java Script and jQuery and I wanted to avoid to dig too deep into it to save time. That's why I am using the Telerik MVC. But drilling into a row for a detail view is a must-have.

There two other phenomenons that I find, and I am mentioning these, because they may be related, maybe not.

1) After I press a button like add new record or delete, the dates are rendered in us culture instead of "de-DE" that I am using in .Localizable("de-DE"). Normally the culture is fine and the dates as well. But after pressing a button and returning from the Ajax Controller action, it is wrong.
2) Before I press any button after page enter the buttons Edit and Select have underlined and coloured text just like a link. But the button delete has not. Also if I hover over Edit or select the browser shows a link like /Sprint/Index/[any guid]?SprintGrid-mode=edit or =select respectively while the button Delete only shows no link. AFTER the first interaction by pressing any button and returning from the Ajax Controller action the scene has changed. The Delete button is rendered like the other two line a link. At the same time when I hover over any button the link shown in the browser is /Sprint# - I believe this is related to the fact that I do not find the expected value in e.target.pathname.
However even before the first interaction the button Delete is functional.

So with the information I have and following conventional logic at least this behavior is strangely unexplainable for me.

Accepted

answered on 05 May 2010, 11:41 AM

Hi Frank Michael ,

When the grid is rendered initially the select command outputs its server-selection url. After ajax binding this url is wiped out as it is not known. The solution presented in that other forum thread is for server binding only. For client binding you need to generate the selection url by yourself.

$(e.target).closest('tr')[0] finds the closes <TR> (table row) which means the parent row of the button. From there you need to somehow get the required detail (ID for example). You can do so by having a hidden column. If using editing you can easily get the bound data item and use it instead:

var dataItem = grid.dataItem($(e.target).closest('tr'));
var id = dataItem.id;

Localization is not related with date formatting. Globalization is. To enable globalization for your application please check this help topic.

The select and edit buttons are indeed rendered as links (<a> tags) whereas the delete button is a submit button. If you have a CSS rule for styling links you can indeed get the underlined effect. Again you are observing different behavior because the grid is initially rendered from the server and then after the client request - is bound on the client side. To eliminate this simply do not bind the grid when defining it - remove the line BindTo(Model)

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 05 May 2010, 02:22 PM

Hello Frank Michael ,

There is a difference between invisible and hidden columns. Invisible columns do not get output in the HTML whereas hidden columns are output. Use the Hidden(true) setting to hide a column.

You can use the dataItem function as long as editing is enabled for the grid (you have a command column with edit command defined).

Regards,
Atanas Korchev
the Telerik team

answered on 05 May 2010, 04:42 PM

With your tips I - a JavaScript novice - was able to figure out this solution:

    
                 <% Html.Telerik().ScriptRegistrar() 
        
                        .OnDocumentReady(() => { 
        
                %> 
        
                    $('.t-grid-select').live('click', function (e) { 
        
                        e.preventDefault(); 
        
                        var id = $(e.target).closest('tr')[0].children[1].firstChild.wholeText; 
        
                        location.href = "/Sprint/Detail/" + id; 
        
                    }); 
        
            <% }); %>

I took me quite a while I must admit, because I know so little about JavaScript and I hope that I need not to invest too much time into it. I have looked into the DOM a little bit and tried one or the other jQuery expression.
The approach works as far as the button is concerned.

However since I use the hidden column, there is a rendering problem. I see 6 column titles: empty, RowKey, Title, Remaining Days, Remaining Hours, Date. The rows however have only 5 cells, so that the column titled RowKey actually contains the Title and so on, and the last column Date is empty as far as the data is concered. I think the title of "RowKey" should be hidden as well, but it is not.

From an architectural standpoint I think the approach

    
            $(e.target).closest('tr')[0].children[1].firstChild.wholeText;

is not so clean, because it needs a hidden column and it depends on the actual rendering. I can not predict for example, how it behaves if I use field grouping.

Therefore I would prefer to use the data object. I think it is the cleaner approach.

However because I am a JavaScript novice, I was not able to get hold of the grid to implement

    
            var dataItem = grid.dataItem($(e.target).closest('tr')); 
        
            var id = dataItem.id;

I was able to find the div $('#SprintGrid'). but it has no function dataItem. I am using rowEditing, and in the rendered html I can see the data object, but I could not get hold of it.

Accepted