MVC Grid does not render when using "ej.grid.min.js" insted of "ej.web.all.min.js"

[Mohamed Hussain]

Hi,
I am trying to get me MVC grid to render, but I keep getting a javascript error. My code is as below

@section Styles {
    <link rel='nofollow' href="~/Content/ej/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />
    <link rel='nofollow' href="~/Content/ej/web/responsive-css/ejgrid.responsive.css" rel="stylesheet" />
}

@section scripts{   
    @Html.EJ().ScriptManager()
   
    @Scripts.Render("~/Scripts/ej/common/ej.core.min.js")
    @Scripts.Render("~/Scripts/ej/common/ej.data.min.js")   
    @Scripts.Render("~/Scripts/ej/web/ej.pager.min.js")
    @Scripts.Render("~/Scripts/ej/common/ej.scroller.min.js")
    @Scripts.Render("~/Scripts/ej/web/ej.waitingpopup.min.js")
    @Scripts.Render("~/Scripts/ej/web/ej.grid.min.js")
}


@(Html.EJ().Grid<SkyExpress.Web.ViewModels.NewsViewModel>("newsgrid")
    .Datasource(ds => ds.URL(Url.Action("NewsDataSource", "News"))
    .Adaptor(AdaptorType.UrlAdaptor))
    .AllowPaging()
    .AllowSorting()
    .AllowSearching()
    .SelectionType(SelectionType.Single)
    .EnableRowHover()
    .EnableAltRow()
    .AllowResizing()
    .AllowResizeToFit()
    .IsResponsive(true)
    .EnableResponsiveRow(true)
    .AllowTextWrap(true)
    //.EnablePersistence()
    .ClientSideEvents(e => { e.RecordDoubleClick("newsObject.onViewClick"); })
    .ClientSideEvents(e => { e.DataBound("newsObject.bindGridEditButtons"); })
    .ClientSideEvents(e => { e.ActionComplete("newsObject.bindGridEditButtons"); })
    //.ToolbarSettings(toolbar => { toolbar.ShowToolbar(true).ToolbarItems(items => { items.AddTool(ToolBarItems.Search); }); })
    .Columns(col =>
    {
        col.Field("NewsId").IsPrimaryKey(true).Visible(false).Add();
        col.Field("Title").HeaderText("Title").ClipMode(ClipMode.EllipsisWithTooltip).Width(200).Priority(1).Add();
        col.Field("NewsDate").HeaderText("News Date").Format("{0: MM/dd/yyyy}").Priority(2).Add();
        col.Field("AuthorName").HeaderText("Author").ClipMode(ClipMode.EllipsisWithTooltip).Priority(6).Add();
        col.Field("isPublished").HeaderText("Published").Visible(true).HeaderTextAlign(TextAlign.Left).Priority(3).TextAlign(TextAlign.Center).Add();
        col.Field("PublishedBy").HeaderText("Published By").ClipMode(ClipMode.EllipsisWithTooltip).Visible(true).Priority(6).Add();
        col.Field("PublishedDate").HeaderText("Published Date").Format("{0: MM/dd/yyyy}").Visible(true).Priority(3).Add();
        col.Field("isActive").HeaderText("Active").Visible(true).HeaderTextAlign(TextAlign.Left).Priority(3).TextAlign(TextAlign.Center).Add();
        col.HeaderText("Manage").Width(145).AllowTextWrap(false).TextAlign(TextAlign.Center).AllowSorting(false).Priority(1)
        //.Format("<div class='btn-group btn-group-sm' name='ManageButtons'><button type='button' name='btnViewModal' class='btn btn-primary' title='View'><i class=\"fa fa-eye\" aria-hidden=\"true\"></i>&nbsp;</button><button type='button' name='btnEditModal' class='btn btn-primary' title='Edit'><i class=\"fa fa-pencil-square-o\" aria-hidden=\"true\"></i>&nbsp;</button><button type='button' name='btnDeleteUser' class='btn btn-primary' title='Delete'><i class=\"fa fa-trash\" aria-hidden=\"true\"></i>&nbsp;</button></div>")
        .Format("<div class='btn-group btn-group-sm' name='ManageButtons'><button type='button' name='btnViewModal' class='btn btn-primary' title='View'><i class=\"fa fa-eye\" aria-hidden=\"true\"></i>&nbsp;</button><button type='button' name='btnEditModal' class='btn btn-primary' title='Edit'><i class=\"fa fa-pencil-square-o\" aria-hidden=\"true\"></i>&nbsp;</button></div>")
        .Add();
    })
)

The error I get on the client side is shown below and the grid does not render.



If i use @Scripts.Render("~/Scripts/ej/web/ej.web.all.min.js") then my grid works just fine. But I do not want to use "ej.web.all.min.js" as it is more than 10mb in size.

What am I doing wrong?

Thanks

[Mohamed Hussain]

I have figured this one out. I just needed to add a few more of the js files to get the grid to work. I built 2 bundles one with all common .js files that all most of the contrals use in common and one with the .js files that the grid needs to work.

bundles.Add(new ScriptBundle("~/bundles/ejCommon")

                .Include("~/Scripts/ej/common/ej.core.min.js",

                    "~/Scripts/ej/common/ej.globalize.min.js",

                    "~/Scripts/ej/common/ej.data.min.js",

                    "~/Scripts/ej/common/ej.touch.min.js",

                    "~/Scripts/ej/common/ej.draggable.min.js",

                    "~/Scripts/ej/common/ej.scroller.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/ejGrid")

                .Include("~/Scripts/ej/web/ej.button.min.js",

                    "~/Scripts/ej/web/ej.checkbox.min.js",

                    "~/Scripts/ej/web/ej.menu.min.js",

                    "~/Scripts/ej/web/ej.waitingpopup.min.js",

                    "~/Scripts/ej/web/ej.radiobutton.min.js",

                    "~/Scripts/ej/web/ej.datepicker.min.js",

                    "~/Scripts/ej/web/ej.dialog.min.js",

                    "~/Scripts/ej/web/ej.pager.min.js",                    

                    "~/Scripts/ej/web/ej.toolbar.min.js",

                    "~/Scripts/ej/web/ej.tooltip.min.js",

                    "~/Scripts/ej/web/ej.grid.min.js"));

[Jayaprakash Kamaraj]

Hi Mohamed, 

 

We are happy that the problem has been solved. 

 

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

 

Regards, 

 

Jayaprakash K.