How to add dropdown inside grid with filter and group

Question

Hi,In the codes I sent in the attachment, I added dropdown for dialog edit in the grid (CustomerID field). But how can I search and group dropdown values when I select dropdown. These are available in the documentation as dropdown features, but I couldn't see how to do it in the grid dialog. Br,Attachment: Razorpages_3f57a8e6.rar

Joseph Christ Nithin Issack · Accepted Answer

Hi John,

Query 4: I am using ASP.NET Core Identity. Normally, in .net core mvc, I can show or hide a field in the form using something like "@if (User.IsInRole("Admin"))". How can I hide a field in Grid's edit dialog by role?

Based on your query, you want to hide a field in the editDialog based on some condition. We have already discussed the same in the below documentation. Please refer the documentation for more details.

Documentiaton: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/dialog-editing#show-or-hide-columns-in-dialog-editing

Query 5: When adding or updating a record from the edit dialog in the grid, how can I post the data in an area outside the grid with the data in the edit dialog?

Based on your query, you want to get the updated data from the grid while saving it to the grid. Your requirement can be achieved by using the parameters of the ‘actionComplete’ event of the EJ2 Grid.

Please refer the below code example:

function actionComplete(args) {

if (args.rquestType == "save") {

// your actions here

}

</script>

John Taylor · Answer

I saw another method on the forum. Adding dropdown to GridColumn with edit property. This way I can do dropdown filtering and grouping. However, there is an error. There are Text and Value fields in dropdowns. Text is the customername, value is the customerId field. In the attached image1, the relevant customer is selected, but then the customerid, not the customername, is displayed on the grid as in image2. How can I solve this? I have attached the sample codes. (Please don't tell me to set customername to dropdown value. CustomerId is unique and I need it in controller classes.)

Br,

Attachment: datagridWithDropdown_6bcc6b9.rar

Rajapandiyan Settu · Answer

Hi John, Thanks for contacting Syncfusion support. Query #1: how can I search and group dropdown values when I select dropdown. You can achieve your requirement by using cellEditTemplate feature of Grid. In which you can customize the edit component as you want. cellEditTemplate: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template Query #2: the relevant customer is selected, but then the customerid, not the customername, is displayed on the grid as in image2. How can I solve this? In your code example, the dataSource is not provided on foreignKey column. This is the cause of reported behavior. We suggest to bind dataSource on that column to resolve this. Find the below code example and sample for your reference. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/razorpages_6_grid_foreignkey_edit960664408.zip Please get back to us if you need further assistance. Regards, Rajapandiyan S

John Taylor · Answer

Thanks. It works.

Rajapandiyan Settu · Answer

Hi John, 
 
We are glad that you have achieved your requirement with the provided solution. 

Please get back to us if you need further assistance. 

Regards, 
Rajapandiyan S

John Taylor · Answer

Hi,I want to use combobox with search in datagrid,  instead of dropdownlist. If user enter "A", it must be take first record  which contains "A". how can I do this? Thanks.

Harini Kannan · Answer

Hi John,We understand that you need to change the filtering from
dropdownlist to comboBox for a field. We have achieved your requirement by
rendering combo box in the write function and appended it to the input field.
We have attached the code snippet for your reference.

create: function (args) {
            var dd = document.createElement('input');
            dd.id = 'ShipCity';
            return dd;
          },
          write: function (args) {
            var comboBoxObject = new ej.dropdowns.ComboBox({
              //bind the data manager instance to dataSource property
              dataSource: window.hierarchyOrderdata,
              //bind the Query instance to query property
              //map the appropriate columns to fields property
              fields: { value: 'ShipCity' },
              //set the placeholder to ComboBox input
              placeholder: 'Find a City',
              //set the filterType to searching operation
              filterType: 'StartsWith',
              //sort the resulted items
              sortOrder: 'Ascending',
            });
            comboBoxObject.appendTo('#ShipCity');
          },

Please let us know if you need any further assistance.Regards,Harini K R

John Taylor · Answer

Hi,In the Write method, I added the combobox with the Viewbag datasource and it worked fine. But I want it to work with UrlAdaptor because the data size is too big and I want it to come as I type. However, when adding Datamanager as in the code below, the grid did not work. I get the error "Uncaught TypeError: this.adaptor.processQuery is not a function". What am I doing wrong?@{ var datas = new Syncfusion.EJ2.DataManager { Url = Url.Action("GetVendorInventoryItemsForVendorOrder", "VendorInventoryItem"), Adaptor = "UrlAdaptor" };}

function confirmApprove() { .... }

Joseph Christ Nithin Issack · Answer

Hi John, 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]

[HomeController.cs] public IActionResult UrlDatasource([FromBody] DataManagerRequest dm) { IEnumerable DataSource = new List(); int count = OrdersDetails.GetAllRecords().Cast

John Taylor · Answer

I tried it, but I have 3 more questions about it:

1- How can I send the information in the two fields on the screen as parameters to the UrlDatasource Action, which sends data for the ComboBox?

2- Is it possible to return a field other than text and value fields from the Combobox? For example; I am searching for a product from combobox, product name is text, productId Value, productCost Cost. And can I also send this productCost information to Action while saving?

3- How can I reload the page with the grid after the add or edit operation in the grid. It didn't happen when I redirected from the Add/Edit actions.

Thanks for your help.

Deepak Ramakrishnan · Answer

Hi John,  Query 1: How can I send the information in the two
fields on the screen as parameters to the UrlDatasource Action, which sends
data for the ComboBox?        You can send
additional parameters to the server side using the `query.addParams`
method.          Please
refer the below code example.

[Index.cshtml]
   
    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,
             
  query: new
  ej.data.Query().addParams('CustomerID', args.rowData['CustomerID'].toString()).addParams('EmployeeID',
  args.rowData['EmployeeID']),
             
  value: args.rowData[args.column.field],
             
  fields: { text: 'ShipCountry', value: 'ShipCountry' },
             
  placeholder: 'Select a Country',
             
  allowCustom: false,
             
  allowFiltering: true,
             
  filterType: 'StartsWith',
             
  change:(args)=> {
                 
  console.log(args.itemData);
             
  }
         
  });
         
  comboBoxobj.appendTo(element);
      }
   
  [HomeController.cs]
   
  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);
          }
   
  public class Data
      {
         
  public int take { get; set; }
         
  public
  List<Wheres> where { get; set; }

public string? CustomerID { get; set;
  }

public int? EmployeeID { get; set;
  }
      }

