Current filter:
                                You should refresh the page.
                                  • [DevExpress Support Team: CLONED FROM T814910: Not able to bind the return values from Web Api to a Dropdown list and Datagrid]

                                    I could able to run most of the stuff in DropdownSingleSelection2 component but only two things that're missing now,

                                    After making selection the DropDownBox with embedded TreeView is not closing its items area, you know, its keeping it open, until I click on any other area, this is not correct behavior of dropdown, please help me how can I do it

                                    thanks a lot my friend. I am attaching the code on which you can work. 

                                1 Solution

                                Creation Date Importance Sort by

                                Hi,
                                Invoke the close() method when selection is changed in the inner TreeView to close the widget's popup. I also suggest you refer to Get a Widget Instance for more information on how to obtain the widget instance in React.

                                Show all comments
                                • Customer98204 09.19.2019

                                  How to call? Is this how? this.close(); You should be able to give me example on which object I should call that method. We are living in Object Oriented World, right? Without giving me which object should I call how would I know?

                                • Customer98204 09.19.2019

                                  I am getting this following error when i called the close method directly withing onSelectionChanged

                                  [JavaScript]
                                  syncTreeViewSelection(e) { this.setState({ treeBoxValue: e.value }); if (!this.treeView) return; if (!e.value) { this.treeView.instance.unselectAll(); } else { this.treeView.instance.selectItem(e.value); } close(); }

                                  i am getting the error as below:

                                  [JavaScript]
                                  ./src/components/DropdownSingleSelection2.jsx Line 156: Unexpected use of 'close' no-restricted-globals Search for the keywords to learn more about each error.

                                  that's why i told you, the examples and demos that your website is providing need more self explanatory - don't take me wrong please - that's how I feel.

                                • Customer98204 09.19.2019

                                  I am trying like anything, the intellisense is never giving me a method named close(). I am not sure why don't you guys help

                                • Customer98204 09.19.2019

                                  And I tried in the following way too, still it gives me error:

                                  [JavaScript]
                                  treeView_itemSelectionChanged(e) { this.setState({ treeBoxValue: e.component.getSelectedNodesKeys() }); employees.filter(["deptId", "=", e.node.itemData.deptId]) employees.load(); this.treeView.instance.close(); }

                                  the error is as below:

                                  [JavaScript]
                                  TypeError: this.treeView.instance.close is not a function DropdownSingleSelection2.treeView_itemSelectionChanged C:/Users/aaleem/Desktop/DevelopedProjects/ReactDevExtremeExample/ReactDevExtremeExample/ClientApp/src/components/DropdownSingleSelection2.jsx:202 199 | employees.filter(["deptId", "=", e.node.itemData.deptId]) 200 | employees.load(); 201 | > 202 | this.treeView.instance.close(); | ^ 203 | } 204 | 205 | dataGrid_onSelectionChanged(e) { View compiled

                                  Where and how should I call it any help would be very very helpful and simultaneously, i would like to do the same thing for the Dropdown as well which has Datagrid in it.

                                • Customer98204 09.19.2019

                                  Here I am putting the latest code, now only thing that's left is closing the dropdown items section once an item is selected, please help me with code or code snippet if possible, since example from the web site is not working for me thank you 

                                • Ilya (DevExpress Support) 09.20.2019

                                  Hi,
                                  In the answer, I posted a link to the close() method documentation. When you navigate to the page, you will see the object to which the method belongs. In our case, it is DropDownBox, not TreeView.
                                  Clipboard-File-1.png

                                  I also provided information on how to obtain a widget and invoke a method in React.
                                  Clipboard-File-2.png
                                  You can find the same information in the aforementioned documentation article under the See Also section.

                                  So, to accomplish this task, you need to do the following.

                                  1. Create a ref object that will point to your DropDownBox widget.
                                  2. In the treeView_itemSelectionChanged method, obtain the widget by the reference and invoke the close() method to close the dropdown.

                                  Please let me know if you need additional clarification.

                                • Customer98204 09.20.2019

                                  Can you please help me with code, since the close method doesn't exist on neither treeView nor dropdown - this time please help me with Code. I need it please.

                                • Customer98204 09.20.2019

                                  I have tried all options buddy, its taking too long, please help me by giving the code

                                • Ilya (DevExpress Support) 09.23.2019

                                  Hi,

                                  Thank you for the example. Having reviewed your code, I noticed that you did not assign a ref object to DropDownBox and did not invoke close(). Please double-check the Call Methods documentation describing this part. If this topic is not enough detailed, please let me know.

                                  Note that ref is a common part of the React API, and it is not directly related to our controls. I recommend you get familiar with basic concepts and patterns of React to use our React components (see the note). This will help you reduce the learning curve and speed up further development.

                                  Feel free to contact us if you need assistance in using our API.

                                • Customer98204 09.23.2019

                                  I have implemented that, but I have a question, if I want to add an element Datasource object, how can I do it? For example, to this departments object if I want to add an element in the beginning of the list like, value = '00' and displayText ='Select a Department' - so that whenever I select the 'Select a Department', it will not filter the Grid underneath this control.

                                  [JavaScript]
                                  const departments = new CustomStore({ loadMode: 'raw', key: 'deptId', load: function () { return fetch(departmentsUrl) .then(response => response.json()) .catch(error => { console.log(error); }); } });

                                  Any help please?

                                • Ilya (DevExpress Support) 09.24.2019

                                  Hi,
                                  I answered your inquiry at How to insert an item in CustomStore. Please check that thread.

                                • Customer98204 09.25.2019

                                  Yes it is resolved

                                • Customer98204 09.25.2019

                                  Forgot to tell you thank you

                                • Ilya (DevExpress Support) 09.26.2019

                                  You are always welcome!