Problems with dropdownlist editor

Tagged: datagrid dropdownlist, datagrid dropdownlist cell editor

This topic has 12 replies, 2 voices, and was last updated 2 years, 8 months ago by admin.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
February 28, 2022 at 5:17 pm #102904
tullio0106@live.it
Participant
In my grid I’ve a field which uses a dropdown list as editor :

{ label: ‘Campo combo 1’, dataField: ‘C4’, template: ‘dropdownlist’, editor:{
template: ‘<smart-drop-down-list></smart-drop-down-list>’,
onInit(row, column, editor) {
const dropDownList = (editor.firstElementChild);
dropDownList.dataSource = [‘SEAVISION’, ‘AXIOMA’, ‘WAM’, ‘FAAC’];
dropDownList.dropDownAppendTo = ‘body’;
}}},

When I try to change the value I see a strange situation :

. first time I click to open the value I setted disappears and the dropdown doesn’t open

. when I click a second time the dropdown list opens

. I choose a value

. when i leave the field I det an error : t.replace is not a function

Tks

Tullio
- This topic was modified 2 years, 8 months ago by tullio0106@live.it.
February 28, 2022 at 6:59 pm #102906

admin
Keymaster

Hi,

Thank you for writing.

The onRender and getValue callbacks should be added with the custom grid editor here. Please, take a look at https://www.htmlelements.com/demos/grid/editing-cascading/ which shows how to implement a custom Dropdownlist cell editor in the datagrid.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

March 1, 2022 at 9:56 am #102912

tullio0106@live.it
Participant

A little bit better but some problems are present.

When I click on the button the dropdown doesn’t show and the content is cleared : I need to click another time in order to show the dropdown.

When the value is cleared, if I press tab I get an error : t is undefined.

Least but not last the dropdown apparence is different from your example and my implementation : the heigth of every element in the dropdown is much higher in my implementation but I didn’t set any css class.

Tks

March 1, 2022 at 11:29 am #102916

tullio0106@live.it
Participant

The topic is reproduced by an example.

How can I upload it to you ?

Tks

March 1, 2022 at 12:04 pm #102918

admin
Keymaster

Hi,

You can share a codepen example – https://codepen.io/

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

March 1, 2022 at 1:31 pm #102920

tullio0106@live.it
Participant

Here the codpen link : https://codepen.io/tullio0106/pen/JjOebye

This is the beverage.json data I used

[{
“C1”: “1”,
“C2”: “Hot Chocolate”,
“C4”: “SEAVISION”,
“C6”: “01/06/1954”,
“C5”: “true”,
“C3”: “14g”
}]

Tks

March 7, 2022 at 10:15 am #102933

tullio0106@live.it
Participant

Nobody can help about this topic ?

Tks

March 7, 2022 at 12:02 pm #102935

admin
Keymaster

Hi,

I cannot see a grid in the provided example.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

March 7, 2022 at 12:10 pm #102938

tullio0106@live.it
Participant

May be you looked to a wrong codpen address

This is the html content

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Grid Cell Editing Confirm Dialog Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" /> <link rel="stylesheet" type="text/css" href="../../../styles/demos.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="../../../../common/data.js"></script> </head> <body class="viewport"> <div class="demo-description"> <h1>Grid Cells Editing Confirm Tullio</h1> We implement the 'onCellUpdate' Grid function. When a cell value is edited, 'onCellUpdate' is called. That callback can be used for Client-Server validation of the Cell Editing. The function is implemented for the 'Quantity' column and we simulate Ajax call to a Web Server by using setTimeout and confirm the changes by calling the 4th argument of 'onCellUpdate', which is a function. When we call it with 'true', changes are confirmed. Otherwise, they are canceled. In this example, when the 'Quantity' is > 10, changes are confirmed. </div> <smart-grid id="grid"></smart-grid>  <script src="../../../common/data.js"></script> <script type="module" src="../../../source/modules/smart.grid.js"> </script> <script type="module" src="../../../source/modules/smart.button.js"> </script> <script type="module" src="index.js"> </script> </body> </html>

and the grid is there.

Tks

March 7, 2022 at 4:54 pm #102940

admin
Keymaster

Hi tulio,

I meant that the codepen provided is invalid because nothing is seen in it. The issue is that the editor is not implemented as in the sample I referred to and that the data source is invalid. While the sample binds to beverages.json, your columns do not and the Grid is empty without any data loaded. It looks like that you want to use the grid in unbound mode as a spreadsheet and add dropdownlist editor to it. Is that right?

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

March 8, 2022 at 8:46 am #102944

tullio0106@live.it
Participant

Sorry but I dont understand the point.

the file, named beverages.json shoult contain :

[{
“C1”: “1”,
“C2”: “Hot Chocolate”,
“C4”: “SEAVISION”,
“C6”: “01/06/1954”,
“C5”: “true”,
“C3”: “14g”
}]

as indicated before .

Using theese data, I tested it again, I see the grid with a row of data as expected.

Tks

March 24, 2022 at 3:42 pm #102990

tullio0106@live.it
Participant

No further help ?

March 24, 2022 at 3:49 pm #102992

admin
Keymaster

Hi,

This issue should have been already resolved in the latest version.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.