How to update from XML DataSource

[Diego Fernando Urabayen]

I have a Grid with XMLDataSource but when the XML file change the grid is not updated.

My source code is the following:

<%@ Page Title="Dashboard" Language="C#" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" 

    MasterPageFile="~/Site.Master" Inherits="CronometrarMeLive.Views.Dashboard" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

    <h3>My Event</h3>

    <div id="dashboardProperties">

        <p>Last Update: <asp:Label ID="Label1" runat="server"></asp:Label></p>

   

        <ej:grid runat="server" id="dgDashboard1" DataSourceId="XmlDataSource1" 

            AllowSelection="False" EnableRowHover="False"

            ShowSummary="True" AllowGrouping="True">

            <ClientSideEvents QueryCellInfo="update" />

            <GroupSettings GroupedColumns="GroupKey"></GroupSettings>

            <SummaryRows>

                <ej:SummaryRow ShowCaptionSummary="True" ShowTotalSummary="False">

                    <SummaryColumn>

                        <ej:SummaryColumn SummaryType="Sum" DisplayColumn="Competidores" DataMember="Competidores" Prefix="Competidores = "  />

                    </SummaryColumn>

                </ej:SummaryRow>

            </SummaryRows>

            <Columns>

                <ej:Column Field="GroupKey" HeaderText="GroupKey"></ej:Column>

                <ej:Column Field="RouteKey" HeaderText="RouteKey"></ej:Column>

                <ej:Column Field="Name" HeaderText="Name"></ej:Column>

                <ej:Column Field="LapOrder" HeaderText="LapOrder"></ej:Column>

                <ej:Column Field="LapType" HeaderText="LapType"></ej:Column>

                <ej:Column Field="Competidores" HeaderText="Competidores"></ej:Column>

            </Columns>

        </ej:grid>

    </div>

    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Dashboard_1.xml"></asp:XmlDataSource>

</asp:Content>

<asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">

    <script type="text/javascript">

        window.onload = function () {

            timerID = setInterval(refresh, 2000);

        }

        $(function () {

            $("#dashboardProperties").ejPropertiesPanel(); 

        });

        function update(args) {

            if (args.column !== undefined && args.column.field === "Competidores") {

                var $element = $(args.cell);

                if (Globalize.parseFloat(Globalize.format(args.text, "c")) < 1070)

                    $element.css("background-color", "#b0e98f").css("color", "black");

                else

                    $element.css("background-color", "#f4a496").css("color", "black");

            }

        }

        

        function refresh() {

            var newDate = new Date();

            $('#<%= Label1.ClientID %>').text(newDate.toString());

            $("#dgDashboard1").ejGrid("refreshContent");

        }

    </script>

</asp:Content>

The XML File is:

<?xml version="1.0" encoding="UTF-8"?>

<dataroot>

<Tabla1>

<GroupKey>Point1</GroupKey>

<RouteKey>MM</RouteKey>

<Name>Start</Name>

<LapOrder>1</LapOrder>

<LapType>Start</LapType>

<Competidores>1070</Competidores>

</Tabla1>

<Tabla1>

<GroupKey>Point2</GroupKey>

<RouteKey>MM</RouteKey>

<Name>5K</Name>

<LapOrder>2</LapOrder>

<LapType>Partial</LapType>

<Competidores>1057</Competidores>

</Tabla1>

<Tabla1>

<GroupKey>Point3</GroupKey>

<RouteKey>MM</RouteKey>

<Name>10K</Name>

<LapOrder>3</LapOrder>

<LapType>Partial</LapType>

<Competidores>1055</Competidores>

</Tabla1>

<Tabla1>

<GroupKey>Point4</GroupKey>

<RouteKey>MM</RouteKey>

<Name>15K</Name>

<LapOrder>4</LapOrder>

<LapType>Partial</LapType>

<Competidores>1017</Competidores>

</Tabla1>

<Tabla1>

<GroupKey>Point5</GroupKey>

<RouteKey>MM</RouteKey>

<Name>20K</Name>

<LapOrder>5</LapOrder>

<LapType>Partial</LapType>

<Competidores>1058</Competidores>

</Tabla1>

<Tabla1>

<GroupKey>Point6</GroupKey>

<RouteKey>MM</RouteKey>

<Name>Finish</Name>

<LapOrder>6</LapOrder>

<LapType>Finish</LapType>

<Competidores>1067</Competidores>

</Tabla1>

</dataroot>

[Gowthami V]

Hi Diego,

Thanks for using Syncfusion products.

We have tried a sample with changing XML file and also XML data alone. While changing xml file or data, we need to call the DataBind() method for reflecting the changes.

Refer to the attached sample with the above scenario,

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication211739835964.zip

In the sample, we have changed the xml data of the “Dashboard_1.xml” file in server side click event of the button as follows,

<ej:grid runat="server" id="dgDashboard1" DataSourceId="XmlDataSource1"

            AllowSelection="False" EnableRowHover="False"

            ShowSummary="True" AllowGrouping="True">

. . . .

</ej:grid>

