after finishing Web Method

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

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

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

<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>

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

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

<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>

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

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

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

</Columns>

</ej:Grid>

</ContentTemplate>

</asp:UpdatePanel>

</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.

Reply | Reply with quote

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">

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

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

……………….

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

</Columns>

</ej:Grid>

</ContentTemplate>

</asp:UpdatePanel>

</div>

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

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

……………………

…………………….

……………………

</Columns>

</ej:Grid>

</ContentTemplate>

</asp:UpdatePanel>

</div>

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

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

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

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

</Columns>

</ej:Grid>

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.

Reply | Reply with quote

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

Reply | Reply with quote

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,

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,

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

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

Regards,

Padmavathy Kamalanathan

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US