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.
Unfortunately, activation email could not send to your email. Please try again.

Rendering a view page in DetailGrid instead of grid child

Thread ID:

Created:

Updated:

Platform:

Replies:

125310 Aug 7,2016 07:32 PM Aug 17,2016 12:01 AM ASP.NET MVC 3
loading
Tags: Grid
Ayane
Asked On August 7, 2016 07:32 PM

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 [Syncfusion]
Replied On August 8, 2016 04:48 AM

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. 


Ayane
Replied On August 16, 2016 08:26 AM

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 12:01 AM

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. 


CONFIRMATION

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.

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.

;