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.
Unfortunately, activation email could not send to your email. Please try again.

How to render the partial view content while unobtrusive mode is enabled?

Description

There is no need to refer ej.unobtrusive.min.js file in every partial view page to render Syncfusion components while UnobtrusiveJavaScriptEnabled set as true.

Solution

When the UnobtrusiveJavaScriptEnabled is set as true in the web.config page then the control must be initialized by using the “ej.widget.init” method in the AJAX success function instead by referring “ej.unobtrusive.min.js” script file on every partial view page. Please refer to the below code:   

 

JavaScript :

 

 

Please find the sample from the following location: Sample 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7788 06/23/2017 06/23/2017 ASP.NET MVC General
Did you find this information helpful?
Comments
Bruno Figueiredo Oct 03, 2017

Hi,

I have a grid that is loaded in a partial view. If i use ej.widget.init(); my partial is rendered normaly and the grid works great, but if I use ej.widget.init($("#MYGridId"));  the grid is not rendered. 

My problem is that the partial view is loaded to a modal div from an event from another grid in edit mode. If I call ej.widget.init(); the grid that is in edit mode, just cancel the current edit.

Can you help me? why doesnt this ej.widget.init($("#MYGridId"));   work? 

My version is of ej.web.all.min.js is 15.1.0.33


Thanks

Reply
Prasanna Kumar Viswanathan [Syncfusion] Oct 04, 2017

Hi Bruno,

 

To render the Grid in partial view we need to mention the parent element(container id) id of syncfusion control in ej.widget.init() method. The ej.widget.init() method is used to initialize the control in partial view. In ajax Success method we get the partial view  elements in arguments and render inside the container using jQuery html method.

 

Find the code example :

 

<div id="container" style="width:70%;height:70%;border:1px solid">

 

    div>

@(Html.EJ().Grid<object>("Grid")                     .Datasource((IEnumerable<object>)ViewBag.datasource)

 

.ClientSideEvents(eve => eve.ActionComplete("complete"))

  ---------------------

    <script>

 

 

        function complete(args) {

            if (args.requestType == "beginedit") {

                this.cancelEdit();

                     $.ajax({

                        url: '/Home/ToolsPartial',

                        success: onSuccess

              });

           }

        }

function onSuccess(result) {

        $("#container").html(result);

        ej.widget.init($("#container"));

    }

 

----------------------------------------------------

 

Partial View

 

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

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

        .AllowSorting()

        .AllowPaging()

        .IsResponsive()

        .Columns(col =>

        {

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

            col.Field("FirstName").HeaderText("First Name").Width(80).Add();

            col.Field("LastName").HeaderText("Last Name").Width(80).Add();

        }))

 

 

If we misunderstood your query please get back to us.

 

Regards,

Prasanna Kumar N.S.V

Add Comment
You must log in to leave a comment

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.