Grid in a partial veiw

[Unknown]

I am trying to use a grid in a partial view. Can I databind it using ViewBag like I do in a regular view? I am using an ajax call to the controller to get the data. I does get the data and assign to a ViewBag object, But the grid does not populate.

[Thavasianand Sankaranarayanan]

Hi Adam,  

Greetings from Syncfusion support.  

Query: “Grid in partialView” 

From your query we understand that you need to render the Grid using partial view. As per your requirement we have prepared a sample to render Grid in partial view on button click. Refer the below code example 

[Index.cshtml] 

 

<div id="main"> 

    @Html.EJS().Button("primarybtn").Content("Show the Grid in Partial View").IsPrimary(true).Render() 

</div> 

<div id="GridJ2" /> 

 

<script type="text/javascript"> 

    // click event to call ajac post to server 

    document.getElementById("primarybtn").addEventListener("click", function () { 

        var ajax = new ej.base.Ajax("/Home/ProductpartialEJ2/", 'POST', true); 

        ajax.send().then((data) => { 

            $("#GridJ2").html(data); 

        }); 

    }); 

</script> 

…………………….. 

[HomeController.cs] 

public ActionResult ProductpartialEJ2() 

        { 

            if(order.Count == 0) 

            BindDataSource(); 

            var model = order; 

            ViewBag.data = order;            

            return PartialView("_GridFeaturesJ2", ViewBag); 

        } 

…………………….. 

[_GridFeaturesJ2.cshtml] 

  @Html.EJS().Grid("GridJ2").DataSource((IEnumerable<object>)ViewBag.data).Columns(col => 

            { 

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("75").Add(); 

                col.Field("CustomerID").HeaderText("Customer ID").Width("80").Add(); 

                col.Field("OrderDate").HeaderText("Order Date").Format("yMd").Width("75").Add(); 

                col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("75").Add(); 

 

            }).AllowPaging().PageSettings(p => p.PageSize(10)).Render() 

 

    @Html.EJS().ScriptManager() 

  

For your convenience we have prepared a sample which can be downloaded from below link  

Sample http://www.syncfusion.com/downloads/support/forum/144850/ze/SyncfusionMvcApplication7290854014  

Please get back to us if you have further queries.  

Regards, 

Thavasianand S.  

[Unknown]

Thank you for the quick response. This worked perfectly.

[Thavasianand Sankaranarayanan]

Hi Adam, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.  

[Rubén Valentín]

Hi Adam, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.  

How can i do on Razor pages?

[Rajapandi Ravi]

Hi Rubén, 

Thanks for the update 

Based on your query, we have prepared a sample with razor pages. We have shared the sample as given, it is bind the Dialog edit form using partial view in razor application. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/253309/ze/Grid_Razor_31429153331  

 

Regards, 

Rajapandi R