Getting data with url adapter to the combobox control in the popup opened with dialog editing in the Grid

[John Taylor]

I tried a lot, but I could not fully perform the following operation. Can you share a code example that can do the following operations over a simple example?

  I want to get data with url adapter to the combobox control in the popup opened with dialog editing in the grid. When the user presses a letter, the data will be filtered with startswith from the relevant action method and the Text and Value values will return, but the Text value will be listed in the combox. When the relevant record is selected and saved, Value will be sent to the Save action. When the dialog closes after saving, Value will appear on the grid.

[Joseph Christ Nithin Issack]

Hi John,

   Greetings from Syncfusion support.

   Based on your query, you want to render a ComboBox component in the edit template of a column in the EJ2 Grid. You also want to bind the data using url adaptor to the combo box and filter the list with startswith filter operator. We have achieved the same using the below approach where we have rendered a combobox in the editemplate of the ShipCountry column and bind the data with url adaptor.

Please refer the below code example:

 

[Index.cshtml]

 

<div>

    <ejs-grid id="Grid" height="500" showColumnChooser="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "ColumnChooser"})">

        <e-data-manager url="/Home/UrlDatasource" adaptor="UrlAdaptor"></e-data-manager>

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

        <e-grid-columns>

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

            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>

            <e-grid-column field="EmployeeID" headerText="Employee ID" width="170"></e-grid-column>

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="170" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

 

 

<script>

    var comboBoxobj;

    var element;

 

    function create(args) {

        element = document.createElement('input');

        return element;

    }

 

    function write(args) {

        var data = new ej.data.DataManager({

            url: "/Home/ComboUrlDatasource",

            adaptor: new ej.data.UrlAdaptor,

            crossDomain: true

        });

        comboBoxobj = new ej.dropdowns.ComboBox({

            dataSource: data,

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

            fields: { text: 'ShipCountry', value: 'ShipCountry' },

            placeholder: 'Select a Country',

            allowCustom: false,

            allowFiltering: true,

            filterType: 'StartsWith',

        });

        comboBoxobj.appendTo(element);

    }

 

    function destroy() {

        comboBoxobj.destroy();

    }

 

    function read(args) {

        return comboBoxobj.value;

    }

 

</script>

 

[HomeController.cs]

 

 

        public IActionResult UrlDatasource([FromBody] DataManagerRequest dm)

        {

            IEnumerable DataSource =  new List<OrdersDetails>();

            int count = OrdersDetails.GetAllRecords().Cast<object>().Count();

                DataSource = OrdersDetails.GetAllRecords();

                DataOperations operation = new DataOperations();

                if (dm.Search != null && dm.Search.Count > 0)

                {

                    DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search

                }

                if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

                {

                    DataSource = operation.PerformSorting(DataSource, dm.Sorted);

                }

                if (dm.Where != null && dm.Where.Count > 0) //Filtering

                {

                    DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);

                }

                if (dm.Skip != 0)

                {

                    DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging

                }

                if (dm.Take != 0)

                {

                    DataSource = operation.PerformTake(DataSource, dm.Take);

                }

                return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);

        }

 

        public ActionResult ComboUrlDatasource([FromBody] Data dm)

        {

            var val = OrdersDetails.GetAllRecords();

            var Data = val.ToList();

            var count = val.Count();

            if (dm.where != null)

            {

                Data = (from cust in Data

                        where cust.ShipCountry.ToLower().StartsWith(dm.@where[0].value.ToString().ToLower())

                        select cust).ToList();

            }

            if (dm.take != 0)

                Data = Data.Take(dm.take).ToList();

            return Json(Data);

        }

 

 

Regards,

Joseph I.