We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Rendering a view page in DetailGrid instead of grid child

Thread ID:





125310 Aug 7,2016 11:32 PM UTC Aug 17,2016 04:01 AM UTC ASP.NET MVC 3
Tags: Grid
Asked On August 7, 2016 11:32 PM UTC

Hello Syncfusion team,

I am using Synfusion components and up to date, I think it works great.

Well, I have used Grids with DetailsGrid like it is explained in Essential Studio for ASP.NET MVC User Guide and everything has worked properly.

Normal use of DetailsGrid renders a grid child.

So, I need to use DetailsGrid to render a view page instead (OverrideDetails.cshtml).

Attached the code I used, though it does not work

The OverrideDetails method calls a View(model) with some data of a model.

If I was not clear enough, please let me know.

Please, help me and I will be grateful for a positive answer.

Yours faithfully,


Attachment: List_5d24d1cf.7z

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On August 8, 2016 08:48 AM UTC

Hi Ayane, 

We could see you would like to render the details Grid from an another page. You can render it using a iframe which will load the Grid/required content from an another page.  

But the detailsTemplate must be present in the master Grid’s page itself. On expanding the master Grid, you can add the src attribute with the required page. Here iframe will send an POST requesting the detailsGrid page after assigning corresponding page in the src attribute. Refer to the following code example. 

            .Datasource(ds => ds.Json(ViewBag.dataSource)) 
              . . . .  
        .ClientSideEvents(e => e.DetailsDataBound("detailGridData")) 
<script id="GridContentDetails" type="text/x-jsrender"> 
    <iframe id="sample{{:EmployeeID}}" onload="onLoad({{:EmployeeID}})" frameborder="0" tabindex="1" style="height: 100%;width: 100%"></iframe> 
<script type="text/javascript"> 
    function detailGridData(args) { 
        var id = args.data["EmployeeID"]; 
        $("#sample" + id).ejWaitingPopup({ 
            showOnInit: true 
    //append the detailsGrid page in iframe so 
    //Controller will retrieve the id and bind the filtered data to details Grid 
        $("#sample" + id).attr("src", "Contact?id="+id); 
    function onLoad(args) { 
        if (!ej.isNullOrUndefined($("#sample" + args).attr("src"))) { 
            $("#sample" + args).ejWaitingPopup("hide") 
@(Html.EJ().Grid<OrdersView>("Grid" + @Request.QueryString["id"]) @*maintain unique id among detailsGrid*@        .Datasource(ds => ds.Json(ViewBag.childData)) 
           . . .  
        public ActionResult Contact(int id) 
            ViewBag.childData = new NorthwindDataContext().OrdersViews.Where(emp => emp.EmployeeID == id).ToList(); 
            return View(); 

We have also prepared a sample that can be downloaded from the following location. 

If we misunderstood your query, please explain your scenario in detail and provide the code behind. 

Seeni Sakthi Kumar S. 

Replied On August 16, 2016 12:26 PM UTC

Thank you so much for the answer provided. Your answer supports me a lot.

Best regards,

Ayane Suarez

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On August 17, 2016 04:01 AM UTC

Hi Ayane, 

We are happy to hear that your requirement has been achieved. 

Get back to us if you need further assistance. 


Seeni Sakthi Kumar S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon