1. Home
  2. Forum
  3. ASP.NET MVC
  4. ej.widget.init($("#status"))

ej.widget.init($("#status"))

morning,


i have a mvc page with one partials that renders some other partials inside. On this partials i have some grids.

 when i call a main partial that renders other partials and in one case all works properly... in other case when i call 

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


I have this error:


Uncaught TypeError: Cannot read properties of undefined (reading 'length')

    at Object._renderGridContent (ej.web.all.min.js:10:3635231)

    at Object.render (ej.web.all.min.js:10:3623850)

    at Object._initGridRender (ej.web.all.min.js:10:3610608)

    at Object._checkDataBinding (ej.web.all.min.js:10:3573061)

    at Object._init (ej.web.all.min.js:10:3567449)

    at new <anonymous> (ej.web.all.min.js:10:22933)

    at n.fn.<computed> [as ejGrid] (ej.web.all.min.js:10:24190)

    at initControls (ej.unobtrusive.min.js:10:3013)

    at checkUnobtrusive (ej.unobtrusive.min.js:10:3323)

    at wd.init (ej.unobtrusive.min.js:10:3565)

_renderGridContent @ ej.web.all.min.js:10

render @ ej.web.all.min.js:10

_initGridRender @ ej.web.all.min.js:10

_checkDataBinding @ ej.web.all.min.js:10

_init @ ej.web.all.min.js:10

(anonymous) @ ej.web.all.min.js:10

n.fn.<computed> @ ej.web.all.min.js:10

initControls @ ej.unobtrusive.min.js:10

checkUnobtrusive @ ej.unobtrusive.min.js:10

wd.init @ ej.unobtrusive.min.js:10

(anonymous) @ EtichetteCartelliniSago:1637

j @ jquery-2.1.1.min.js:2

fireWith @ jquery-2.1.1.min.js:2

x @ jquery-2.1.1.min.js:4

(anonymous) @ jquery-2.1.1.min.js:4

load (async)

send @ jquery-2.1.1.min.js:4

ajax @ jquery-2.1.1.min.js:4

n.<computed> @ jquery-2.1.1.min.js:4

(anonymous) @ EtichetteCartelliniSago:1631

dispatch @ jquery-2.1.1.min.js:3

r.handle @ jquery-2.1.1.min.js:3

handleWindowTouchEnd_ @ sconosciuto


version: 20.4.0.44 ej1 classic

please... help me... i don't know where i can find the solution.


6 Replies
AD Alessandro Degola January 18, 2024 08:29 AM UTC

           $.post('@(Url.Action("UpdateThreading", "Product", new { indexOf = Model.IndexOf, area = "Working" }))', dataToPass)

                .done(function (x) {

                    hideProcessingMsg();

                    $('#status').html(x);


                    clearValidationErrors();

                    $("#thread@(Model.IndexOf)").focus();


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


                });


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 25, 2024 03:26 PM UTC

Hi Alessandro,


Greetings from Syncfusion.


We suspect that you are rendering Grid in Partial view with Unobtrusive move. 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()

</body>

</html>

 

 

Index.cshtml

 

 

@{Html.EJ().Tab("defaultTabs").Items(data =>

           {

               data.Add().ID("main").Text("Partial").ContentTemplate(@<div>

                @Html.EJ().Button("click").Text("Render Grid")

            </div>);

           }).Render();}

 

<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().Grid<SampleApp.Models.OrdersView>("FlatGrid")

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

         .. . .

)

 

namespace SampleApp.Controllers

{

    public class HomeController : Controller

    {

        [HttpGet]

        public ActionResult Productpartial()

        {

            var DataSource = new NorthwindDataContext().OrdersViews.ToList();

            ViewData["datasource"] = DataSource;

            return PartialView("_partial",ViewData);

        }

    }

}


Please refer to the following help document in MVC about partialView:-

https://help.syncfusion.com/aspnetmvc/grid/how-to#work-with-partial-views


Please get back to us if you need any further assistance.


Regards,

Farveen sulthana T


AD Alessandro Degola January 25, 2024 03:34 PM UTC

hello,


I've just added this some years ago...


<add key="UnobtrusiveJavaScriptEnabled" value="true" />

<add key="InitUnobtrusiveInScriptManager" value="true" />


I have the same page that is rendered, with the same partialviews.

everything works fine but if I have an additional partialview it gives this error, no sense.


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 31, 2024 04:04 PM UTC

Alessandro,


We have prepared sample by using Partial View but we are unable to replicate the problem at our end. Refer to the sample Link:-

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication7144360203.zip


In this sample we have placed Grid control in partial view inside EJ2 Dashboard control.


KB link:- https://support.syncfusion.com/kb/article/6290/how-to-render-our-controls-via-ajax-partialview-in-unobtrusive-true-mode?isInternalRefresh=False


After following the above sample still faced issue, Share us the following details.


  1. Complete Grid code details(Partial view page).
  2. Screenshot/Video Demo to replicate the issue.
  3. If possible replicate from above shared sample and revert us back.
  4. Web.Config file


Along with this, we also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive and lightweight.


We suggest you consider our following product page for more details.

https://www.syncfusion.com/aspnet-mvc-ui-controls/grid

Demo page for ej2 Grid: https://ej2.syncfusion.com/aspnetmvc/Grid/GridOverview#/bootstrap5                                                                                                                                       


Regards,
Farveen sulthana  T


JD John david March 21, 2024 07:26 AM UTC

The code initializes a widget using jQuery. It selects the HTML element with the id "status", and initializes the Essential JS widget on that element. This is commonly used for dynamic web applications.



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team March 26, 2024 01:49 PM UTC

Hi John David,


Greetings from Syncfusion.


Yes we use jQuery to initialze our controls(JS1 components). If you want to render Syncfusion components without JavaScript or jQuery controls initialization, we suggest to use our Blazor component where controls are rendered by C#.


Documentation Link:- https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app

Demo link:- https://blazor.syncfusion.com/demos/datagrid/overview


Regards,

Farveen sulthana T


Please get back to us if you need any further assistance.


Loader.
Up arrow icon