Hello I am using syncfusion grid.
When grid loads for a few seconds (from 2 to 20 ) when it tries to click add button it throws me below error in console. after some time this error is is disappeared. but from my understanding, it looks like the issue is that javascript is not loaded in that time. and also i realize that this is only happened when you use DropdownEdit or dropdown in editfrom for column.
Uncaught TypeError: n.render[(this._id + "_JSONDialogEditingTemplate")] is not a function
at Object._add (ej.web.all.min.js:10)
at Object.sendDataRenderingRequest (ej.web.all.min.js:10)
at Object._processBindings (ej.web.all.min.js:10)
at Object._startAdd (ej.web.all.min.js:10)
at Object._toolbarOperation (ej.web.all.min.js:10)
at Object._toolBarClick (ej.web.all.min.js:10)
at Object._trigger (ej.web.all.min.js:10)
at Object._onItemClick (ej.web.all.min.js:10)
at HTMLLIElement. (ej.web.all.min.js:10)
at HTMLLIElement.dispatch (jquery-3.1.1.min.js:3)
Below is my view code
@(Html.EJ().Grid("Products")
.Datasource(datasource => datasource.URL(@Url.Action("Search")).UpdateURL(@Url.Action("Update")).InsertURL(@Url.Action("Create"))
.Adaptor(AdaptorType.UrlAdaptor))
.EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowEditOnDblClick(false).EditMode(EditMode.InlineForm).ShowConfirmDialog(true).TitleColumn("Code"); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
});
})
.AllowFiltering()
.AllowSorting()
.SortSettings(builder => builder.SortedColumns(col => col.Field("Code").Direction(SortOrder.Ascending).Add()))
.AllowPaging()
.AllowResizing()
.EnableAltRow()
.EnableHeaderHover()
.EnableRowHover(false)
.FilterSettings(filter => { filter.FilterType(FilterType.Excel).FilteredColumns(col => col.Field("Available").Operator(FilterOperatorType.Equals).Value("Enabled").Add()); })
.Columns(col =>
{
col.Field(x => x.IsVerified)
.HeaderText("JS")
.Template("")
.TextAlign(TextAlign.Center).AllowEditing(false)
.Width(45)
.Add();
col.Field(x => x.Id)
.HeaderText("Id")
.TextAlign(TextAlign.Left).IsPrimaryKey(true).AllowEditing(false).Visible(false)
.Width(100)
.Add();
col.Field(x => x.Code)
.HeaderText("Code")
.TextAlign(TextAlign.Left)
.ValidationRules(v => v.AddRule("required", true))
.Width(100)
.Add();
col.Field(x => x.Description)
.HeaderText("Description").AllowEditing(false)
.TextAlign(TextAlign.Left)
.Width(100)
.Add();
col.Field(x => x.Handing)
.HeaderText("Handing")
.TextAlign(TextAlign.Left).DataSource(ViewBag.LstHandings).EditType(EditingType.DropdownEdit)
.Width(45)
.Add();
col.Field(x => x.Range)
.HeaderText("Range")
.TextAlign(TextAlign.Left).ValidationRules(v => v.AddRule("required", true)).DataSource(ViewBag.LstRanges).EditType(EditingType.DropdownEdit)
.Width(120)
.Add();
col.Field(x => x.Rule)
.HeaderText("Rule")
.TextAlign(TextAlign.Left).ValidationRules(v => v.AddRule("required", true)).EditType(EditingType.DropdownEdit)
.Width(100)
.Add();
col.Field(x => x.Available)
.Width(70)
.HeaderText(" ")
.CssClass("available")
.TextAlign(TextAlign.Left).AllowEditing(false)
.Add();
col.HeaderText("Actions")
"{{if IsActive}}" +
"{{else}}" +
"{{/if}}"
).AllowEditing(false)
.TextAlign(TextAlign.Center)
.Width(140).
Add();
})
.ClientSideEvents(events =>
{
events.ActionFailure("mrp.products.actionFailure");
events.ActionComplete("mrp.products.actionComplete");
events.DataBound("mrp.products.dataBound");
events.RowDataBound("mrp.products.rowDataBound");
})
)
And Controller is
public ActionResult Index()
{
List lstRanges = _rangesService.GetAllRanges().ToList().Select(dc => new dropDown { text = dc.Name, value = dc.Id.ToString(), }).ToList();
ViewBag.LstHandings = _productsService.GetAllHandings().ToList().Select(dc => new dropDown { text = dc, value = dc, }).ToList();
ViewBag.LstRanges = lstRanges;
return View();
}
[HttpPost]
public ActionResult Search(DataManager dataManager)
{
var products = _productsService.GetAllProducts().ToList();
var data = ApplySearch(dataManager, products, out var count);
return Json(new { result = data, count });
}
[HttpPost]
public ActionResult Update(UpdateProductViewModel value)
{
var product = _productsService.GetProductById(value.Id);
if (product == null)
return InvalidRequest();
var existingProduct = _productsService.GetProductByCodeAndDifferentId(value.Code, value.Id);
if (existingProduct != null)
{
HttpContext.Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
return Json(new { Success = false, Error = "Code must be unique!" }, JsonRequestBehavior.AllowGet);
}
Mapper.Map(value, product);
var result = _productsService.UpdateProduct(product);
if (result.Success)
return Json(new { Success = true }, JsonRequestBehavior.AllowGet);
return FalseAjaxResponse();
}
[HttpPost]
public ActionResult Create(CreateProductViewModel value)
{
var product = Mapper.Map(value);
product.IsActive = true;
product.IsVerified = false;
product.DateCreated = DateTime.UtcNow;
product.DateUpdated = DateTime.UtcNow;
var existingProduct = _productsService.GetProductByCode(value.Code);
if (existingProduct != null)
{
HttpContext.Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
return Json(new { Success = false, Error = "Code must be unique!" }, JsonRequestBehavior.AllowGet);
}
var result = _productsService.CreateProduct(product);
return Json(new { Success = true }, JsonRequestBehavior.AllowGet);
}
In bundleconfig, I have below things loaded from sycnfusion
// jQuery
bundles.Add(new ScriptBundle("~/js/main").Include(
"~/Assets/js/libs/jquery-3.1.1.min.js",
"~/Assets/js/libs/bootstrap.min.js",
"~/Assets/js/libs/plugins/validate/jquery.validate.min.js",
"~/Assets/js/libs/plugins/validate/jquery.validate.unobtrusive.min.js",
"~/Assets/js/libs/plugins/unobtrusive/jquery.unobtrusive-ajax.min.js",
"~/Assets/js/libs/plugins/jquery-ui/jquery-ui.min.js",
"~/Assets/js/libs/plugins/metisMenu/metisMenu.min.js",
"~/Assets/js/libs/plugins/pace/pace.min.js",
"~/Assets/js/libs/plugins/slimscroll/jquery.slimscroll.min.js",
"~/Assets/js/libs/plugins/datapicker/bootstrap-datepicker.js",
"~/Assets/js/libs/plugins/toastr/toastr.min.js",
"~/Assets/js/libs/plugins/select2/select2.full.min.js",
"~/Assets/js/libs/plugins/moment/moment.min.js",
"~/Assets/js/app/inspinia.js",
"~/Assets/js/app/validators.js",
"~/Assets/js/app/app.js",
"~/Assets/js/app/util.js"
));
bundles.Add(new ScriptBundle("~/js/syncfusion").Include(
"~/Assets/js/libs/jsrender.min.js",
"~/Assets/js/libs/plugins/ej/ej.web.all.min.js",
"~/Assets/js/libs/plugins/ej/ej.unobtrusive.min.js"
