Script error when using grid that has Dropdown edit column

[Gary Bettencourt]

I'm using the latest release, when I use a column with an edit type of dropdown, when I add a new record I get this error:

Uncaught TypeError: n.render[(this._id + "_JSONEditingTemplate")] is not a function

I'm not sure if it's related, but before this error I get this one when the grid loads:

Uncaught TypeError: Cannot read property 'ejPvtData' of undefined

Here's my client side code:

$("#ClassificationMapGrid").ejGrid({

                dataSource: ej.DataManager({ url: '@Url.Content("~/MappingData/Data")', updateUrl: '@Url.Content("~/MappingData/Update")', insertUrl: '@Url.Content("~/MappingData/Insert")', removeUrl: '@Url.Content("~/MappingData/Delete")', adaptor: new ej.UrlAdaptor() }),

                allowPaging: true,

                allowSorting: true,

                allowFiltering: true,

                filterSettings: { filterType: "excel" },

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                exportToExcelAction: '@Url.Content("~/MappingData/ExportExcel")',

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Search, ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.PrintGrid, ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                pageSettings: { pageSize: 15 },

                sortSettings: { sortedColumns: [{ field: "ClassificationName" }] },

                allowGrouping: false,

                columns: [

                        { field: "ClassificationID", isPrimaryKey: true, visible: false, headerText: "ID", width: 30 },

                        { field: "ClassificationName", headerText: "Name", width: 75, validationRules: { required: true } },

                        { field: "ClassificationDescription", headerText: "Description", width: 150, allowGrouping: false, validationRules: { required: true } },

                        { field: "ClassificationElementType", headerText: "Type", editType: ej.Grid.EditingType.Dropdown, width: 100, allowGrouping: false },

                        { field: "Status", headerText: "Status", width: 50, type: "boolean", editType: ej.Grid.EditingType.Boolean, allowGrouping: false }

                ]

            });

[Sellappandi Ramu]

Hi Gary Bettencourt,

Thanks for contacting Syncfusion support.

We have tested the reported issue at our end, the problem is occurring when using URLAdaptor with edit type as dropDown.

While setting the edit type as dropDown in URLAdaptor we need to bind the data source to dropDownList by using dataSource property. Because when we set the dropDown edit type, we need to binding the whole data for the particular field, but in URLAdaptor we are unable to get the Whole data of the particular field.

Please refer to the code example and sample,

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

.Datasource(ds => ds.URL("/Grid/Datasource").Adaptor(AdaptorType.UrlAdaptor))

.AllowSorting()

.AllowPaging()

.AllowFiltering()

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

.FilterSettings(filter => { filter.FilterType(FilterType.Menu); })

.ToolbarSettings(toolbar =>

        {

            toolbar.ShowToolbar().ToolbarItems(items =>

            {

                items.AddTool(ToolBarItems.Add);

                items.AddTool(ToolBarItems.Edit);

                items.AddTool(ToolBarItems.Delete);

                items.AddTool(ToolBarItems.Update);

                items.AddTool(ToolBarItems.Cancel);

            });

        })

.Columns(col =>

{

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Type("number").Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();

    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Left).Width(90).Add();

    col.Field("ShipName").HeaderText("ShipName").Type("string").Width(200).Add();

    col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Type("number").EditType(EditingType.Numeric).Format("{0:C}").Add();

    col.Field("ShipCity").HeaderText("ShipCity").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.dataSource2).Width(150).Add();

})
)

[Controller]

public ActionResult GridFeatures()

        {

            ViewBag.dataSource2 = City;

            return View();

        }

        public List<object> City

        {

            get

            {

                var Orders = new NorthwindDataContext().OrdersViews.Select(x=>x.ShipCity).Distinct().ToList();

                var ShipCity = new List<object>();

                foreach (var id in Orders)

                {

                    ShipCity.Add(new { value = id, text = id });

                }

                return ShipCity;

            }
        }

Sample: http://www.syncfusion.com/downloads/support/directtrac/147364/ze/Sample_1473641544620873

In the above sample we have iterate the ShipCity field in orders table and add to the list value.

Note: While binding the data to dropdown we need to specify the text and value property.

Regards,
Sellappandi R

[juan infante coronado]

Hi Gary Bettencourt,

Thanks for contacting Syncfusion support.

We have tested the reported issue at our end, the problem is occurring when using URLAdaptor with edit type as dropDown.

While setting the edit type as dropDown in URLAdaptor we need to bind the data source to dropDownList by using dataSource property. Because when we set the dropDown edit type, we need to binding the whole data for the particular field, but in URLAdaptor we are unable to get the Whole data of the particular field.

Please refer to the code example and sample,

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

.Datasource(ds => ds.URL("/Grid/Datasource").Adaptor(AdaptorType.UrlAdaptor))

.AllowSorting()

.AllowPaging()

.AllowFiltering()

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

.FilterSettings(filter => { filter.FilterType(FilterType.Menu); })

.ToolbarSettings(toolbar =>

        {

            toolbar.ShowToolbar().ToolbarItems(items =>

            {

                items.AddTool(ToolBarItems.Add);

                items.AddTool(ToolBarItems.Edit);

                items.AddTool(ToolBarItems.Delete);

                items.AddTool(ToolBarItems.Update);

                items.AddTool(ToolBarItems.Cancel);

            });

        })

.Columns(col =>

{

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Type("number").Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();

    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Left).Width(90).Add();

    col.Field("ShipName").HeaderText("ShipName").Type("string").Width(200).Add();

    col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Type("number").EditType(EditingType.Numeric).Format("{0:C}").Add();

    col.Field("ShipCity").HeaderText("ShipCity").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.dataSource2).Width(150).Add();

})
)

[Controller]

public ActionResult GridFeatures()

        {

            ViewBag.dataSource2 = City;

            return View();

        }

        public List<object> City

        {

            get

            {

                var Orders = new NorthwindDataContext().OrdersViews.Select(x=>x.ShipCity).Distinct().ToList();

                var ShipCity = new List<object>();

                foreach (var id in Orders)

                {

                    ShipCity.Add(new { value = id, text = id });

                }

                return ShipCity;

            }
        }

Sample: http://www.syncfusion.com/downloads/support/directtrac/147364/ze/Sample_1473641544620873

In the above sample we have iterate the ShipCity field in orders table and add to the list value.

Note: While binding the data to dropdown we need to specify the text and value property.

Regards,
Sellappandi R

ok

[Farveen Sulthana Thameeztheen Basha]

 Hi Juan, 

Thanks for your update. Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T