Refresh data

[Jorge Pampin]

Hello,

In my code, I change the data binded to the TreeGrid by javascript. But, I don't know how to update the TreeGrid to show the changes and launch the QueryCellInfo events agains. I tried the redraw function, but it is too slow and the grid doesn't show the changes. How to refresh the data?

Thanks!

[Dinesh Kumar Nagarathinam]

Hi Jorge,

Thanks for using Syncfusion Products.

We can refresh the data source of the TreeGrid using “refresh” Public method. The “QueryCellInfo” client side event has triggered again while we refreshing the data source using this Public method.

Code Snippet:

  var TreeGridObject = $("#Treegrid").data("ejTreeGrid"),

     
      modifiedDataSource = jQuery.parseJSON(result); //resultàModified dataSource from server.

     
TreeGridObject.refresh(modifiedDataSource);

We have prepared a sample based on your requirement, find the sample from below location.

Sample: http://www.syncfusion.com/downloads/support/forum/121311/ze/Refresh_Data1624800462

Please let us know, if you need further assistance on this.

Regards,

Dinesh kumar.N

[Jorge Pampin]

Hello,

This way is too slow. I change the data (not all datasource data) by javascript and I need show the changes quickly. Are there another way to do this?

Thanks!

[John Rajaram]

Hi Jorge,
We would like to let you know that, we can display the updated data of the TreeGrid, which has been made by client side script. It can be done by “QueryCellInfo” client side event and “refreshRow” public method. Please refer the below code snippets for more details.
Code Snippets:

//...

<ej:TreeGrid ID="Treegrid" runat="server" AllowColumnResize="true"

            

     //...

     QueryCellInfo="QueryCellInfo" >                        

            

</ej:TreeGrid>

        <script type="text/javascript">  

            function QueryCellInfo(args) {

                var treeObj = $("#Treegrid").data("ejTreeGrid");

                if (args.column.field == "PercentDone") {

                    if (args.data.PercentDone > "40") {

                        args.data.PercentDone = "40";

                        treeObj.refreshRow(args.data.index);

                    }

                }

            }           
        </script>

Note: Here we are updating the “PercentDone” field of the datasource by JavaScript, when it’s value is greater than “40”.

We have also prepared the sample based on this. Please find the sample in the below location.
Sample: http://www.syncfusion.com/downloads/support/forum/121311/ze/RefreshRowData1362248418
Please let us know if you require further assistance on this.
Regards,
John R

[Jorge Pampin]

Hello,

How to do this with Grid control?

Thanks!

[Saravanan Arunachalam]

Hi Jorge,

We have analyzed your query. You need to change the Grid data and show the changed data on the Grid. So, we suggest that you use the “QueryCellInfo” event of Grid control to change and show the Grid with changed data. Please refer to the below code example and online sample link.

<ej:Grid ID="OrdersGrid" runat="server" AllowSelection="False" AllowSorting="True" EnableRowHover="False">

    <clientsideevents querycellinfo="QueryCellInfo" />

</ej:Grid>

<script type="text/javascript">

        function QueryCellInfo(args) {

            if (args.columns.field == "Freight" && args.data.Freight > 40)

                args.cell.innerText = 40;

        }

    </script>

http://asp.syncfusion.com/demos/web/grid/conditionalformatting.aspx

Regarding,

Saravanan A.

[Jorge Pampin]

Hello,

It doesn't work for me, becouse the data is changed by javascript, and the format of the cell depends on the values of the others controls. I need to force the CellQueryInfo event like the TreeGrid.

Thanks!

[Saravanan Arunachalam]

Hi Jorge,

We understood from your query, you need to change the data by external control like DropdownList and the changes will show on the Grid control. We have created the sample for this requirement and it can be download from the below link.

http://www.syncfusion.com/downloads/support/forum/121311/ze/F121311-443546074

In the above sample, we have changed the format of the Freight column using ejDropDownList control. In the change event of DropdownList, we have called the refreshContent method of Grid control to trigger the QueryCellInfo event of Grid. Please refer to the below code example.

<ej:DropDownList ID="dropdown" ClientSideOnChange="formatchange" runat="server" Width="107px" >

. . .

</ej:DropDownList>

function formatchange(args) {

            var obj = $(".e-grid").ejGrid("instance");

            obj.refreshContent();//Call this method to trigger QueryCellInfo event

        }

In the QueryCellInfo event of Grid, we have formatted the Grid data for a particular field based on the selected value of DropdownList control and refer to the below code example.

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" >

        <ClientSideEvents  QueryCellInfo="queryCellInfo" />

. . .

  </ej:Grid>

function queryCellInfo(args) {

            var drpObj = $("#MainContent_dropdown").ejDropDownList("instance");

            if (drpObj.model.value != null)

                args.cell.innerText = Globalize.format(args.data.Freight, drpObj.model.value+"2");

//Format the data based on selected value of dropdownlist

        }

Regards,

Saravanan A.

[Jorge Pampin]

Hello,

Is there a method to trigger QueryCellInfo evento only for a row? Something like grid.refreshRow(indexRow)....

Thanks!

[Saravanan Arunachalam]

Hi Jorge,

Yes, we can trigger the QueryCellInfoEvent of Grid for a particular cell in a row by using “setCellText” method of Grid and refer to the below code example.

<%--Numeric text box select the row index--%>

<ej:NumericTextBox ID="numeric"  ClientSideOnChange="formatchange" runat="server" Name="numeric" />

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" >

        <ClientSideEvents  QueryCellInfo="queryCellInfo" />

           . . .

</ej:Grid>

<script type="text/javascript">

function formatchange(args) {

            var obj = $(".e-grid").ejGrid("instance");

            //setCellText(rowIndex,cellIndex,value to change)

            obj.setCellText(args.value, 3, 40)

        }

 function queryCellInfo(args) {

                      

            if (!this.initialRender && args.column.field == "Freight"){

                args.cell.innerText = args.data.Freight;

            }

        }

</script>

 

We can call the setCellText method of Grid in two ways. Please refer to the below code example.

API structure 1:

setCellText (rowIndex /*rowindex or primaryKeyvalue*/, colIndex /*either column index or column name*/, value /*value to be updated*/)

setCellText(2/*row index*/,2/*column index*/,"Stefen")

API structure 2:

setCellText (primaryKeyValue, columnName, value)

setCellText(1025/*PrimaryKeyValue*/, "Freight"/*column name*/, 32.38)

Regards,

Saravanan A.