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. Image for the cookie policy date

Rendering a view page in DetailGrid instead of grid child

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,

Ayane

Attachment: List_5d24d1cf.7z

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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. 

Index.cshtml 
 
@(Html.EJ().Grid<EmployeeView>("HierarchyGrid") 
            .Datasource(ds => ds.Json(ViewBag.dataSource)) 
              . . . .  
        .DetailsTemplate("#GridContentDetails") 
        .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> 
 
<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") 
        } 
    } 
</script> 
 
Contact.cshtml 
 
@(Html.EJ().Grid<OrdersView>("Grid" + @Request.QueryString["id"]) @*maintain unique id among detailsGrid*@        .Datasource(ds => ds.Json(ViewBag.childData)) 
           . . .  
) 
 
controller 
        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. 

Regards, 
Seeni Sakthi Kumar S. 



AY Ayane 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


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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. 

Regards, 

Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon