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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

after finishing Web Method

Thread ID:

Created:

Updated:

Platform:

Replies:

146768 Aug 19,2019 07:06 AM UTC Sep 2,2019 12:04 PM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Martin Sickel
Asked On August 19, 2019 07:06 AM UTC

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 [Syncfusion]
Replied On August 20, 2019 12:32 PM UTC

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
Replied On August 30, 2019 06:20 AM UTC

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 [Syncfusion]
Replied On September 2, 2019 12:04 PM UTC

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, 

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 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon