Dropdown list in grid column

[Muzaffer Birben]

Hi,

I have two questions:

1.

I am trying to add a dropdown list to the grid column but it says no records found. I want to read the value and show the text. What am I missing here?

2.

I am dragging a record from the grid(SyncGrid) and drop it on the schedule(SyncSchedule). I am using Grid.rowDrag/Grid.rowDrop. When I am dragging a record from the grid, I want to highlight a resource on the schedule depending on the values of the record. For example, if the date of the record is not today, I want the resource1 to be orange( the entire column) when I hover over resource1. Does SyncSchedule controller provide support for this feature?

[Rajapandiyan Settu]

Hi Muzaffer, 

Thanks for contacting Syncfusion support. 

Query #1:  I am trying to add a dropdown list to the grid column but it says no records found. I want to read the value and show the text. What am I missing here? 

We have validated the provided code example and found that the ‘value’ field in the edit params is not same as column filed name(TimeDue). 

In EJ2 Grid, dropdownedit in a column is based on the column’s field name to map the correct data in dropdown. So it is necessary to provide dropdown API “value” as column field name in the edit params when using custom dataSource.  

Note : To use custom datasource in the dropdownlist we must include Query property in the edit params. 

Please refer below code example for more information. 

  

var country = [ 

    { ShipCountry: 'Germany', countryId: '1' }, 

    { ShipCountry: 'Brazil', countryId: '3' }, 

    { ShipCountry: 'France', countryId: '4' }, 

    { ShipCountry: 'Belgium', countryId: '5' }, 

    { ShipCountry: 'Switzerland', countryId: '6' }, 

    { ShipCountry: 'Mexico', countryId: '8' }, 

    { ShipCountry: 'Austria', countryId: '12' }, 

    { ShipCountry: 'Spain', countryId: '9' }, 

    { ShipCountry: 'USA', countryId: '14' }, 

    { ShipCountry: 'Finland', countryId: '16' }, 

    { ShipCountry: 'Sweden', countryId: '18' } 

]; 

ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar); 

var grid = new ej.grids.Grid({ 

----- 

    columns: [ 

        { field: 'ShipCountry', headerText: 'Ship Country', width: 120, editType: 'dropdownedit', edit: {  

                params: {  

                    query: new ej.data.Query(), 

                    dataSource: country,  

                    fields: { value: 'ShipCountry', text: 'countryId' }, // value must be same as the column field 

                    actionComplete: ()=>false 

                }  

            } 

        } 

    ], 

    height: 273 

}); 

grid.appendTo('#Grid'); 

Sample : https://stackblitz.com/edit/mk6iwm-mtoage?file=index.html 

UG : https://ej2.syncfusion.com/javascript/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/ 

Query #2 : When I am dragging a record from the grid, I want to highlight a resource on the schedule depending on the values of the record. 

We are unable to understand your requirement clearly at our end, so can you please explain your requirement in detail with some pictorial representation. 

Please confirm whether you want to highlight the schedule column based on the drag record value? 

Regards, 

Rajapandiyan S

[Muzaffer Birben]

Hi Rajapandiyan,

1. I have fixed my code as in sample. It shows the id instead of the frame but when I try to edit the cell, it shows the time frames. I am getting the id from server and based on the id, I am trying to show the time frame.     

2. Yes, I want to highlight the schedule column based on the drag record value. For example, I have a list of classes on the grid. I have a math class for tomorrow and I am scheduling for today. When I drag the record for the math class, I want to highlight the resource column to show that it can't be dropped onto the scheduler since that record is for tomorrow.  

I hope it make sense

[Praveenkumar Gajendiran]

Hi Muzaffer,

Thanks for your update. 

Query#1:

By default, Grid dropdownedit value will be update based on the dropdown “value” API . Dropdown “text” API is only for display purpose. So please provide the dropdown API “value” name as column field name in the edit params when using custom dataSource.    

 

If you want to display field value from one dataSource and processed the value from another dataSource.  This is your requirement, then we have suggest to use the ‘ForeignKey-Columns’ feature of Grid. Please find the demo and documentation for your reference. 

 

Demo : https://ej2.syncfusion.com/javascript/demos/#/material/grid/foreign-key.html 

Documentation : https://ej2.syncfusion.com/javascript/documentation/grid/columns/#foreign-key-column 

 

If we misunderstood your requirement, please get back to us with exact requirement of this and which data value exactly you want to display and update for further assistance. 

Query#2: 

 

Still, We could not understood your requirement clearly, so could you please share the below details which will be helpful to provide better solution on this. 

1. Explain your exact requirement with video demonstration or pictorial representation.
2. We have separate schedule component, Is your requirement is related to schedule component?.
   
   Please check the below link for schedule component and grid component.
   
   Demo Link: https://ej2.syncfusion.com/javascript/demos/#/material/schedule/default.html
                        https://ej2.syncfusion.com/javascript/demos/#/material/grid/grid-overview.html

Let us know if you have any concerns.

Regards,
Praveenkumar G 

[Muzaffer Birben]

Hi,

I am having an issue with the dropdown list in the grid. there is a dynamic dropdown list. The items of the list are updated based on user's choice (I am using a different data manager for the dropdown list). First problem is that it shows the code value instead of the text value. Second problem is when I double click on a row to edit for the first time, the list is accurate but when I double click another row to edit, the list disappears. Third problem is that the dropdown icon doesn't show up on edit mode even I set showDropDownIcon true.

 field: "CountryID", headerText: "Country", editType: "dropdownedit", edit: {

                    params: {

                        query: new Query(), dataSource: this.CountryDataManager, fields: { value: "Code", text: "Description", groupBy:"Continent" },

                        width: 300,

                        showDropDownIcon: true,

                    }

                }

[Rajapandiyan Settu]

Hi Muzaffer, 

Thanks for your update. 

We are tried to reproduce the reported behavior, but it was unsuccessful at our end. changing the dropdown dataSource is working fine, please find the below sample for your reference. 

Sample: https://stackblitz.com/edit/d3mpne-r5aund?file=index.js  

To show the clear icon in the dropdown, enable the showClearButton in the dropdown. Refer to the below code example and sample for more information. 

showClearButton Dropdown API: https://ej2.syncfusion.com/javascript/documentation/api/drop-down-list/#showclearbutton  

 params: { 

                        query: new ej.data.Query(), dataSource: data2, fields: { value: "CustomerID", text: "Position" }, 

                        value:"A", 

                        width: 300, 

                        showClearButton: true, 

                    } 

If you still face the same problem, please share the below details to validate further with this. 

1. Share the full grid code you have used.
2. How could you dynamically changed the dataSource in the dropdown.
3. Share the video demo of the reported problem.
4. Share the script version of syncfusion packages.
5. If possible, share the issue reproducible sample or make the issue in the given sample.

 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S