Rendering a view page in DetailGrid instead of grid child

[Ayane]

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

[Seeni Sakthi Kumar Seeni Raj]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/125310/ze/MvcApplication66819466537.zip 

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

Regards, 

Seeni Sakthi Kumar S. 

[Ayane]

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

Best regards,

Ayane Suarez

[Seeni Sakthi Kumar Seeni Raj]

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.