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

Grid with child Tab control & LoadContentFrom

5 Answers 278 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.

Mark asked on 20 Aug 2010, 03:14 PM

Hi Guys
I currently have a grid with a master / detail configuration, whereby the detail is a tabstrip control. This all works very well however, when I try to use the tabstrip LoadContentFrom method to dynamically load the content of the tab, it does not parse the route values correctly, see below...

items.Add().Text("User Details").LinkHtmlAttributes(new { id = "<#= UserId #>" }).LoadContentFrom("_GetUserDetailsPartial", "Admin", new { userId = "<#= UserId #>" });

This is the line where I add the tab item, as you can see I add the tab item, set the id on the link via LinkHtmlAttributes(new { id = "<#= UserId #>" }) and then try and set up the dynamic content via LoadContentFrom. What results is that the link is created the id attribute is set correctly but the actual link ends up looking like this...

/Admin/_GetUserDetailsPartial?userId=<#= UserId #>

At this point I should let you know that the <#= UserId #> field is a bound field from the master grid. It looks like what is happening is that the URL is being created before the data is bound thereby binding the string value as the id instead of the actual bound data?

I'm not sure if I am just missing something here or what but it is really frustrating the it binds as the correct value but the action doesn't.

Please help

Thanks

Mark

5 Answers, 1 is accepted

answered on 14 Mar 2011, 02:41 PM

Wow, this was a long time ago, and I never got a response from the guys at Telerik, but I do have a workaround. If I can remember correctly I just updated to the latest version (2010.2.825 @ the time), and then referenced my nested tabs as follows...

If I can remember correctly, bringing the UserID back in the master grid ( but setting it as visible=false ) allowed me to access it via the lambda expression variable as opposed to the <# UserID #> syntax, so now instead of this...

items.Add().Text("User Details").LinkHtmlAttributes(new { id = "<#= UserId #>" }).LoadContentFrom("_GetUserDetailsPartial", "Admin", new { userId = "<#= UserId #>" });

I have this...

items.Add().Text("User Details").LoadContentFrom("_GetUserDetailsPartial", "Admin", new { userId = e.UserId });

note the userid = e.userid. The complete grid configuration is pasted below so you can get some context of how I used it. I hope this answers your question. I did this so long ago I can't even remember what I was trying to user the "LinkHtmlAttributes" method for in the first place??

Anyway, mine works and I hope yours will too.

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

.Name("Users")

.Columns(columns =>

{

columns.Bound(c => c.UserId).Visible(false);

columns.Bound(c => c.EmailAddress).Width(200);

columns.Bound(c => c.FirstName).Width(100);

columns.Bound(c => c.LastName).Width(100);

})

.DetailView(detailView => detailView.Template(e =>

{

%>

<%

Html.Telerik().TabStrip()

.Name("TabStrip_" + e.UserId)

.SelectedIndex(0)

.Items(items =>

{

items.Add().Text("User Details").LoadContentFrom("_GetUserDetailsPartial", "Admin", new { userId = e.UserId });

items.Add().Text("Products").LoadContentFrom("_GetUserProductsPartial", "Admin", new { userId = e.UserId });

items.Add().Text("Roles").LoadContentFrom("_GetUserRolesPartial", "Admin", new { userId = e.UserId });

items.Add().Text("Actions").LoadContentFrom("_GetUserActionsPartial", "Admin", new { userId = e.UserId });

}).Render();

%>

<%

}))

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

.Sortable(sorting => sorting

.OrderBy(sortOrder => sortOrder.Add(o => o.EmailAddress).Ascending())

)

.Filterable()

.Render();

%>

answered on 14 Mar 2011, 05:31 PM

I solved my problem (Telerik Grid Ajax binding + DetailView (ClientTemplate) + TabStip (Ajax LoadOnDemand) ) this way :
I modified start of telerik.tabstrip.js file (added lines in bold italic).
href from items (not content) are taken into account...
But what are the unknown effects :) !!???

(function ($) {

var $t = $.telerik;

$t.tabstrip = function (element, options) {

this.element = element;

var $element = $(element);

this.$contentElements = $element.find('> .t-content');

$.extend(this, options);

if (this.contentUrls)

$element.find('.t-tabstrip-items > .t-item')

.each($.proxy(function (index, item) {

var $link = $(item).find('.t-link'),

href = $link.attr('href');

var isAnchor = (href && (href.charAt(href.length - 1) == '#' || href.indexOf('#' + this.element.id + '-') != -1));

if (isAnchor)

$(item).find('.t-link').data('ContentUrl', this.contentUrls[index])

else

$(item).find('.t-link').data('ContentUrl', href)

}, this));