[Solved] popup editor bind model to LoadContentFrom

[leblanc]

I have a grid with edit button.
Inside the editor template I have a nested grid retrieved as follows:

Contained in editor template:
% Html.Telerik().TabStrip()
    .Name(string.Format("TabStrip{0}", Html.CreateUID()))
    .SelectedIndex(0)
    .Items(tabstrip =>
    {
            tabstrip.Add().Text("Groups").LoadContentFrom("GridGroup", "Section", new { Id = Model.Id });
        }).Render();
%>


Model.Id is always 0. (I understand this due to timing of rendering of template - takes default values)

At runtime telerik binds the input controls - is there a way i can hook into that mechanism to also update the url to LoadContentFrom?

if not:

What approach can I use to bind the dataItem being bound to the editor template to the route needed by the tabstrip?

[leblanc]

Almost there...

On the main parent grid I'm attaching to:

function Grid_OnEdit(e) {
    var dataItem = e.dataItem;
    var mode = e.mode;
    var form = e.form;
 
    $('div[id^="TabStrip"] a.t-link', $(form)).each(function( index ) {
        var replaceWith = $(this).attr('href').replace("$ReplaceId", e.dataItem.Id);
        $(this).attr('href', replaceWith);
    });
    
    $('div[id^="TabStrip"]', $(form)).each(function( index ) {    
        var tabStrip = $(this).data("tTabStrip");
        tabStrip.select($(".t-item", tabStrip.element)[0]);
    });
}
   



Unfortunately, it's a little to late since the tabstrip makes the select call sooner than i can do the replacement.

<% Html.Telerik().TabStrip()
    .Name("TabStrip001")
    .SelectedIndex(0)
    .Items(tabstrip =>
    {
            tabstrip.Add().Text("WidgetDataGroups")
                .LoadContentFrom("GridForWidgetDataGroups", "Section", new { Id = "$ReplaceId" });
    }).Render();
%>

My next attempt is to create tabs dynamically unless someone knows a better fix.

[Daniel]

Hello,

The approach is correct. In order to replace the value before the request is made you should remove the SelectedIndex and then select the tab with code like you are already doing. The following modifications to the code will also be needed:

• The tabstrip content elements also will have ID starting with "TabStrip" so the selector will need to be changed in order to avoid a JavaScript error:
  

  $('div[id^="TabStrip"].t-tabstrip', $(e.form))

• The TabStrip will take the URL from the element data with key "ContentUrl" so it should be changed instead of the attribute:
  

  $('div[id^="TabStrip"] a.t-link', $(form)).each(function( index ) {
      var replaceWith = $(this).attr('href').replace("$ReplaceId", e.dataItem.Id);
      $(this).data('ContentUrl', replaceWith);
  });

Regards,
Daniel
the Telerik team