[Solved] Rendering Partial View in ClientTemplate of DetailView

[Jason]

When we expand our master row in our Master/Detail grid, we'd like the contents of the detail to pull from a Partial View.   To load that Partial View we need to pass in the ID of the master row.

Our grid is bound to a model, so at page load time it populates via Server Binding.  However, we want all sorts, etc to use Ajax binding, so we've defined that as well.   Because we're using both binding methods, we have to define both a Template and Client template for our detailview.

On page load, if we don't define a client template, the detail content loads great via the Server Binding using this code:

.DetailView(details => details
   .Template(template =>
      {
          Html.RenderAction("GridDetail", "Lead", new { id = template.Id });
      }
    )
 )

However, if we add this code, it breaks on page load because it appears the Html.Action is executed and the id is not properly passed to the controller in the call to Html.Action (it comes in as null).   (Also, If I hardcode the ID it works fine):

.DetailView(details => details
  .ClientTemplate(
      Html.Action("GridDetail", "Lead", new { id = "<#= Id #>" }).ToHtmlString()
   )
   .Template(template =>
    {
        Html.RenderAction("GridDetail", "Lead", new { id = template.Id });
    }
  )
)

I understand that there are inherent differences between Template and ClientTemplate, but I still thought something like this would be possible.

If I wrap the client template in a TabStrip and call the controller via LoadContentFrom it code works fine, but I don't want a tab in the detail view, I just want the HTML from the partial view:

.ClientTemplate(
   Html.Telerik().TabStrip()
     .Name("TabStrip_<#=Id#>")
     .SelectedIndex(0)
     .HtmlAttributes(new { style = "width: 900px" })
     .Items(items =>
     {
         items.Add().Text("Lead Details").LoadContentFrom("GridDetail", "Lead", new { id = "<#= Id #>" });
      }).ToHtmlString()
)

How can I modify the second code block, so it doesn't throw an error on page load when the grid binds server side?

I'm confused as to why the ClientTemplate would even fire on initial page load if it's binding server side initially.

Thanks!

[Atanas Korchev]

Hi Jason,

 This:


ClientTemplate(       

      Html.Action("GridDetail", "Lead", new { id = "<#= Id #>" }).ToHtmlString()

will not work because the <#= Id #> expression is evaluated on the client-side where there is no Html.Action method. At the time of execution its value is simply <#= Id #>

 It works fine with a tabstrip because it knows how to load a partial view with client-side code.

You need to use custom JavaScript and ajax in order to load the partial view when the details view is expanded. The OnDetailViewExpand event is raised at the right time and you can use jQuery.ajax in order to load the partial view.

All the best,
Atanas Korchev
the Telerik team

[burak]

Hi there, 

i tried also to render a partial view in clienttemplate: 

 }).DetailView(detailView => detailView.ClientTemplate(            
 "<div id='detailbox'>"+              
 "<legend>Details for <#= id #></legend>" +                  
 "<ul style='padding:0;margin:0;list-style:none'>" +                      
 "<li>ProductID: <#= Text #></li>" +                     
 "<li>Unit Price: <#= Bolum #></li>" +                  
 "</ul>" +            
 "</div>"            
))........

I than wanted to test to change the html of the div with the id "detailbox" 
I can read the contents of the div but when i try to change the contents nothing happens. here is the Javascript part. 

 <script type="text/javascript">        
function Grid_onDetailViewExpand(e) {
            var masterRow = e.masterRow;
var detailRow = e.detailRow;
var dataItem = $('#ADR_Sorular').data('tGrid').dataItem(e.masterRow);
 alert(dataItem['id']);
 alert($(e.detailRow.innerHTML).find('#detailbox').html());
//  $(e.detailRow.innerHTML).find('#detailbox').html("!!!!!! this dosen't work. i can't change it!!!!!!!!");
}
</script>

i would be great if someone could show me how to update the dom of the grid inside the ondetailviewexpand event... 
-------------------------
(solved)

i think i just needed a break :)

$(''#detailbox').html("whatever")... 

will do the work. 
thanx anyway. 

[Hoai Linh]

Sorry for open this thread again, but I face a problem that some one can help when read the information above.
I use Grid with columns.Bound, and DetailView.

It work with this sample:

.DetailView(details => details
        .ClientTemplate("<#= Detail.ctd_detail_id #>");

But not work if use below. When I debug, the Detail.ctd_detail_id become to Detail_ctd_detail_id in anonymous code [dynamic], tab

.DetailView(details => details
        .ClientTemplate(
                Html.Telerik().TabStrip()
                .SelectedIndex(0)
                .Name("TabStrip_<#= Detail.ctd_detail_id #>")
                .Items(parent =>
                {
                    parent.Add()
                    .LoadContentFrom("Cere", "Cere", new {id= "<#= Detail.ctd_detail_id#>"});
                })
                .ToHtmlString()
            )
       )

And may I use the new {id= "<#= Detail.ctd_detail_id#>"} in LoadContentFrom ? I try seperate use but no way to work.