Get dataitem in DetailsTemplate

[Costa]

Hello. I want to load the DetailsTemplate from PartialView and pass the corresponding row data to the Model of PartialView. Something like that:

@(Html.EJ().Grid<MyDataType>("DetailTemplate")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .Columns(col =>

        {

            some columns

        })

        .DetailsTemplate("#rowDetailsTemplate")

    )

}

<script id="rowDetailsTemplate" type="text/x-jsrender">

    @{

        await Html.RenderPartialAsync("_Partial1", rowdata???);

    }

    

</script>

Is this possible?

[Seeni Sakthi Kumar Seeni Raj]

Hi Costa,  

 

We could see you would like to render the Details Grid from the Partial view. We can achieve this requirement using the DetailsDataBound even of the Grid, where you supposed to request the controller for the partial view (i.e. details Grid). Refer to the following code example and API Reference. 

 

 

// Grid page 

<script id="tabGridContents" type="text/x-jsrender"> 

 

    <div id="detailGrid{{:EmployeeID}}"> 

    </div> 

 

</script> 

 

@{ 

    Html.EJ().Grid<object>("Grid") 

.Datasource((IEnumerable<object> 

    )ViewBag.datasource) 

    .DetailsTemplate("#tabGridContents") 

    .ClientSideEvents(eve => { eve.DetailsDataBound("detailGridData"); }) 

    .Columns(col => 

    { 

 

    col.Field("EmployeeID").Add(); 

 

 

    }) 

    .Render(); 

    } 

 

 

 

    <script type="text/javascript"> 

 

        function detailGridData(args) { 

            this.element.ejWaitingPopup("show"); 

            $.ajax 

                ({ 

                    url: "Dialog", 

                    type: 'GET', 

                    data: { data: args.rowData.EmployeeID }, 

                    success: ej.proxy(function (data) { 

                        $("#detailGrid" + args.rowData.EmployeeID).html(data); 

 

                        this.element.ejWaitingPopup("hide"); 

                    }, this) 

                }); 

 

        } 

 

    </script> 

 

//Partial View page 

@{ 

    Html.EJ().Grid<object>("GridPartial") 

.Datasource((IEnumerable<object>)ViewBag.datasource) 

.Columns(col => 

{ 

    col.Field("EmployeeID").Add(); 

    col.Field("OrderID").Add(); 

    col.Field("ShipCity").Add(); 

    col.Field("Freight").Add(); 

 

 

}) 

.Render(); 

} 

<ej-script-manager></ej-script-manager> 

// Controller side 

 

   public IActionResult Dialog(int data) 

        { 

            ViewBag.id = data.ToString(); 

            ViewBag.datasource = order.Where(e => e.EmployeeID == data).ToList(); 

            return PartialView("Dialog"); 

        } 

 

API: https://help.syncfusion.com/api/js/ejgrid#events:detailsdatabound 

 

We have discussed about rendering Grid control from the partial view in the following Help Document.  

 

https://help.syncfusion.com/aspnetmvc/grid/how-to#work-with-partial-views 

 

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/7z/coremvc-2049403343.7z  

 

Regards,  

Seeni Sakthi Kumar S.