after finishing Web Method

[Martin Sickel]

A good Day

I try to achive the following. I have 3 Grids on a Page two of them are calling a web method to view the Data, below is the code snipped of my Grids

           <div class="col-lg-6 bg-transparent" style="background-size: cover; background-position: center; border-radius: 15px 50px;">

                <div id="mainGridContainer" style="height: 100%; width: 100%">

                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

                        <ContentTemplate>

                            <ej:Grid ID="mainGrid" IsResponsive="true" MinWidth="200" AllowResizeToFit="true" AllowResizing="true" AllowPaging="True" AllowSorting="true" AllowGrouping="true" runat="server" AllowSearching="True" Height="100%">

                                <DataManager URL="Default.aspx/UrlMainDataSource" Adaptor="WebMethodAdaptor"></DataManager>

                                <ToolbarSettings ShowToolbar="True" ToolbarItems="search"></ToolbarSettings>

                                <PageSettings PageSize="50" />

                                <ScrollSettings ScrollerSize="17" />

                                <SearchSettings Fields="_profile,_dnis,_todial,_testsite" IgnoreCase="true" />

                                <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>

                                <ToolbarSettings ShowToolbar="true" ToolbarItems="search"></ToolbarSettings>

                                <Columns>

                                    <ej:Column Field="_profile" HeaderText="Profile Name" IsPrimaryKey="true" TextAlign="Left" Width="250"></ej:Column>

                                    <ej:Column Field="_dnis" HeaderText="DNIS" IsPrimaryKey="true" TextAlign="Left" Width="380"></ej:Column>

                                    <ej:Column Field="_testsite" HeaderText="System" IsPrimaryKey="true" TextAlign="Left" Width="80"></ej:Column>

                                    <ej:Column Field="_todial" HeaderText="Number to dial" IsPrimaryKey="true" TextAlign="Left"></ej:Column>

                                </Columns>

                            </ej:Grid>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                </div>

            </div>

            <div class="col-lg-3 bg-transparent">

                <div id="UsersContainer" style="height: 100%; width: 100%">

                    <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Always">

                        <ContentTemplate>

                            <ej:Grid ID="userNumberGrid" IsResponsive="true" MinWidth="200" AllowResizeToFit="true" AllowResizing="true" AllowPaging="True" AllowSorting="true" AllowGrouping="true" runat="server" AllowSearching="True" Height="95%">

                                <DataManager URL="Default.aspx/UrlUserDataSource" Adaptor="WebMethodAdaptor"></DataManager>

                                <ToolbarSettings ShowToolbar="True" ToolbarItems="search"></ToolbarSettings>

                                <PageSettings PageSize="50" />

                                <ScrollSettings ScrollerSize="17" />

                                <SearchSettings Fields="_number" IgnoreCase="true" />

                                <Columns>

                                    <ej:Column Field="_profile" HeaderText="Profile Name" IsPrimaryKey="true" TextAlign="Left" Width="250"></ej:Column>

                                    <ej:Column Field="_dnis" HeaderText="DNIS" IsPrimaryKey="true" TextAlign="Left" Width="380"></ej:Column>

                                </Columns>

                            </ej:Grid>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                </div>

            </div>

            <div class="col-lg-3 bg-transparent">

                <div id="freeGridContainer" style="height: 100%; width: 100%">

                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">

                        <ContentTemplate>

                            <ej:Grid ID="freeNumberGrid" IsResponsive="true" MinWidth="200" AllowResizeToFit="true" AllowResizing="true" AllowPaging="True" AllowSorting="true" AllowGrouping="true" runat="server" AllowSearching="True" Height="95%">

                                

                                <ToolbarSettings ShowToolbar="True" ToolbarItems="search"></ToolbarSettings>

                                <PageSettings PageSize="50" />

                                <ScrollSettings ScrollerSize="17" />

                                <SearchSettings Fields="_number" IgnoreCase="true" />

                                <Columns>

                                    <ej:Column Field="_number" HeaderText="Number" IsPrimaryKey="true" TextAlign="Left" Width="250"></ej:Column>

                                </Columns>

                            </ej:Grid>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                </div>

            </div>

What I know would like to do is the following. after both grids are filled I would like to call a web methode to fill the 3rd Grid wit a combination of data out of the first two ones. The data is already existing and will be available trough a session variable.

[Manivannan Padmanaban]

Hi Martin, 

Greetings from Syncfusion Support.  

From the shared query, we are able to understand that you want to bind the third grid dataSource after the first and second grid data bound. We have achieved your requirement using the dataBound event of ejGrid. The dataBound event will trigger after the data bind, using flag variable we have checked whether the both (i.e. first and second ) grid data is bind and then we have called the server side method webmethod  to retrieve the third grid data.  

In the webmethod, ajax success we have updated the received data to third grid using dataSource method of ejGrid. Refer the below code example,  

 

// Client End 

 

