DropDownEdit with databound items

[Michael J Norman]

I am having trouble getting the dropdownedit type to work correctly for columns in a DataGrid.  I have tried using the code provided in the documentation, but I only see the standard Dropdownlist content which are the unique items for that column.

Below is what I have--

@{

    var editParams = new { @params = new { value = "Germany" } };

}

<ejs-grid id="grid" height="600" dataSource="@ViewBag.datasource" allowFiltering="true" dataBound="dataBound" enableVirtualization="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List() { "ExcelExport" })"   >

    <e-grid-filterSettings type="Menu">e-grid-filterSettings>

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true">e-grid-editSettings>

    <e-grid-columns>

        <e-grid-column width="100" field="Id" isPrimaryKey="true" headerText="@Html.DisplayNameFor(model => model.Id)" >e-grid-column>

          ...

        <e-grid-column width="100" field="Message" headerText="@Html.DisplayNameFor(model => model.Message)" editType="dropdownedit" edit=editParams >e-grid-column>

      e-grid-columns>

ejs-grid>

This produces the following instead of just "Germany" from the editParams (image blurred)

[Thavasianand Sankaranarayanan]

Hi Michael, 

Greetings from Syncfusion support. 

From analyzing your query, we understand you like to use custom datasource in a dropdownlist.
We have already discussed about your requirement in our documentation. Please find the below documentation link for more information. 

Documentation Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/#provide-custom-data-source-and-enabling-filtering-to-dropdownlist 

If we understood anything wrongly please get back to us with brief explanation. 

Regards, 

Thavasianand S. 

[Michael J Norman]

Ok this works.  It is confusing as to why the provided example in the main documentation does not work, https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-type-and-its-params, but that is a separate matter.

On a related note, if I include a column with command buttons, I am no longer able to edit the row, and see this error in the console--

Uncaught TypeError: Cannot read property 'startIndex' of undefined

Code is as follows--

List<object> commands = new List<object>();

    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });

    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });

    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });

    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });

<e-grid-column headerText="Manage Records" width="120" commands=commands></e-grid-column> 

[Thavasianand Sankaranarayanan]

Hi Michael, 

Query#1: It is confusing as to why the provided example in the main documentation does not work. 

 

Based on the documentation we have prepared the sample it works fine in our end. Please find the below video link for more information.

Sample demo : https://www.syncfusion.com/downloads/support/forum/147474/ze/Commandcol875682802.zip 

Query#2: if I include a column with command buttons, I am no longer able to edit the row. 

 

We have prepared a sample with command columns. Please find the below code example and sample link for more information. 

 

@{ 

    List<object> commands = new List<object>(); 

    commands.Add(new { type = "Edit", text="Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 

} 

 

 

<div id="ControlRegion"> 

    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" height="310"> 

        <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" edit=editParams editType="dropdownedit"></e-grid-column> 

 

                <e-grid-column headerText="Manage Records" width="120" commands=commands> 

                </e-grid-column> 

</e-grid-columns> 

    </ejs-grid> 

    

</div> 

Sample: https://www.syncfusion.com/downloads/support/forum/147474/ze/comm1072830145.zip 

Regards, 

Thavasianand S. 

[Michael J Norman]

Thanks for the sample.  It works as you sent it, however if I change the grid to "enableVirtualization=true" instead of "allowPaging=true" the sample breaks, and Chrome console gives the below error when you attempt to edit a row--

"Uncaught TypeError: Cannot read property 'OrderID' of undefined"

Would you be able to update this sample to enable virtualization as well as how to persist the data back to the server?  I went through the samples, and this is the closest it looks to what I'm trying to achieve, https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/perform-crud-operation-using-anti-forgery-token/, however I have not been able to make it work.  I think my problem is the path for the Controllers listed in the data-manager line since I never see a postback to the server.

<e-data-manager json="@ViewBag.data" adaptor="RemoteSaveAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager>

[Thavasianand Sankaranarayanan]

Hi Michael , 

Sorry for the inconvenience. 

From analyzing your query ,You like to do crud actions in Virtualization feature but currently we don’t have support for editing and virtualization feature combination. We have added this feature request to our database. You can now track the current status of this feature request here page https://www.syncfusion.com/feedback/4981/provide-the-support-for-batch-editing-with-virtualization. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.  

 

You can also communicate with us regarding the open features any time using our Feature Report page  

https://www.syncfusion.com/feedback/4981/provide-the-support-for-batch-editing-with-virtualization. 

Regards, 

Thavasianand S.