1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid load is not defined.

Grid load is not defined.

I am trying to format the date on one of the column, but the script is not loaded probably. Even the project created from sample creator also has the same problem.
Please advice on how to proceed with this error., attach is the html and error generated.

Thanks,.
<div id = "ControlRegion">
    <ejs-grid id="DataGrid" 
              load="load"
              dataSource ="ViewBag.dataSource" 
              allowPaging="true"
              allowSorting="true"
           allowResizing="false" 
              allowFiltering="true"
           allowGrouping="false" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel","Search" })">
              <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
              <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
              <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
              <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" validationRules="@(new { required=true})" headerText="Order ID" minWidth="120" width="200" maxWidth="300" textAlign="Right"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" minWidth="8" width="200"></e-grid-column>
        <e-grid-column field="OrderDate" headerText=" Order Date" editType="datepickeredit" textAlign="Right" format="yMd" minWidth="8" width="200"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" allowResizing="true" editType="numericedit" textAlign="Right" format="C2" width="150" minWidth="8"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" minWidth="8" width="300"></e-grid-column>
        <e-grid-column field="ShippedDate" headerText="Shipped Date" textAlign="Right" format="yMd" allowResizing="false" width="200"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" minWidth="8" width="200"></e-grid-column>
        <e-grid-column field="Verified" displayAsCheckBox="true" type="boolean" headerText="Verified" editType="booleanedit" minWidth="8" width="200"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
</div>
 
@section Scripts{
    <script>
        function load() {
            this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; 
        }
    </script>
}


Attachment: ej2Core_ca62e00f.7z

3 Replies 1 reply marked as answer
MF Mohammed Farook J Syncfusion Team October 3, 2018 06:45 AM UTC

Hi Skye, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked your query and We suspect that you may refer the Essential JavaScript 2 Script Manager before the “@RenderSection” in your _layout.cshtml 
Page. If so, We suggest you to refer the Script Manager after the RenderSection. Please refer to the below code example and sample link. 
 
[_Layout.cshtml] 
<body> 
    <div class="container body-content"> 
        @RenderBody() 
    </div> 
 
    @RenderSection("scripts", required: false) 
    <ejs-scripts></ejs-scripts> 
     
</body> 
 
[index.cshtml] 
 
<div id="ControlRegion"> 
    <ejs-grid id="DataGrid" 
              load="load" 
              dataSource="ViewBag.datasource" 
              allowPaging="true" 
              allowSorting="true" 
              allowResizing="false" 
              allowFiltering="true" 
              allowGrouping="false" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel","Search" })"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" validationRules="@(new { required=true})" headerText="Order ID" minWidth="120" width="200" maxWidth="300" textAlign="Right"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" minWidth="8" width="200"></e-grid-column> 
            <e-grid-column field="OrderDate" headerText=" Order Date" editType="datepickeredit" textAlign="Right" format="yMd" minWidth="8" width="200"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" allowResizing="true" editType="numericedit" textAlign="Right" format="C2" width="150" minWidth="8"></e-grid-column> 
            .  .  . 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
@section Scripts{ 
    <script> 
        function load() { 
            // date format should be set to a date column. In your code it was set to a number column 
            this.columns[2].format = { type: 'date', format: 'dd/MM/yyyy' }; 
        } 
    </script> 
} 
 
 
 
 
Regards, 
J Mohammed Farook 
 


Marked as answer
SK Skye October 4, 2018 06:24 AM UTC

Hi  Mohammed,

Thanks for the reply.

It does solve my problem, thanks.

MF Mohammed Farook J Syncfusion Team October 4, 2018 07:16 AM UTC

Hi Skye, 
Thanks for your update. We are happy to hear that the provided solution helped you. 
Please let us know if you have any queries. 
 
Regards, 
J.Mohammed Farook 
 


Loader.
Up arrow icon