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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid in a partial veiw

Thread ID:

Created:

Updated:

Platform:

Replies:

144850 May 25,2019 03:19 PM UTC Mar 31,2020 10:49 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Adam
Asked On May 25, 2019 03:19 PM UTC

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 [Syncfusion]
Replied On May 27, 2019 10:36 AM UTC

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  


Please get back to us if you have further queries.  

Regards, 
Thavasianand S.  


Adam
Replied On May 27, 2019 03:18 PM UTC

Thank you for the quick response. This worked perfectly.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 28, 2019 05:46 AM UTC

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
Replied On March 27, 2020 12:32 PM UTC

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 [Syncfusion]
Replied On March 31, 2020 10:49 AM UTC

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. 

 
Regards, 
Rajapandi R 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon