jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Yavor Dashev 4 years, 1 month ago.

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

Author

Dropdown Editor in a grid with data from another grid Posts

June 22, 2021 at 2:39 pm Dropdown Editor in a grid with data from another grid #120417

Participant

Hi,

I have a website with two grids in one page that are connected via data.

In the first grid I can edit some data and I have a column that serves as a key and a colum that serves as a label if I want to make a lookup out of the data.

I have a second grid in which I have a dropdown list editor in one column. That column corresponds with the data from the first grid. I initialize everything when I load the page and it works fine. Now when I change ‘label’ field in the first grid, I have to update the corresponding display value in the second grid. I think that should not be a problem. But I also have to make sure the dropdownlist editor is updated (changing the name or adding a new value). And I do not know how this is possible.

I have used the same dataAdapter for the grid and the lookup, if I change the name in the first grid, I can see the changed value in the dataAdapter. I have used both the createEditor and initEditor column function to set the source of the editor, but the dropdown does not update.

Is what I want possible and if so, could you point me in the right direction?

Best Regards
Klaus H

June 23, 2021 at 9:25 am Dropdown Editor in a grid with data from another grid #120425

Klaus H

Participant

Hi,

quick update:

One solution is to react to a change in data in the first grid by saving the data from the second grid, create a new source for the grid, create a new adapter for the dropdown, destroy the grid und create the grid again. Maybe not the best solution, but it works.

June 25, 2021 at 10:32 am Dropdown Editor in a grid with data from another grid #120445

Yavor Dashev

Participant

Hi Klaus,

Thank you for the detailed information!
I have prepared a code snippet for you which if I have understood your inquiry correctly achieves the functionality you need.

           var dataAdapter = new $.jqx.dataAdapter(source);

         
            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                enabletooltips: true,
                columns: [
                  { text: 'ID ', datafield: 'id',  width: 250 },
                  { text: 'Name', datafield: 'name', width: 250
                }             
                ]
            });
            
            $("#grid2").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                sortable: true,
                enabletooltips: true,
                columns: [
                    { text: 'Name', datafield: 'name', width: 250, columntype:'dropdownlist',
                    } ,
                    { text: 'Calories', datafield: 'calories', width: 180 },
                    { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                    { text: 'Protein', datafield: 'protein', minwidth: 120 }
              ]
            });
            $("#grid").on('cellvaluechanged', function (event) 
                    {
                        // event arguments.
                        var args = event.args;
                        // column data field.
                        var datafield = event.args.datafield;
                        // row's bound index.
                        var rowBoundIndex = args.rowindex;
                        // new cell value.
                        var value = args.newvalue;
                        // old cell value.
                        var oldvalue = args.oldvalue;

                        if (datafield == 'name' && oldvalue !== null) {
                            $('#grid2').jqxGrid('refresh');

                        
                        }
                        else {
                            newvalue = oldvalue
                        }
                    });

        });
    </script>
</head>
<body class='default'>
        <div id="grid"></div>
        <br>
        <div id="grid2"></div>

I know its a bit long but for this use case was inevitable.

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.