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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Partial View

Thread ID:

Created:

Updated:

Platform:

Replies:

130058 Apr 19,2017 07:37 AM UTC Apr 20,2017 06:25 AM UTC ASP.NET MVC 2
loading
Tags: Grid
BERNARD
Asked On April 19, 2017 07:37 AM UTC

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

kevin
Replied On 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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 
 


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

or the page will be automatically redirected to 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

;