QueryBuilderComponent and setCellValue.

[Giorgio]

Hi again,

I have introduced the QueryBuilderComponent placing in columDataQueryBuilder the columns generated same ase the demo where you show the integration, in the constructor we have

class SampleComponent

{

this.query = new Query().select(this.gridQueryBuilderFields)

updateRule(args) {
        let predicate = this.qbObj.getPredicate(args.rule);
        if ((predicate === null) || (predicate === 'undefined')) {
            this.gridInstance.query = new Query().select(this.gridQueryBuilderFields);
        }
        else {
            this.gridInstance.query = new Query().select(this.gridQueryBuilderFields)
                .where(predicate);
        }
        this.gridInstance.refresh();
    }

render method..

<QueryBuilderComponent width='100%'
                   dataSource={this.state.data}
                   columns={this.columnsDataQueryBuilder}
                   ruleChange={this.updateRule.bind(this)}
                   ref={(scope) => { this.qbObj = scope; }}>
</QueryBuilderComponent>

And the current component is

      <ButtonComponent cssClass='e-primary'
onClick={this.saveGridSettings}>
    Save Settings</ButtonComponent>
                            <GridComponent ref={grid => this.gridInstance = grid}
                                dataSource={this.state.data}
                        id={this.state.id}

                        query={this.query}