……………………………….. 

            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> 

                <ContentTemplate> 

                    <ej:Grid ID="mainGrid" ……………..> 

…………………………………… 

                        <ClientSideEvents DataBound="mainGridDataBound" /> 

                        ………………. 

                        <Columns> 

…………………………….. 

                        </Columns> 

                    </ej:Grid> 

                </ContentTemplate> 

            </asp:UpdatePanel> 

        </div> 

    </div> 

 

    <div class="col-lg-3 bg-transparent"> 

        <div id="UsersContainer" style="height: 100%; width: 100%"> 

            <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Always"> 

                <ContentTemplate> 

                    <ej:Grid ID="userNumberGrid" ………….> 

                        …………………… 

                        <ClientSideEvents DataBound="userNumberGridDataBound" /> 

……………………. 

                        <Columns> 

                            …………………… 

                        </Columns> 

                    </ej:Grid> 

                </ContentTemplate> 

            </asp:UpdatePanel> 

        </div> 

    </div> 

    <div class="col-lg-3 bg-transparent"> 

        <div id="freeGridContainer" style="height: 100%; width: 100%"> 

            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always"> 

                <ContentTemplate> 

                    <ej:Grid ID="freeNumberGrid" ………..> 

 

…………………………………………………………….. 

                        <Columns> 

………………………………… 

                        </Columns> 

                    </ej:Grid> 

 

 

                    <script> 

 

                        var flag1, flag2 = false; 

 

                        function mainGridDataBound() { 

                            flag1 = true; 

                            if (flag1 && flag2) 

                                webmethod(); 

                        } 

 

                        function userNumberGridDataBound() { 

                            flag2 = true; 

                            if (flag1 && flag2) 

                                webmethod(); 

                        } 

 

                        function webmethod() { 

                            $.ajax( 

                                { 

                                    type: "POST", 

                                    contentType: 'application/json; charset=utf-8', 

                                    url: 'Default.aspx/freeNumberGridData', 

                                    dataType: 'json', 

                                    success: function (data) { // get the data from here. 

                                        var gridobj = $("#<%= freeNumberGrid.ClientID %>").ejGrid("instance");  // take the grid instance using grid id. 

                                        gridobj.dataSource(data.d);  // update the dataSource for third grid using dataSource method of ejGrid. 

                                    }, 

                                }); 

                        } 

                    </script> 

                </ContentTemplate> 

            </asp:UpdatePanel> 

 

 

 

// CodeBehind 

 

[WebMethod] 

[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 

        public static object freeNumberGridData() 

        { 

             

 

            // do your stuff and return the data 

 

            return data; 

        } 

Kindly get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban. 

[Martin Sickel]

Hi Padmanabani

I have added your proposel to my code, and so far I can see that the Webmethode is called in code behind after the first two Tables are filled with data.

I can also see that the data will be there

Here the code which is called in the webmethode

        [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public static object freeNumberGridData()

        {

            _Default helper = new _Default();

            Syncfusion.JavaScript.DataManager value = new Syncfusion.JavaScript.DataManager();

            value.Skip = 0;

            value.Take = 50;

            IEnumerable data = (List<FREENUMBERS>)helper.Session["lsFreeNumbers"];

            DataOperations ds = new DataOperations();

            if (value.Where != null && value.Where.Count > 0) //Filtering

            {

                data = ds.PerformWhereFilter(data, value.Where, value.Where[0].Operator);

            }

            if (value.Search != null && value.Search.Count > 0) // Searching

            {

                data = ds.PerformSearching(data, value.Search);

            }

            var count = data.AsQueryable().Count();

            if (value.Sorted != null && value.Sorted.Count > 0) //Sorting

            {

                data = ds.PerformSorting(data, value.Sorted);

            }

            List<string> str = new List<string>();

            if (value.Aggregates != null)                   // Summary

            {

                for (var i = 0; i < value.Aggregates.Count; i++)

                    str.Add(value.Aggregates[i].Field);

            }

            IEnumerable aggregates = ds.PerformSelect(data, str);

            data = ds.PerformSkip(data, value.Skip);    //Paging

            data = ds.PerformTake(data, value.Take);

            return new { result = data, count = count, aggregate = aggregates };

But unfortunately the 3rd Grid still stays empty and is not filled with Data.

Any idea what I miss? do you have maybe a working example?

Thanks

Martin

[Padmavathy Kamalanathan]

Hi Martin, 

Thanks for your update. 

QUERY:  I can see data in web method but 3rd grid stays empty 

 

From your query we understand that you have data in web method. This means that you can get it in ajax success method. There you need to take instance of your 3rd grid and update the data to your grid with the help of dataSource method of grid as we have explained in our previous update. 

Please refer the below help documentation, 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource 

Please make sure you are getting data in ajax success. 

Still facing the issue share us below details, 

1. Check what you are getting in ajax success and let us know
2. Share screenshots of error (if any)

If you have further queries, please get back to us. 

Regards, 

Padmavathy Kamalanathan