protected void Button1_Click(object sender, EventArgs e)

        {

            XmlDocument doc = new XmlDocument();

            doc.Load(Server.MapPath("~/App_Data/Dashboard_1.xml"));

            XmlNode node;

            node = doc.DocumentElement;

            foreach (XmlNode node1 in node.ChildNodes)

            {

                foreach (XmlNode node2 in node1.ChildNodes)

                {

                    if (node2.Name == "Competidores")

                    {

                        int price = int.Parse(node2.InnerText);

                        int newprice = price + 20;

                        node2.InnerText = newprice.ToString();

                    }

                }

            }

            doc.Save(Server.MapPath("~/App_Data/Dashboard_1.xml"));

            dgDashboard1.DataBind();

        }
     

If we misunderstood your requirement, please share the details of changing the XML data which will help to analyze the requirement and provide a response as early as possible.

Regards,

Gowthami V.

[Diego Fernando Urabayen]

Hi Gowthami,

I'm using javascript to grid update. Is it possible to use this or recommend other method? I attach the scenario. You can change the xml data with a text editor.

Regards,

Diego

Attachment: SyncfusionSupportSample.v11_8fad0f37.zip

[Gowthami V]

Hi Diego,

We can achieve your requirement using “PageMethods” concept in which we can access the server side method from client side.

In the above sample, we have read the xml file in “GetPageMethod” and returned the data to client side. We access that data using “onSuccess” method in client side. We have updated the returned data to the Grid using “dataSource” method of Grid.

<ej:grid runat="server" id="dgDashboard1" DataSourceId="XmlDataSource1"
            AllowSelection="False" EnableRowHover="False">
. . . .
. . . .

</ej:grid>

    <asp:ScriptManager runat="server" EnablePageMethods="true">
</asp:ScriptManager>

<script type="text/javascript">
. . . .
. . . .

function refresh() {

            debugger;

            var newDate = new Date();

            $('#<%= Label1.ClientID %>').text(newDate.toString());

            PageMethods.GetPageMethod(onSucceed, onError);

          

        }

        function onSucceed(result) {

            //Instance of the grid

            var gridObj = $('#<%= dgDashboard1.ClientID %>').data("ejGrid");

                    //Assigning datasource to the grid

                    gridObj.dataSource(result);

                }

        function onError()

        { }
    </script>

Default.aspx.cs

[System.Web.Services.WebMethod]

        public static IEnumerable GetPageMethod()

        {

            DataSet ds = new DataSet();

            FileStream fs = new FileStream(HostingEnvironment.MapPath("~/App_Data/Dashboard_1.xml"), FileMode.Open, FileAccess.Read);

           

            StreamReader reader = new StreamReader(fs);

            ds.ReadXml(reader);

            fs.Close();

            //Converting datatable data to Json data

            IEnumerable data = Syncfusion.JavaScript.Utils.DataTableToJson(ds.Tables[0]);

            

            return data;
        }

We have attached the sample below for your reference,

http://www.syncfusion.com/downloads/support/directtrac/general/SY73BB~1-85021835.ZIP

Regards,

Gowthami V.

[Diego Fernando Urabayen]

Hi Diego,

We can achieve your requirement using “PageMethods” concept in which we can access the server side method from client side.

In the above sample, we have read the xml file in “GetPageMethod” and returned the data to client side. We access that data using “onSuccess” method in client side. We have updated the returned data to the Grid using “dataSource” method of Grid.

<ej:grid runat="server" id="dgDashboard1" DataSourceId="XmlDataSource1"
            AllowSelection="False" EnableRowHover="False">
. . . .
. . . .

</ej:grid>

    <asp:ScriptManager runat="server" EnablePageMethods="true">
</asp:ScriptManager>

<script type="text/javascript">
. . . .
. . . .

function refresh() {

            debugger;

            var newDate = new Date();

            $('#<%= Label1.ClientID %>').text(newDate.toString());

            PageMethods.GetPageMethod(onSucceed, onError);

          

        }

        function onSucceed(result) {

            //Instance of the grid

            var gridObj = $('#<%= dgDashboard1.ClientID %>').data("ejGrid");

                    //Assigning datasource to the grid

                    gridObj.dataSource(result);

                }

        function onError()

        { }
    </script>

Default.aspx.cs

[System.Web.Services.WebMethod]

        public static IEnumerable GetPageMethod()

        {

            DataSet ds = new DataSet();

            FileStream fs = new FileStream(HostingEnvironment.MapPath("~/App_Data/Dashboard_1.xml"), FileMode.Open, FileAccess.Read);

           

            StreamReader reader = new StreamReader(fs);

            ds.ReadXml(reader);

            fs.Close();

            //Converting datatable data to Json data

            IEnumerable data = Syncfusion.JavaScript.Utils.DataTableToJson(ds.Tables[0]);

            

            return data;
        }

We have attached the sample below for your reference,

http://www.syncfusion.com/downloads/support/directtrac/general/SY73BB~1-85021835.ZIP

Regards,

Gowthami V.

Thank you so much for the solution. Works great!

[Gowthami V]

Hi Diego,
 
We are happy to hear that your requirement has been achieved.
 
Thanks & Regards,
 
Gowthami V.