Please refer the below screenshots:Screenshot 1: Screenshot 2:Query 2: Is it possible to return a field other than text
and value fields from the Combobox? For example; I am searching for a product
from combobox, product name is text, productId Value, productCost Cost. And can
I also send this productCost information to Action while saving.  Yes, you can return values other than the field
required for the comboBox from the server side. Please refer the below
screenshots.Screenshot 1:   Screenshot 2:Query 3: How can I reload the page with the grid after
the add or edit operation in the grid. It didn't happen when I redirected from
the Add/Edit actions.     Before proceeding with the
solution, we would like you to share the below details so that we will be able
to provide a better solution.
 Please explain your
     requirement in detail.
 Confirm your requirement
     is the added/edited values not updated in the row?
 Explain the use case why
     you want to reload the entire page when adding/editing the row.
Regards,Joseph I.

John Taylor · Answer

Hi,Query 1: Ok. It works.Query 2:  I can return values other than the field required for the comboBox from the server side. But how I get these values with javascript? Because fields property only has the following fields. During the add/edit process, I want to take a field other than text and value in the json data from the combox query and send it to the Action during the save process.fieldsFieldSettingsModelThe fields property maps the columns of the data table and binds the data to the component.text - Maps the text column from data table for each list item.value - Maps the value column from data table for each list item.iconCss - Maps the icon class column from data table for each list item.groupBy - Group the list items with it’s related items by mapping groupBy field.Query 3:  ​In the example you gave, the text and value are the same. both ShipCountry.I want to do this:I need to get Text= SKU, Value= Product.Id in return value from my own model to combobox. I also set my column in the Grid to "<e-grid-column field="Product.Id" ". In Add/Edit I have to show the value of Text= SKU from combobox, I have to send Value= Product.Id to Action. After the save, I have to show the Text= SKU in the Grid.Br,

Joseph Christ Nithin Issack · Answer

Hi John,Query 1:   We are glad that the
provided solution fixed the issue.Query 2:  I can
return values other than the field required for the comboBox from the server
side. But how I get these values with javascript? Because fields property only
has the following fields. During the add/edit process, I want to take a field
other than text and value in the json data from the combox query and send it to
the Action during the save process.Based on your query, you want to get the values sent from
the server side in the client side. Your requirement can be achieved by using
the ‘change’ event of the EJ2 ComboBox where you can get the entire data
of the selected item using the ‘args.itemData’. Please refer the below code example:

comboBoxobj = new ej.dropdowns.ComboBox({
              dataSource:
  data,
              query: new ej.data.Query().addParams('CustomerID',
  args.rowData['CustomerID'].toString()).addParams('EmployeeID', args.rowData['EmployeeID']),
              value:
  args.rowData[args.column.field],
              fields: {
  text: 'ShipCountry', value: 'ShipCountry' },
              placeholder: 'Select a Country',
              allowCustom: false,
             
  allowFiltering: true,
              filterType: 'StartsWith',
              change:(args)=> {
                  // perform your action
  here
                  console.log(args.itemData);
              }
          });
          comboBoxobj.appendTo(element);

Query 3:  ​In the
example you gave, the text and value are the same. both ShipCountry. I want to
do this: I need to get Text= SKU, Value= Product.Id in return value from my own
model to combobox. I also set my column in the Grid to "<e-grid-column
field="Product.Id" ". In Add/Edit I have to show the value of
Text= SKU from combobox, I have to send Value= Product.Id to Action. After the
save, I have to show the Text= SKU in the Grid.   Based on your
query, you want to update another column based on the value selected from one column.
We have already documented a similar instance in the below documentation.
Kindly refer the below documentation for more details.Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing

John Taylor · Answer

Hi,Query 2: Ok, it worked.Query 3: Ok, it helped.Query 4: I am using ASP.NET Core Identity. Normally, in .net core mvc, I can show or hide a field in the form using something like "@if (User.IsInRole("Admin"))". How can I hide a field in Grid's edit dialog by role?Query 5: ​When adding or updating a record from the edit dialog in the grid, how can I post the data in an area outside the grid with the data in the edit dialog?Br,