Combobox used in datagrid

[John Taylor]

Hi,

In the code below, I have a Combobox component named SupplierId in the datagrid edit dialog. Combobox works smoothly. In the results, I assign text: 'Name', value: 'Id', as seen in the code. The text field is a string type value, and the Id field going to the controller is a long type value.

  However, there are 2 problems that I cannot solve:

1-) When I want to edit a line in the Grid, the text field I show in the SupplierId field in the Grid is not set to the Combobox in the edit dialog, it shows empty. However, when I perform an update, it can send the Id value to the controller. How do I make the text: 'Name' information appear in the input of the combox while editing?

2-) When I set allowCustom: true, it should send the new string I wrote in the SupplierId input field to the controller, but since this field is long type in the controller, it receives an error. How can I send this entered new Supplier to the NewSupplier field in the model I sent in the controller?

Br,

<ejs-grid id="Grid" height="600" allowPaging="true" allowResizing="true" allowReordering="true" allowGrouping="true" gridLines="Both"

          toolbar="@(new List<string>() { "Add", "Edit", "Delete", "CsvExport" , "ExcelExport" })" allowTextWrap="true"

          allowFiltering="true" allowSelection="true" allowExcelExport="true" toolbarClick="toolbarClick" actionBegin="actionBegin" actionComplete="actionComplete">

    <e-data-manager url="/xx/GetClientExpenseList" adaptor="UrlAdaptor" insertUrl="/xx/InsertClientExpense" updateUrl="/xx/UpdateClientExpense"

                    removeUrl="/xx/DeleteClientExpense"></e-data-manager>

    <e-grid-filterSettings type="FilterBar"></e-grid-filterSettings>

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true"></e-grid-editSettings>

    <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>

    <e-grid-pagesettings pageSizes="@(new string[] { "50", "100", "All" })" pageSize="50"> </e-grid-pagesettings>

    <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>

    <e-grid-columns>

        <e-grid-column field="Id" headerText="Id" type="string" isPrimaryKey="true" isIdentity="true" visible="false" width="100"></e-grid-column>

...

        <e-grid-column field="Description" headerText="Description" type="string" validationRules="@(new { required=true})" filter=@(new { @operator="contains" }) width="100"></e-grid-column>

        <e-grid-column field="SupplierId" headerText="Supplier" dataSource="@ViewBag.ClientSuppliers" width="150" filter=@(new { @operator="contains" })

                       edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" foreignKeyField="Id" foreignKeyValue="Name"></e-grid-column>

        <e-grid-column field="NewSupplier" headerText="New Supplier" type="string" width="100" ></e-grid-column>

...

    </e-grid-columns>

</ejs-grid>

<script>

    var comboBoxobj;

    var element;

    function create(args) {

        element = document.createElement('input');

        return element;

    }

    function write(args) {

        var data = new ej.data.DataManager({

            url: "/ClientSupplier/GetSuppliersForCombobox",

            adaptor: new ej.data.UrlAdaptor,

            crossDomain: true

        });

        comboBoxobj = new ej.dropdowns.ComboBox({

            dataSource: data,

            value: args.rowData[args.column.field],

            query: new ej.data.Query().select(['Name', 'Id']).take(20),

            fields: { text: 'Name', value: 'Id' },

            placeholder: 'Select a Supplier',

            allowCustom: false,

            allowFiltering: true,

            filterType: 'StartsWith',

            showClearButton: true,

            autoFill: false,

        });

        comboBoxobj.appendTo(element);

    }

    function destroy() {

        comboBoxobj.destroy();

    }

    function read(args) {

        return comboBoxobj.value;

    }

    function toolbarClick(args) {

        if (args.item.id === this.element.id + '_excelexport') {

            this.excelExport();

        }

        if (args.item.id === this.element.id + '_csvexport') {

            this.csvExport();

        }

    }

    var secval1;

    var secval2;

    function actionBegin(args) {

        if (args.requestType === "beginEdit" || args.requestType === "add") {

            for (var i = 0; i < this.columns.length; i++) {

                if (this.columns[i].field == "NewSupplier") {

                    this.columns[i].visible = true;

                }

            }

        }

    }

    function actionComplete(args) {

        if (args.requestType === "save" || args.requestType === "cancel") {

            for (var i = 0; i < this.columns.length; i++) {

                if (this.columns[i].field == "NewSupplier") {

                    this.columns[i].visible = false;

                }

            }

        }

    }

</script>

[Hemanthkumar S]

Hi John Taylor,

Greetings from Syncfusion support.

Query 1: When I want to edit a line in the Grid, the text field I show in the SupplierId field in the Grid is not set to the Combobox in the edit dialog, it shows empty.

Using the provided information, we attempted to replicate the issue in the latest version of the Syncfusion Grid (v23.2.7). However, we were unable to reproduce the issue. For more detailed information, please refer to the screenshot and sample.

We recommend using the provided sample as a reference to resolve the issue you mentioned. If you are still experiencing the issue, we recommend attempting to reproduce it using the attached sample. If possible, please provide us with the version of the Syncfusion package you are using and a sample of the grid that reproduces the issue. This will assist us in better understanding and validating your query.

Query 2: How can I send this entered new Supplier to the NewSupplier field in the model I sent in the controller?

Before we proceed with providing a solution, we need some information to better understand the issue you are facing. Please provide us with the following details:

1. Provide a detailed description of your expected scenario.
2. Could you please provide a detailed description of the purpose or reason behind your attempt to send the new string (whose Id and Name are not present in the dataSource of the ComboBox) that you wrote in the SupplierId input field to the controller instead of Id value?
3. Provide information about the Id value for the new string that you wrote in the SupplierId input field or please verify that the new string that you wrote in the SupplierId input field acts act an Id value as well Name value.
4. Provide information about in which case you want to set the entered new Supplier to the NewSupplier field.
5. If possible, providing a video or screenshot demonstration would greatly aid in better understanding your purpose.

We appreciate your cooperation in providing us with the requested information, as it will help us provide a more effective solution to your query.

Regards,

Hemanth Kumar S

Attachment: Sample_8e94689.zip