We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Refresh data

Thread ID:

Created:

Updated:

Platform:

Replies:

121311 Nov 30,2015 10:37 AM UTC Dec 17,2015 12:42 PM UTC ASP.NET Web Forms 9
loading
Tags: Grid
Jorge Pampin
Asked On November 30, 2015 10:37 AM UTC

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 [Syncfusion]
Replied On December 1, 2015 08:57 AM UTC

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
Replied On December 1, 2015 04:07 PM UTC

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 [Syncfusion]
Replied On December 7, 2015 12:26 PM UTC

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
Replied On December 11, 2015 12:05 PM UTC

Hello,

How to do this with Grid control?

Thanks!

Saravanan Arunachalam [Syncfusion]
Replied On December 14, 2015 11:33 AM UTC

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
Replied On December 14, 2015 11:51 AM UTC

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 [Syncfusion]
Replied On December 15, 2015 12:51 PM UTC

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
Replied On December 16, 2015 01:12 PM UTC

Hello,

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

Thanks!


Saravanan Arunachalam [Syncfusion]
Replied On December 17, 2015 12:42 PM UTC

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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;