Current filter:
                                You should refresh the page.
                                  • Hi,
                                    I am using DevExtreme 19.1, i am not sure if it is 19.1.3 or 19.1.8, but its DevExtreme React.
                                    I am trying to bind data that's returning from Web Api to a Dropdown list and another Web api to a Datagrid, and selection of Dropdown value sets the data in the Grid. I am following the example of Dropdown Single Selection, but that is not binding the , I really need some help, any help would be greatly helpful thanks my friend. The example that I am following is this: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownBox/SingleSelection/React/Light/ .
                                    My code is as below:

                                    [JavaScript]
                                    import React from 'react'; import { DropDownBox, TreeView } from 'devextreme-react'; import DataGrid, { Selection, Paging, FilterRow, Scrolling } from 'devextreme-react/data-grid'; import CustomStore from 'devextreme/data/custom_store'; import 'whatwg-fetch'; import classNames from 'classnames'; class DropdownSingleSelection extends React.Component { constructor(props) { super(props); this.treeView = null; //this.treeDataSource = this.makeAsyncDataSource('treeProducts.json'); this.treeDataSource = this.getAsyncDepartmentDataSource('https://localhost:44396/api/department'); //this.gridDataSource = this.makeAsyncDataSource('customers.json'); this.treeDataSource = this.getAsyncEmployeeDataSource('https://localhost:44396/api/employee'); this.state = { treeBoxValue: '1_1', gridBoxValue: 3, gridSelectedRowKeys: [3] }; this.treeView_itemSelectionChanged = this.treeView_itemSelectionChanged.bind(this); this.syncTreeViewSelection = this.syncTreeViewSelection.bind(this); this.syncDataGridSelection = this.syncDataGridSelection.bind(this); this.dataGrid_onSelectionChanged = this.dataGrid_onSelectionChanged.bind(this); this.treeViewRender = this.treeViewRender.bind(this); this.treeView_onContentReady = this.treeView_onContentReady.bind(this); this.dataGridRender = this.dataGridRender.bind(this); } makeAsyncDataSource(jsonFile) { return new CustomStore({ loadMode: 'raw', key: 'ID', load: function () { return fetch(`data/${jsonFile}`) .then(response => { response.json(); }).catch(error => { debugger; console.log(error); }); } }); } getAsyncDepartmentDataSource(url) { fetch(url) .then((response) => { return response.json(); }) .then(data => { if (data && data.items) { let departmentsFromApi = data.map(department => { return { value: deptId, display: deptName } }); this.setState({ departments: [{ value: '', display: '(Select your favourite dept)' }].concat(departmentsFromApi) }); } }) .catch(error => { debugger; console.log(error); }); } getAsyncEmployeeDataSource(url) { fetch(url) .then((response) => { return response.json(); }) .then(data => { if (data && data.items) { let employeesFromApi = data.map(employee => { return { value: empId, display: empName } }); this.setState({ employees: [{ value: '', display: '(Select your favourite emp)' }].concat(employeesFromApi) }); } }).catch(error => { debugger; console.log(error); }); } //// define the JSON of data //private sportsData: { [key: string]: Object }[] = [ // { Id: '1', Game: 'Badminton' }, // { Id: '2', Game: 'Football' }, // { Id: '3', Game: 'Tennis' } //]; //// maps the appropriate column to fields property //private fields: object = { text: 'Game', value: 'Id' }; render() { return ( <div className={'dx-fieldset'}> <div className={'dx-field'}> <div className={'dx-field-label'}>DropDownBox with embedded TreeView</div> <div className={'dx-field-value'}> <DropDownBox value={this.state.treeBoxValue} valueExpr={'deptId'} displayExpr={'deptName'} placeholder={'Select a value...'} showClearButton={true} dataSource={this.treeDataSource} onValueChanged={this.syncTreeViewSelection} contentRender={this.treeViewRender} /> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>DropDownBox with embedded DataGrid</div> <div className={'dx-field-value'}> <DropDownBox value={this.state.gridBoxValue} valueExpr={'empId'} deferRendering={false} displayExpr={this.gridBox_displayExpr} placeholder={'Select a value...'} showClearButton={true} dataSource={this.gridDataSource} onValueChanged={this.syncDataGridSelection} contentRender={this.dataGridRender} /> </div> </div> </div> ); } treeViewRender() { return ( <TreeView dataSource={this.treeDataSource} ref={(ref) => this.treeView = ref} dataStructure={'plain'} keyExpr={'deptId'} parentIdExpr={'deptId'} selectionMode={'single'} displayExpr={'name'} selectByClick={true} onContentReady={this.treeView_onContentReady} onItemSelectionChanged={this.treeView_itemSelectionChanged} /> ); } dataGridRender() { return ( <DataGrid dataSource={this.gridDataSource} columns={['EmpName', 'EmpAddress', 'DeptId']} hoverStateEnabled={true} selectedRowKeys={this.state.gridSelectedRowKeys} onSelectionChanged={this.dataGrid_onSelectionChanged} height={'100%'}> <Selection mode={'single'} /> <Scrolling mode={'infinite'} /> <Paging enabled={true} pageSize={10} /> <FilterRow visible={true} /> </DataGrid> ); } 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); } } syncDataGridSelection(e) { this.setState({ gridBoxValue: e.value, gridSelectedRowKeys: !e.value ? [] : [e.value] }); } treeView_itemSelectionChanged(e) { this.setState({ treeBoxValue: e.component.getSelectedNodesKeys() }); } dataGrid_onSelectionChanged(e) { const newValue = e.selectedRowKeys.length && e.selectedRowKeys[0] || null; this.setState({ gridBoxValue: newValue, gridSelectedRowKeys: !newValue ? [] : [newValue] }); } gridBox_displayExpr(item) { return item && `${item.EmpName} <${item.DeptId}>`; } treeView_onContentReady(e) { e.component.selectItem(this.state.treeBoxValue); } } export default DropdownSingleSelection;

                                    It gives me error saying that invalid column name deptId, invalid column name deptName, empId and empName also it gives as invalid columns. Any help would be very helpful as the deliverable are tight here. thanks in advance.
                                    I forgot to put the Web Api code, but I checked Web Api returning the data as expected, just in case if anybody wants to check it
                                    Here is my Web Api code, its .Net Core and C#

                                    [C#]
                                    [Route("api/[controller]")] [ApiController] [Produces("application/json")] public class DepartmentController : ControllerBase { // GET: api/Department [HttpGet] //[HttpGet("api/department/Index")] public IEnumerable<Department> Index() { var operationsOnModels = new OperationsOnModels(); return operationsOnModels.GetDepartments(); } // GET: api/Department/5 [HttpGet("{id}", Name = "Get")] public Department Get(string id) { var operationsOnModels = new OperationsOnModels(); return operationsOnModels.GetDepartment(id); } // POST: api/Department [HttpPost] public void Post([FromBody] Department value) { var operationsOnModels = new OperationsOnModels(); operationsOnModels.AddDepartment(value); } // PUT: api/Department/5 [HttpPut("{id}")] public void Put(int id, [FromBody] Department value) { var operationsOnModels = new OperationsOnModels(); operationsOnModels.UpdateDepartment(value); } // DELETE: api/ApiWithActions/5 [HttpDelete("{id}")] public void Delete(string id) { var operationsOnModels = new OperationsOnModels(); operationsOnModels.DeleteDepartment(id); } } [Route("api/[controller]")] [ApiController] public class EmployeeController : ControllerBase { // GET: api/Employee [HttpGet] public IEnumerable<Employee> Get() { var operationsOnModels = new OperationsOnModels(); return operationsOnModels.GetEmployees(); } // GET: api/Employee/5 [HttpGet("{id}", Name = "Details")] public Employee Details(string id) { var operationsOnModels = new OperationsOnModels(); return operationsOnModels.GetEmployee(id); } // POST: api/Employee [HttpPost] public void Post([FromBody] Employee value) { var operationsOnModels = new OperationsOnModels(); operationsOnModels.AddEmployee(value); } // PUT: api/Employee/5 [HttpPut("{id}")] public void Put(int id, [FromBody] Employee value) { var operationsOnModels = new OperationsOnModels(); operationsOnModels.UpdateEmployee(value); } // DELETE: api/ApiWithActions/5 [HttpDelete("{id}")] public void Delete(string id) { var operationsOnModels = new OperationsOnModels(); operationsOnModels.DeleteEmployee(id); } public IEnumerable<Department> Departmentsa() { var operationsOnModels = new OperationsOnModels(); return operationsOnModels.GetDepartments(); } }

                                    My models are implemented in the following way:

                                    [C#]
                                    public class Employee { public string EmpId { get; set; } public string EmpName { get; set; } public string EmpAddress { get; set; } public string DeptId { get; set; } public string DeptName { get; set; } } public class Department { public string DeptId { get; set; } public string DeptName { get; set; } public string DeptAddress { get; set; } }

                                    Any help would be very helpful

                                Show all comments
                                • Ilya (DevExpress Support) 09.16.2019

                                  Hello,
                                  It is difficult to diagnose the issue based on your code snippets as certain important parts of your implementation are missing. Especially, it is unclear how your Department and Employee properties are defined and serialized in Json. If properties are named with the Pascal notation, all field names should start with the upper-case letter. In your column configuration, I see that EmpName, EmpAddress, and DeptId are named according to Pascal Casing, whereas in other places, they are named according to Camel Casing. Make sure that all your fields are named properly.
                                  If this does not help, isolate the issue in a runnable sample and share it for review. For example, you can prepare an ASP.NET Core project with a React view using Visual Studio templates.

                                • Customer98204 09.16.2019

                                  I am not sure if the issue is with casing, because I was able to check if the data is being passed onto the client side, yes its being passed when I wrote it using Console.log method, I was able to see the jSon data on the client, it seems the issue how am I binding it with Grid and Dropdown controls and setting the properties like binding value and binding text etc. Any help would be very helpful my friends.

                                • Lex (DevExpress Support) 09.16.2019

                                  Hi,
                                   
                                  Our controls are bound to data using the specified options and they are case sensitive. So, it is an important part to make sure that the case of the specified options is equal to the case of your server model.
                                  If this does not help, then we need to analyze the issue on our side. For this, please create a small runnable sample project showing your implementation and the issue, so I can analyze and debug it on my side. It will also be helpful if you record a video (you can use the ShareX or Monosnap tool) showing the issue in action. I'll do my best to find a precise solution for you.

                                • Customer98204 09.16.2019

                                  You mean do you want me to send it as an attachment? This is runnable code, if its not runnable project, you can grab this code put it in your project check if it runs? Sending runnable project is difficult, since it will contain huge number of files in node_modules folder. If you still insist on it, I can send, but please try it on your end if you can put it in a project and run

                                • Lex (DevExpress Support) 09.16.2019

                                  Yes, it will be very helpful if you send us your project. You can remove the node_modules folder from the resulting archive since these modules can be restored on our side.

                                • Customer98204 09.17.2019

                                  Hi, I am attaching my code here, it has two models, Employee, Department, and Web API Calls, the app is running, but it has issues like

                                  1. in the DropdownSingleSelection component I am not able to bind static data to the dropdown DropDownBox with embedded TreeView

                                  2. in DropdownSingleSelection2 component the items in dropdown (DropDownBox with embedded TreeView) list are not visible, due to color selection it seems, can you please suggest me something how to change the color of the items within the dropdown and datagrid etc.

                                  3. DropDownBox with embedded TreeView should display the display (text) field like DeptName, but when selected it should pass the value field, like for example DeptId to other components or controls (i.e. when an item is selected in this dropdown, it should display its related data in the grid)

                                  4. in DropdownSingleSelection2 component the dropdown DropDownBox with embedded TreeView is not removing selection panel after selecting item, after selecting an item in the dropdown then dropdown should remove the items list panel

                                  5. DropDownBox with embedded DataGrid is not displaying rows and columns

                                  6. in DropdownSingleSelection2 component when an item is selected from the DropDownBox with embedded TreeView, it should display the related items in Grid below it, like when dept 1 is selected, in DropDownBox with embedded DataGrid should display employees related to that department.
                                • Ilya (DevExpress Support) 09.18.2019

                                  Hi,
                                  I reviewed your sample and found the following.

                                  1. Your popup is empty because contentRender is not specified in your DropDownBox. Besides, I see two properties that are missing in the DropDownBox API: treeBoxValue, and treeDataSource. In addition, treeDataSource is not defined in your component. I suggest you refer to the Selection demo to see how to implement your scenario in React.
                                  2. This issue is related to the incorrect character case in your column data fields and key. I mentioned it in my previous reply. Please check the network activity in the browser developer tools (F12) to see what data is returned from your source.
                                  Clipboard-File-2.png
                                  3. To fix the issue, specify correct names in the keyExpr, parentIdExpr, and displayExpr options. The data source in your TreeView does not contain the ID, name, or categoryId.
                                  4. Your requirement is unclear. What do you mean by a selection panel and how should it be removed from TreeView?
                                  5. The same as p.2. Debug your displayExpr function in the browser developer tools (F12) and fix character casing.
                                  6. To do so, handle the onValueChanged event in the first DropDownBox and modify the source bound to the second DropDownBox'es DataGrid so that it shows the relevant data.

                                  Please apply the suggested modifications to your sample and let me know if you need additional assistance.

                                • Ilya (DevExpress Support) 09.18.2019

                                  Just a follow up note. The character case is changed in your data fields on serialization because the corresponding setting is missing in your configuration. Refer to Configure JSON Serialization for more information.

                                • Customer98204 09.18.2019

                                  Hi, can you please modify my code and send it as an attachment.

                                  About the following

                                  For the 3. To fix the issue, specify correct names in the keyExpr, parentIdExpr, and displayExpr options. The data source in your TreeView does not contain the ID, name, or categoryId.
                                  What should I mention in these fields for my current scenario? I don't know what are those fields for

                                  For the 4. Your requirement is unclear. What do you mean by a selection panel and how should it be removed from TreeView?
                                  See when we select an item in the dropdown the selected items text would be displayed and dropped part will disappear right?
                                  For some reason its not happening in the dropdown of devextreme react, do i need to do anything for that?

                                  For the 6. To do so, handle the onValueChanged event in the first DropDownBox and modify the source bound to the second DropDownBox'es DataGrid so that it shows the relevant data.
                                  OK but I want to understand how to pass the selected dropdown value to the grid and everything all that process, the examples given by devexpress aren't working in SandBox. And I am very very weak in Client Scripting etc. A sample Code snippet or something works for me or if you can send me this projects solved would also help for me. I can do reverse engineering, any help would be very very helpful
                                  - Thank you

                                • Customer98204 09.18.2019

                                  For all those questions at least some code snippet helps, can you please try to give me some code snippet or example or even attachment is also fine.

                                • Customer98204 09.18.2019

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

                                  1. when I select an item in the DropDownBox with embedded TreeView, I want to get the filtered results in the grid that exists in DropDownBox with embedded DataGrid, for example, if i select deptId 01 in in the dropdown, it should display the employees who are in deptId 01 only, please give me the properties names or example code snippet to do it.

                                  2. 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. 

                                • Customer98204 09.18.2019

                                  And please help me with some code snippet to implement paging on my Datagrid - thank you

                                • Ilya (DevExpress Support) 09.19.2019

                                  Hello,

                                  To process your request more efficiently, I've extracted your recent inquiries into separate tickets:
                                  T816423: How to filter the grid defined in DropDownBox based on a value chosen in another DropDownBox
                                  T816426: How to close the DropDownBox popup on selecting an item in the inner TreeView
                                  How to enable paging in DataGrid
                                  We will update them once we have any results.

                                  In the future, please do not post multiple inquiries in a single ticket as it makes it difficult to address them.

                                • Customer98204 09.19.2019

                                  So it means is it not resolved yet? What should I do now?

                                • Customer98204 09.19.2019

                                  So you don't have any results yet? Please help me as soon as possible as my Demo date is coming soon, I am suggesting your tools to an Agency where I am working - if it clicks, it would be nice for you guys too. I need help as soon as possible - Thanks

                                • Ilya (DevExpress Support) 09.20.2019

                                  Hi,
                                  I received multiple posts with multiple issues and addressed them to separate threads. If I miss any inquiries, please let me know.

                                • Customer98204 09.25.2019

                                  All of them are resolved thank you.

                                0 Solutions

                                Creation Date Importance Sort by