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. Image for the cookie policy date

Partial View

Hye,

I'd like to know how display , a grid in a partial view binded on a another controler .

Example : Customer Table and order table binded by Customer ForeignKey Id in Table Order

Thks

Bernard

2 Replies

KE kevin April 19, 2017 04:14 PM UTC

Hello Bernard,you must create a partial view bound to the model that you want to use. from the other controller you want to launch make sure you pass the model that the partial view must use. should be as simple as that.now to use the grid you must add the grid in your partial view just like you would in any kind of view.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 20, 2017 06:25 AM UTC

Hi Bernard, 

We have prepared a sample with your requirement “Rendering the ej controls in Partial view”, that can be downloaded from the following location. 
 
 
In the sample, we have rendered ej controls such as Grid and AutoComplete while clicking the Button which is placed in the Main view. It is recommended to place the ScripManager in the partial views to render the ej controls. Refer to the following code example. 
 
Index.cshtml 
 
<div id="main"> 
    @Html.EJ().Button("click").Text("Render Grid") 
</div> 
 
<script type="text/javascript"> 
    $("#click").click(function () { 
        $.ajax 
                ({ 
                    url: "/Home/Productpartial", 
                    type: 'GET', 
                    success: function (data) { 
                        $("#main").html(data); 
                    } 
                }); 
    }); 
</script> 

_partial.cshtml 
 
@{ 
    Html.EJ() 
        .Autocomplete("SelectID") 
        .Datasource((IEnumerable<object>)ViewBag.data) 
        .WatermarkText("Select Customer ID") 
        .AutocompleteFields(f => f.Key("CustomerID").Text("CustomerID")) 
        .Render(); 
} 
 
@(Html.EJ().Grid<Object>("Grid") 
           .Datasource((IEnumerable<Object>)ViewBag.data) 
           .AllowPaging() 
            .. .  
                    . . . 
) 
 
@Html.EJ().ScriptManager()@*for non-unobtrusive mode, it must be given in partial view*@ 
 
namespace SampleApp.Controllers 
{ 
    public class HomeController : Controller 
    { 
        [HttpGet] 
        public ActionResult Productpartial() 
        { 
            var DataSource = new NorthwindDataContext().OrdersViews.ToList(); 
            ViewData["data"] = DataSource; 
            return PartialView("_partial", ViewData); 
        } 
    } 
} 
 
Syncfusion MVC components will render in two modes such Unobtrusive mode and non-unobtrusive mode. 
 
If you are running an application in Non-Unobtrusive mode, above solution is enough and render the controls. For Unobtrusive mode, there is no need to refer the ScriptManager in each partial views but to initiate the control in the partial, we have to use ej.widgets.init. Refer to the following code example. 
 
Web.config 
 
 <appSettings> 
   .  . .  
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
  </appSettings> 
 
_layout.cshtml 
 
<!DOCTYPE html> 
<html> 
<head> 
     . . . . ..  
    <script src="~/Scripts/ej/ej.web.all.min.js"></script> 
    <script src="~/Scripts/ej/ej.unobtrusive.min.js"></script> 
</head> 
<body> 
    @RenderBody() 
    @(Html.EJ().ScriptManager()) 
</body> 
</html> 


Index.cshtml 

 
<div id="main"> 
    @Html.EJ().Button("click").Text("Render Grid") 
</div> 
 
<script type="text/javascript"> 
    $("#click").click(function () { 
        $.ajax 
                ({ 
                    url: "/Home/Productpartial", 
                    type: 'GET', 
                    success: function (data) { 
                        $("#main").html(data); 
                        ej.widget.init($("#main")); // Initiate control rendering 
                    } 
                }); 
    }); 
</script> 


_partial.cshtml 

@{ 
    Html.EJ() 
        .Autocomplete("SelectID") 
        .Datasource((IEnumerable<object>)ViewBag.data) 
        .WatermarkText("Select Customer ID") 
        .AutocompleteFields(f => f.Key("CustomerID").Text("CustomerID")) 
        .Render(); 
} 
 
@(Html.EJ().Grid<Object>("Grid") 
           .Datasource((IEnumerable<Object>)ViewBag.data) 
           .AllowPaging() 
            .. .  
                    . . . 
) 

 
Refer to the following code example. 
 
 
Regards, 
Seeni Sakthi Kumar S. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon