Grid control inside update panel not triggering button click event

KK Karthick Kuppusamy Syncfusion Team November 23, 2016 11:06 AM UTC

Hi Abhishek,

We have analyzed your requirement and we are able to reproduce the reported issue at our end while binding the large data to the grid.So we suggest you to use the URL Adaptor to bind the huge amount of data.

For you convenience we have created the sample that can be downloaded from the below link.

Link: https://www.syncfusion.com/downloads/support/forum/126956/ze/WebSite31896520200

In this sample we have achieved your requirements on button click by passing the URL in the client side of button click and prevented the server side button events. We have passed the URL in the dataSource method of grid using ej.DataManager.

Now the data will be bound to grid when clicking the button.

Please refer the below code example.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<asp:Button ID="btnProcess" runat="server" Text="Read the Data to server"OnClientClick="return Navigate();" OnClick="btnProcessStrategy_Click"UseSubmitBehavior="false" />

<ej:Grid ID="Grid" runat="server" AllowPaging="True">

…

</ej:Grid>

</ContentTemplate>

</asp:UpdatePanel>

function Navigate() {

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

$("#autoComp").val((selectedvalue));

obj.dataSource(ej.DataManager({ url: "Default.aspx/DataSource", adaptor: newej.UrlAdaptor() }));

}

</script>

</asp:Content>

Also please refer the documentation link about dataSource method.

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

https://help.syncfusion.com/aspnet/grid/data-adaptors#url-adaptor

If we misunderstood your requirement then could you please share the following details.

1.Please share the grid code.

2.How much data binded for the grid through the button click?

3. Share the video to know in what scenario you have faced the issue.

4.Share the sample if possible or share more information to reproduce the issue.

The provided information will help us to analyze the issue and provide you the response as early as possible.

Regards,

Karthick.K.

AS Abhishek Shandilya November 24, 2016 02:02 AM UTC

Hi Karthick,

Thanks for quick response. But this solution does not work for me because i am using sqldatasource for databinding to grid. Now, I am sharing the complete code with you, so you can understand the problem that i am facing. Here is the code:

//ASPX Code

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="viewsalesinvoice.aspx.vb" Inherits="FutureERP.viewsalesinvoice" %>

<%@ Register Assembly="Syncfusion.EJ.Web, Version=14.3400.0.49, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"

Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>

<%@ Register assembly="Syncfusion.EJ, Version=14.3400.0.49, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" namespace="Syncfusion.JavaScript.Models" tagprefix="ej" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

$(document).ready(function () {

$("#<%=cmbday.ClientID %>").focus();

$("#aspnetForm").submit(function () {

if ($("#<%=cmbday.ClientID %>").val() == '') {

jAlert('Please select Day', 'Message', function () {

$("#<%=cmbday.ClientID %>").focus();

});

return false

} else if ($("#<%=cmbmonth.ClientID %>").val() == '') {

jAlert('Please select Month', 'Message', function () {

$("#<%=cmbmonth.ClientID %>").focus();

});

return false

} else if ($("#<%=cmbyear.ClientID %>").val() == '') {

jAlert('Please select Year', 'Message', function () {

});

$("#<%=cmbyear.ClientID %>").focus();

return false

} else if (validate_date($("#<%=cmbday.ClientID %>").val(), $("#<%=cmbmonth.ClientID %>").val(), $("#<%=cmbyear.ClientID %>").val()) == false) {

jAlert('Invalid Date', 'Message', function () {

$("#<%=cmbday.ClientID %>").focus();

});

return false;

} else if ($("#<%=cmbtday.ClientID %>").val() == '') {

jAlert('Please select Day', 'Message', function () {

$("#<%=cmbtday.ClientID %>").focus();

});

return false

} else if ($("#<%=cmbtmonth.ClientID %>").val() == '') {

jAlert('Please select Month', 'Message', function () {

$("#<%=cmbtmonth.ClientID %>").focus();

});

return false

} else if ($("#<%=cmbtyear.ClientID %>").val() == '') {

jAlert('Please select Year', 'Message', function () {

$("#<%=cmbtyear.ClientID %>").focus();

});

return false

} else if (validate_date($("#<%=cmbtday.ClientID %>").val(), $("#<%=cmbtmonth.ClientID %>").val(), $("#<%=cmbtyear.ClientID %>").val()) == false) {

jAlert('Invalid Date', 'Message', function () {

$("#<%=cmbtday.ClientID %>").focus();

});

return false;

} else if (doDateperiod($("#<%=cmbday.ClientID %>").val(), $("#<%=cmbmonth.ClientID %>").val(), $("#<%=cmbyear.ClientID %>").val(), $("#<%=cmbtday.ClientID %>").val(), $("#<%=cmbtmonth.ClientID %>").val(), $("#<%=cmbtyear.ClientID %>").val()) == false) {

jAlert('Invalid Period', 'Message', function () {

$("#<%=cmbtday.ClientID %>").focus();

});

return false

}

return true;

});

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="pagecontent" runat="server">

<h1 id="lblinvoice" class="form-panel-heading">Modify/View Stock Quality Check</h1>

<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" />

<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">

</td>

<OPTION value="" selected="selected">DD</OPTION><OPTION

value="1">1</OPTION><OPTION value="2">2</OPTION><OPTION

value="3">3</OPTION><OPTION value="4">4</OPTION><OPTION

value="5">5</OPTION><OPTION value="6">6</OPTION><OPTION

value="7">7</OPTION><OPTION value="8">8</OPTION><OPTION

value="9">9</OPTION><OPTION value="10">10</OPTION><OPTION value="11">11</OPTION><OPTION

value="12">12</OPTION><OPTION value="13">13</OPTION><OPTION value="14">14</OPTION><OPTION

value="15">15</OPTION><OPTION value="16">16</OPTION><OPTION value="17">17</OPTION><OPTION

value="18">18</OPTION><OPTION value="19">19</OPTION><OPTION value="20">20</OPTION><OPTION

value="21">21</OPTION><OPTION value="22">22</OPTION><OPTION value="23">23</OPTION><OPTION

value="24">24</OPTION><OPTION value="25">25</OPTION><OPTION

value="26">26</OPTION><OPTION

value="27">27</OPTION><OPTION value="28">28</OPTION><OPTION value="29">29</OPTION><OPTION

value="30">30</OPTION>

<OPTION value="" selected="selected">Month</OPTION>

<OPTION value="1">January</OPTION>

<OPTION value="2">February</OPTION>

<OPTION value="3">March</OPTION>

<OPTION value="4">April</OPTION>

<OPTION value="8">August</OPTION>

<OPTION value="9">September</OPTION>

<OPTION value="10">October</OPTION>

<OPTION value="11">November</OPTION>

<OPTION value="12">December</OPTION>

</select>

</select></td>

</tr>

</td>

</select>

<option selected="selected" value="">Month</option>

<option value="1">January</option>

<option value="2">February</option>

<option value="3">March</option>

<option value="4">April</option>

<option value="8">August</option>

<option value="9">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

</select>

</td>

</tr>

<asp:Button ID="btnsubmit" runat="server" OnClick="btn_Click" Text="Submit" Width="110" />  

</td>

</tr>

</table>

<ej:Grid ID="dg" runat="server" IsResponsive="true" AllowSelection="false" AllowSorting="True" DataSourceID="sql" AllowSearching="True"

OnServerWordExporting="FlatGrid_ServerWordExporting" OnServerPdfExporting="FlatGrid_ServerPdfExporting"

OnServerExcelExporting="FlatGrid_ServerExcelExporting" AllowScrolling="true" AllowTextWrap="true" ShowSummary="true">

<ej:SummaryRow Title="Total">

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

</SummaryColumn>

</ej:SummaryRow>

</SummaryRows>

<ej:Column Field="vno" HeaderText="No." Template="<a rel='nofollow' href='salesinvoice.aspx?id={{:id}}'>{{:vno}}</a>" Width="75" />

<ej:Column Field="vdate" HeaderText="Date" Width="100" Format="{0:dd-MM-yyyy}" />

<ej:Column Field="billno" HeaderText="Ref. No." Width="125"/>

<ej:Column Field="name" HeaderText="Party Name" Width="250" />

<ej:Column Field="saletype" HeaderText="SaleType" Width="100" />

<ej:Column Field="value" HeaderText="Value" TextAlign="Right" Width="100" />

<ej:Column Field="status" HeaderText="Status" TextAlign="Center" AllowFiltering="false" Width="70" />

<ej:Column HeaderText="Print" TextAlign="Center" Template="<a target='_blank' rel='nofollow' href='reportviewer.aspx?id={{:id}}&tp=10'>Print</a>" Width="60" AllowSorting="false" AllowFiltering="false" />

</Columns>

</ej:Grid>

</contenttemplate>

<asp:AsyncPostBackTrigger ControlID="btnsubmit" />

</Triggers>

</asp:UpdatePanel>

</div>

<asp:SqlDataSource ID="sql" ConnectionString="<%$ ConnectionStrings:connectinfo %>" runat="server"

SelectCommand="Select a.id,a.vno,a.vdate,isnull(e.name,'') as name,case when a.saletype=0 then 'Local' else 'Central' end as saletype,isnull(round(a.amount,0),0) as value,isnull(a.billno,'') as billno,

case a.status when 1 then 'Done' else 'Canceled' end as status

from voucherMaster a

left join PartyMaster e on a.distid=e.ID and a.CompanyID=e.CompanyID

where a.vtype=@vtype and a.departmentid=@depid and a.companyid=@compid and convert(datetime,convert(varchar(80),a.vdate,112))>=@from and convert(datetime,convert(varchar(80),a.vdate,112))<=@to order by a.vdate">

<asp:Parameter Name="depid" Type="String" Direction="Input" />

<asp:Parameter Name="compid" Type="Int64" Direction="Input" />

<asp:Parameter Name="from" Type="DateTime" Direction="Input" />

<asp:Parameter Name="to" Type="DateTime" Direction="Input" />

<asp:Parameter Name="vtype" Type="Int16" Direction="Input" />

</SelectParameters>

</asp:SqlDataSource>

</asp:Content>

//Server code

Imports System.Data.SqlClient

Imports Syncfusion.EJ.Export

Imports DevExpress.XtraPrinting

Imports System.Globalization

Public Class viewsalesinvoice

Inherits System.Web.UI.Page

Dim myconn As New SqlConnection(ConfigurationManager.ConnectionStrings("connectinfo").ToString())

Dim script As String = ""

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Try

If Not IsPostBack Then

myconn.Open()

For i As Integer = 2013 To Date.Now.Year + 1

cmbyear.Items.Add(New ListItem(i, i))

cmbtyear.Items.Add(New ListItem(i, i))

cmbtday.Value = Date.Now.Day

cmbmonth.Value = Date.Now.Month

cmbtmonth.Value = Date.Now.Month

cmbyear.Value = Date.Now.Year

cmbtyear.Value = Date.Now.Year

Dim vtype As Integer = Val(Request.QueryString("tp"))

Dim formid As Integer = 0

If vtype = 8 Then

formid = 73

ElseIf vtype = 9 Then

formid = 82

End If

If FormAuthentication(formid, Page.User.Identity.Name, myconn) = False Then

Response.Redirect("index.aspx")

Exit Sub

End If

Dim cmd As New SqlCommand("Select name from voucher_info where vtype=" & vtype, myconn)

Dim vname As String = cmd.ExecuteScalar()

ViewState("vname") = vname

script = script & "$('#lblinvoice').text('Modify/View " & vname & "');"

Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "editscript", "$(function(){" & script & "});", True)

sql.SelectParameters("vtype").DefaultValue = vtype

sql.SelectParameters.Item("depid").DefaultValue = GetDepartmentID(myconn)

sql.SelectParameters.Item("compid").DefaultValue = GetCompID(myconn)

sql.SelectParameters.Item("from").DefaultValue = New Date(Date.Now.Year, Date.Now.Month, 1)

sql.SelectParameters.Item("to").DefaultValue = Date.Now

dg.DataBind()

myconn.Close()

End If

Catch ex As Exception

End Try

End Sub

Protected Overrides Sub InitializeCulture()

Dim ci As New CultureInfo("en-IN")

ci.NumberFormat.CurrencySymbol = "Rs"

Threading.Thread.CurrentThread.CurrentCulture = ci

MyBase.InitializeCulture()

End Sub

Sub btn_Click(ByVal sender As Object, ByVal e As EventArgs)

Try

btnsubmit.Text = "Clicked"

sql.SelectParameters.Item("from").DefaultValue = New Date(Val(cmbyear.Value), Val(cmbmonth.Value), Val(cmbday.Value))

sql.SelectParameters.Item("to").DefaultValue = New Date(Val(cmbtyear.Value), Val(cmbtmonth.Value), Val(cmbtday.Value))

'dg.DataBind()

Catch ex As Exception

Response.Write(ex.Message)

End Try

End Sub

Public Sub FlatGrid_ServerExcelExporting(ByVal sender As Object, ByVal e As Syncfusion.JavaScript.Web.GridEventArgs)

Try

Dim exp As ExcelExport = New ExcelExport()

'exp.Export(dg.Model, DirectCast(dg.DataSource, IEnumerable), "CityList.xlsx", ExcelVersion.Excel2007, True, True, ExportTheme.FlatLime)

Catch ex As Exception

Response.Write(ex.Message)

End Try

End Sub

Public Sub FlatGrid_ServerWordExporting(ByVal sender As Object, ByVal e As Syncfusion.JavaScript.Web.GridEventArgs)

Try

Catch ex As Exception

Response.Write(ex.Message)

End Try

End Sub

Public Sub FlatGrid_ServerPdfExporting(ByVal sender As Object, ByVal e As Syncfusion.JavaScript.Web.GridEventArgs)

Try

Catch ex As Exception

Response.Write(ex.Message)

End Try

End Sub

End Class

KK Karthick Kuppusamy Syncfusion Team November 24, 2016 03:49 PM UTC

Hi Abhishek,

While we binding the large amount of sql data to the grid we are faced the reported issue and we suggest you to use the ‘SqlLoadOnDemand’ concept for your requirement

Online sample link: https://asp.syncfusion.com/demos/web/grid/sqlloadondemand.aspx.

Regards,

K.Karthick.

AS Abhishek Shandilya replied to Karthick Kuppusamy November 25, 2016 03:38 AM UTC

Hi Abhishek,

While we binding the large amount of sql data to the grid we are faced the reported issue and we suggest you to use the ‘SqlLoadOnDemand’ concept for your requirement

Online sample link: http://asp.syncfusion.com/demos/web/grid/sqlloadondemand.aspx.

Regards,

K.Karthick.

Problem is not with databinding concept, if i remove the update panel from the page, grid works fine. I think there is some javascript code confliction of asp script manager with ej grid javascript files. You have to help with Javascript error. Kindly go through the code once again.

KK Karthick Kuppusamy Syncfusion Team November 29, 2016 01:50 AM UTC

Hi Abhishek,

We have analyzed your provided code and still we are not able to reproduce the reported issue.

Please find the code example.

<asp:Updatepanel ID="panel1" runat="server">

<ej:Grid ID="EmployeesGrid" runat="server" Width="900px" AllowPaging="true" AllowFiltering="true" AllowSorting="true">

<ej:Column Field="CustomerID" IsPrimaryKey="true" HeaderText="Customer ID" Width="80" />

<ej:Column Field="CompanyName" HeaderText="Company Name" Width="80" />

<ej:Column Field="ContactName" HeaderText="Contact Name" Width="100" EditType="Numeric" />

<ej:Column Field="Address" HeaderText="Address" Width="80" />

</Columns>

</ej:Grid>

<asp:SqlDataSource ID="SqlData" runat="server" ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>"

SelectCommand="SELECT * FROM [Orders]"></asp:SqlDataSource>

</ContentTemplate>

</asp:Updatepanel>

$(document).ready(function () {

$("#aspnetForm").submit(function () {

alert("hi");

});

return false

</script>

</asp:Content>

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Updatepanel1354150083.zip.

If you still faced the issue could you please share the sample or modify the sample as issue reproducible.

Regards,

K.Karthick.

AS Abhishek Shandilya November 29, 2016 01:53 AM UTC

In order to re-produce the issue, you have to add asp button inside update panel and define its click event on server side.

KK Karthick Kuppusamy Syncfusion Team November 29, 2016 01:42 PM UTC

Hi Abhishek,

We have created a sample based on your requirement and we are unable to reproduce the issue.In that sample we have created a asp button and we define its click event in server side.

Please find the code example.

asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<asp:Updatepanel ID="panel1" runat="server">

<asp:Button OnClick="Unnamed_Click" Text="clickthecolumn" runat="server" />

<ej:Grid ID="Grid1" runat="server" DataSourceID="SqlDataSource1" MinWidth="0" AllowPaging="true">

<ej:Column AllowEditing="False" DataType="number" Field="OrderID" HeaderText="Column4" IsIdentity="True" IsPrimaryKey="True">

</ej:Column>

<ej:Column DataType="string" Field="CustomerID" HeaderText="Column4">

</ej:Column>

<ej:Column DataType="number" Field="EmployeeID" HeaderText="Column4">

</ej:Column>

<ej:Column DataType="date" Field="OrderDate" HeaderText="Column4">

</ej:Column>

</Columns>

</ej:Grid>

</ContentTemplate>

</asp:Updatepanel>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>" SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate] FROM [Orders]"></asp:SqlDataSource>

</asp:Content>

Please find the snapshot for the serverside click event.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NOW-1952257705.zip.

Please share the sample or modify the sample as issue reproducible and revert back to us.

Regards,

K.Karthick.

AS Abhishek Shandilya November 30, 2016 05:54 PM UTC

Thanks sir its working fine. now i want to export this grid in world excel and pdf. so please share code so i can implement this.

KK Karthick Kuppusamy Syncfusion Team December 1, 2016 09:33 AM UTC

Hi Abihishek,

We are happy to hear that the provided solution is helped you.

Please find help documentation for exporting.

https://help.syncfusion.com/aspnet/grid/exporting?cs-save-lang=1&cs-lang=csharp.

Online demo link:

https://asp.syncfusion.com/demos/web/grid/excelexporting.aspx.

Please let us know if you need any further assistance on this.

Regards,

K.Karthick.

AS Abhishek Shandilya December 1, 2016 06:22 PM UTC

I have already checked these links with no success. Can you please add the export to excel, word code in the project that you have shared with me earlier.

Thanks in advance.

SA Saravanan Arunachalam Syncfusion Team December 2, 2016 12:37 PM UTC

Hi Abhishek,

We are sorry for the inconvenience.

The partial post will done when rendered the Grid control within the update panel and we need to trigger the post-back for exporting. We have already discussed this query in the following Knowledge Base document.

https://www.syncfusion.com/kb/5442/how-to-export-the-data-when-grid-is-in-updatepanel

Regards,

Saravanan A.

AS Abhishek Shandilya December 8, 2016 03:06 AM UTC

Thanks, now its working fine. But when i export data to excel it shows warning message in excel. I have attached screenshots with excel file for reference.

Kindly help!

Attachment: excelerror_401fa6ee.zip

SA Saravanan Arunachalam Syncfusion Team December 8, 2016 11:08 AM UTC

HI Abhishek,

We have analyzed your provided information and the mentioned issue occurred due to document is corrupted. That the issue occurred in different scenarios and we can’t provide the exact solution. So, could you please share the following details to reproduce the issue?

· Provide clear replication procedure to reproduce the issue.

· Provide the client Grid rendering code.

· Provide your data schema/data model to bind the data to the Grid.

· Provide server side exporting code.

· Provide screenshot of expected output.

· If possible reproduce the issue in below attached sample.

So that we could provide you response as early as possible? And we have attached the exporting sample with update panel that can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/127551/ze/SyncfusionASPNETApplication11494030433

Regards,

Saravanan A.

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Enterprise Solutions

Free Products

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

Grid control inside update panel not triggering button click event