67
Views
4
Comments
[DataGrid]How to dynamically update a Dropdown list
Application Type
Reactive

I want to dynamically change specific Dropdown choices.

I have written the following JavaScript, and in the ClientAction, I am retrieving a Jsonized TextList of the Dropdown list.

What is currently not working is that the dropdown list is not updated when dataMap = Map is performed in the callback process of the ClientAction.


Could you please tell me how to correctly update the retrieved values with dataMap = Map?


I am translating from Japanese and apologize if it is not clear.

Thank you in advance.


let grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;


grid.beginningEdit.addHandler((s, e) => {

    var c = s.columns[e.col];

    var item = s.rows[e.row].dataItem;

    let Map;

    if (c.binding == 'Form.Test') {

        $actions.GetDropdownList(FilterValue1).then(function(result) {

            Map = JSON.parse(result.DropdownList );

            c.dataMap = Map;

            $resolve();

        });

    }

});

2024-05-14 06-49-08
Karnika-EONE

Hi @naoto nakada ..can u upload the Oml for more explanation?

Or try this code(May be after updating the list not getting refreshed so i add refresh ).


let grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;


grid.beginningEdit.addHandler((s, e) => {

    var c = s.columns[e.col];

    var item = s.rows[e.row].dataItem;


    if (c.binding == 'Form.Test') {

        // Prevent the grid from entering edit mode immediately

        e.cancel = true;


        $actions.GetDropdownList(FilterValue1).then(function(result) {

            let Map = JSON.parse(result.DropdownList);

            c.dataMap = Map;


            // Refresh the specific cell or column

            grid.refresh(true); // Refresh the entire grid (or use a more specific refresh method if available)


            // Manually trigger the edit mode again

            grid.editCell(e.row, e.col);


            $resolve();

        }).catch(function(error) {

            console.error("Error fetching dropdown list:", error);

            $resolve();

        });

    }

});

Best Regards

Karnika.K

Thanks.


UserImage.jpg
naoto nakada

@Karnika-EONE 

Thanks for the reply!

I checked with the code you shared,

I got an error saying grid.editCell is not a function.


How can I resolve this issue?


Sorry for the inconvenience, but please check it out.

2024-05-14 06-49-08
Karnika-EONE

Hi @naoto nakada ,

can u share the oml,it is more helpful.

try this code

let grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;


grid.beginningEdit.addHandler((s, e) => {

    var c = s.columns[e.col];

    var item = s.rows[e.row].dataItem;


    if (c.binding == 'Form.Test') {

        // Prevent the grid from entering edit mode immediately

        e.cancel = true;


        $actions.GetDropdownList(FilterValue1).then(function(result) {

            let Map = JSON.parse(result.DropdownList);

            c.dataMap = Map;


            // Refresh the specific cell or column

            grid.refresh(true); // Refresh the entire grid (or use a more specific refresh method if available)


            // Try to programmatically re-select and enter edit mode

            setTimeout(() => {

                grid.selectCell({ row: e.row, column: e.col });

                grid.beginningEdit.raiseEvent({ row: e.row, column: e.col });

            }, 0);


            $resolve();

        }).catch(function(error) {

            console.error("Error fetching dropdown list:", error);

            $resolve();

        });

    }

});



UserImage.jpg
naoto nakada

@Karnika-EONE
Sorry, we are unable to provide oml because we are checking in your environment.

We are unable to provide oml because we are checking in your environment.


I deleted grid.editCell(e.row, e.col); and checked again,

Dropdown listings no longer show anything.


$actions.GetDropdownList(FilterValue1).then(function(result) {... }); If I do this within $actions.GetDropdownList(FilterValue1).then(function(result) {...); the dropdown list seems to be empty.

Perhaps, but if I do it within $actions.GetDropdownList(FilterValue1).then(function(result) {... }); does not seem to update the set information when done within $actions.


$actions.GetDropdownList(FilterValue1).then(function(result) {... });; can the list retrieved by $actions.GetDropdownList(FilterValue1).then(function(result) {...}); be put outside in a form like resolve(Map);?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.