                        height="400"
                        modal = {this.state.modal}
                        allowFiltering={true}
                        allowPaging={true}
                        allowReordering={true}
                        allowRowDragAndDrop={true}
                        load={this.gridStartup} 
                        allowResize={true}
                        allowSorting={true}
                        selectionSettings={this.selectionSettingsModel}
                        contextMenuItems={this.contextMenuItems}
                        contextMenuClick={this.onClickContextMenu}
                        allowReordering={true}
                        toolbar={this.toolbarOptions}
                        allowSelection={true}
                        create={this.onGridCreated}
                        filterSettings={this.filterSettings}
                        editSettings={this.editOptions}
                        columns={this.state.columns}>
                        <Inject services={[Filter,Sort,RowDD,Page,ContextMenu,Selection, Resize,Reorder, Edit, Resize,Toolbar,Clipboard, ExcelExport, PdfExport]} />
                    </GridComponent>
                        </Row>
                    </Container>
                </div>

The component filters correctly following the query builder, but unfortunately the setCellValue doesnt do nothing, the columns have primary key.

This updateGrid get called from a selectEvent from a bootstrap modal where there is a grid where i select things

updateGrid(name, value) {
       
        if ((name == null) || (value == null))
        {
            throw 'Name and Value of the cell should be provided'
        }
        console.log("FieldKey  " + name + "* FieldValue " +value)
        var selectedrowindex = this.gridInstance.getSelectedRowIndexes(); // get the selected row indexes.
        var correctGridIndex = selectedrowindex[0]
        if (correctGridIndex == null) {
            correctGridIndex = 0
        }
        // in case we are in edit mode we shall exit from them before replacing the selection
        var currentName = name
        if ((currentName != null) && (value != null)) {
            console.log("Close editing" + value)

            this.gridInstance.endEdit();
            if (!this.state.isEditMode) {
                var currentRowGridData = this.gridInstance.getRowsObject()[correctGridIndex].data;
                console.log("Close editing" + JSON.stringify(currentRowGridData))
                if (currentRowGridData.hasOwnProperty(currentName)) {
                    console.log("Set cell value")
                    // currentRowGridData[currentName] = {..value }
                    this.gridInstance.setCellValue(currentRowGridData.Code, currentName, value)
                    this.gridInstance.refresh()
                }
            }
        }
    }

Any idea?

If i remove the QueryBuilderComponent works.

BR,

Giorgio.

[Thavasianand Sankaranarayanan]

Hi Giorgio, 

 

Greetings from Syncfusion support. 

We checked your reported issue -“SetCellValue method not updating cell values” with the provided code block. It is reproducible from our end, but it is occurring due to enabling row drag and drop in the grid. On enabling the row drag and drop, the cell values are getting mismatched and hence not properly updated on using the setCellValue method. This issue occurs even without using the QueryBuilder component. 

Can you please check the below sample and confirm if this is the issue you are facing so that we can provide you the proper solution for it, 

Sample: https://stackblitz.com/edit/react-cryqv6?file=index.js 

 

Regards, 

Thavasianand S. 

[Giorgio]

Hello,

i get rid the RowDD module in inject but i am experimenting as well the same behaviour. In this case i attach my grid extension for further examination. The component is LineGridComponent, it extendes the grid by providing new features (cloud columns settings savings via grpc-web, cut and paste from keyboard, column generation from json) - free to steal.

There are some other behaviours not good:

- the resize behaviour is not working propertly

- and we dont know where to put ouer loadGridSettings,.if we can put after the component mount or at the beginning. We experienced some interference with column template generation.

So as recap, our problems in LineGridComponent are:

1. query builder + setCell (method updateGrid)

2. Resize behaviour in LineGridComponent

3. Where to put loadGridSettings 

Best Regards,

Giorgio.

Attachment: grid_extension_4cfa5180.zip

[Thavasianand Sankaranarayanan]

Hi Giorgio, 

Query – 1: “SetCellValue not updating cell value” 

We checked your provided sample code and could see that you have called the grid’s refresh method after updating the cell value through setCellValue method. Th setCellValue updates the cell value in the UI level and does not updated in data source. Since based on your query we can see that you wish to update in the data source too, so we suggest you to use the updateRow method. 

// Function for updating the grid data 

onUpdate() { 

   // Find the row index with the primary key value 

      var rowIndex = this.gridObj.getRowIndexByPrimaryKey(4); 

   // Get the current row data for the index and store it 

      var rowData = this.gridObj.currentViewData[rowIndex]; 

   // Modify the column values in the stored row data 

      rowData.Name = 'NewName'; 

   // Update the grid row with the updated row data 

      this.gridObj.updateRow(rowIndex, rowData); 

    } 

We have prepared a sample based on this for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/react-cryqv6?file=index.js 

 

Query – 2: “Resize behavior issue” 

In your sample code you have given the wrong property name for enabling resize(allowResize). To enable grid’s resize functionality use the allowResizing property. 

Query – 3: “Where to put loadGridSettings” 

You can try to put the loadGridSettings in the dataBound event of the grid which gets triggered once the data source is populated in the grid. 

 

Regards, 

Thavasianand S. 

[Giorgio]

Hello,

Thanks to your support we had some step ahead.

Query – 1: “SetCellValue not updating cell value” 

Worked smoothly

 

Query – 2: “Resize behavior issue” 

Worked smoothly. 

Query – 3: “Where to put loadGridSettings” 

Solved as well. the right place was the constructor before componentDidMount in the react lifecycle.

There is a query now:

Adding a removing a filter makes the grid empty.

BR,

Giorgio

[Thavasianand Sankaranarayanan]

Hi Giorgio, 

Before proceeding to your query please provide the following details for providing better assistance. 

• Share the type of filtering that you have used in your application.
• Share the screen shot or video demonstration of the issue.
• Adding and removing that you have meant for CRUD operation, after the CRUD operation filter dialog checklist gets empty?
• Else filtering results the empty dataset in Grid (It is not properly filtering)
• Do you have filter the empty value in and it is not working.
• Share the complete Grid rendering code.

 

Regards, 

Thavasianand S.   

[Giorgio]

Hi all,

Remains two issues:

- “Where to put loadGridSettings” in databound doenst work.

- After the add the updateRow / setCell doenst work, workflow:

- press insert

- put the values to Precio, Quantita, Discount and the it doesnt work. It doesnt update the subtotal.

Attachment: grid_extension_bd1c8b5d.zip

[Thavasianand Sankaranarayanan]

Hi Giorgio, 

Query – 1: “The loadGridSettings in databound doesn’t work” 

In your previous update you had mentioned that you were able to resolve this issue by putting the loadGridSettings in the componentDidMount of react lifecycle and in your provided code block we could see that you have commented these lines. If defining the loadGridSettings in either the componentDidMount or grid’s dataBound event did not do the trick, please let us know what operations you are performing in the loadGridSettings so that we can suggest according to that. 

Query – 2: “After assigning values the subtotal column not getting updated” 

We suspect your requirement is to update a column based on values from other columns. To achieve this we suggest you to use the columns valueAccessor property which can be used to manipulate the value of the data getting displayed. This is explained below, 

Initially define the valueAccessor property for the dependent column. 

<GridComponent filterSettings={this.FilterOptions} allowFiltering={true} allowPaging={true} dataSource={this.datamanager} width='100%'> 

    <ColumnsDirective> 

                     . 

                     . 

        <ColumnDirective field='Precio' headerText='Precio' width='120' /> 

        <ColumnDirective field='Quantita' headerText='Quantita' width='120' /> 

        <ColumnDirective field='Discount' headerText='Discount' width='120' /> 

        <ColumnDirective field='subtotal' headerText='subtotal' width='120' valueAccessor={this.valueAccess} /> 

    </ColumnsDirective> 

</GridComponent> 

Then in the valueAccessor function you can return the data by calculating its value based on other columns. 

<script> 

    // Value accessor function 

    valueAccess(field, data, column){ 

      // Calculating the subtotal and returning it 

      var total = getValue('Precio', data) * getValue('Quantita', data); 

      var discountprice = total * (getValue('Discount', data)/100); 

      var subtotal = parseInt(total - discountprice); 

      return subtotal + '$'; 

    } 

</script> 

You can find the sample for your reference below, 

Sample: https://stackblitz.com/edit/react-cryqv6-yaov9q?file=index.js 

More details on the valueAccessor property can be found in the below documentation, 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/?no-cache=1#valueaccessor 

 

If we are misunderstood your query then please get back to us. 

 

Regards, 

Thavasianand S.