GridView paging in modalpopupextender issue
:
I have a GridView in modalpopupextender...but the thing is Paging is not working inside it....
My HTML code is:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:gridview runat="server" id="GridView2" showfooter="true"
autogeneratecolumns="false" GridLines="None" CssClass="table"
HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%"
OnRowCreated="GridView2_RowCreated" >
<columns>
<asp:TemplateField HeaderText="Date" >
<ItemTemplate>
<asp:LinkButton ID="Date" runat="server" CausesValidation="false" CommandName="Date_Select" Text='<%#Eval("Date","{0:yyyy-MM-dd}") %>' onclick="Date1_Click" EnableTheming="False"></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
</EditItemTemplate>
</asp:TemplateField>
<asp:boundfield datafield="" headertext="Total" footerstyle-font-bold="true"
footertext="Grand Total:" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="MIns" headertext="Mins"
footerstyle-font-bold="true" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="Amount" headertext="Amount" footerstyle-font-bold="true"
>
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="Profit" headertext="Profit"
footerstyle-font-bold="true">
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
</columns>
<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid"
BorderWidth="1px"></HeaderStyle>
<RowStyle CssClass="td"></RowStyle>
</asp:gridview>
<asp:Button runat="server" ID="btnModalPopUp1"
style="display:none"/>
<AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender2"
runat="server"
TargetControlID="btnModalPopUp1"
PopupControlID="pnlPopUp1"
BackgroundCssClass="modalBackground" CancelControlID="btnCancel1" X="570" Y="10"
>
</AjaxToolkit:ModalPopupExtender>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<div class="modal">
<div class="center" align="center">
This can take a while. Please be patient...
<img alt="" src="Images/loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Panel runat="Server" ID="pnlPopUp1" CssClass="modalPopup">
<asp:Button runat="server" ID="btnCancel1"
Text="Close"/>
<asp:gridview runat="server" id="GridView18" showfooter="true"
autogeneratecolumns="false" GridLines="None" CssClass="table"
HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%"
AllowPaging="True" OnPageIndexChanging="OnPageIndexChanging" PageSize="10"
EnableSortingAndPagingCallbacks="True" >
<columns>
<asp:boundfield datafield="Customer" headertext="Customer"
footerstyle-font-bold="true" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="MIns" headertext="Mins" footerstyle-font-bold="true" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="Amount" headertext="Amount"
footerstyle-font-bold="true" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="Profit" headertext="Profit" footerstyle-font-bold="true"
>
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
</columns>
<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid"
BorderWidth="1px"></HeaderStyle>
<RowStyle CssClass="td"></RowStyle>
</asp:gridview>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "GridView18" EventName="PageIndexChanging" />
</Triggers>
</asp:UpdatePanel>
This is my Code Behind for Paging:
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView18.DataSource = ds;
GridView18.PageIndex = e.NewPageIndex;
GridView18.DataBind();
modalPopUpExtender2.Show();
}
Any help is highly appreciated ...Thanks in advance...
First: if you go to MSDN concerning UpdatePanels and scroll down to the section:
Controls that Are Not Compatible with UpdatePanel Controls
You find this:
GridView and DetailsView controls when their EnableSortingAndPagingCallbacks property is set to true.
Paging a Gridview requires a Postback. Typically when you use any kind of modal/popup control it uses JS to activate. But a postback is going eliminate the popup...so...
The main thing is you need to be able to maintain the popup state between postbacks. There are a couple of ways to handle this.
Easiest is to eliminate the paging and use scrolling, assuming the total number of items is a manageable list. If the list is too long chances are that it's also too much information for a user anyway and should be filtered to a manageable list.
If you must use paging, you need to use a popup control that can withstand postbacks, which may mean using an <iframe>. I don't know enough about the AjaxControlToolkit to say if it can be done that way.
Personally, when I needed to do what you are trying to do via popup, I use Colorbox. But this also requires jquery.
I move the gridview to a standalone page and configure Colorbox to open the page in an iframe. This way the iframe manages the paging postbacks.
Related
After checking a condition I want to hide or view an image button inside a gridView.
I tried to like this. but it is not working.
<asp:GridView ID="GridView1" runat="server" Width="100%" CssClass="grid" AutoGenerateColumns="False"
EnableModelValidation="True" DataKeyNames="T_ID" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging"
OnRowCommand="GridView1_RowCommand" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="TEMPL_TITLE" HeaderText="Title">
<HeaderStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="TEMPL_DESC" HeaderText="Description">
<HeaderStyle Width="200px" />
</asp:BoundField>
<asp:BoundField HeaderText="Category" DataField="CAT_NAME" />
<asp:BoundField HeaderText="Workflow Type" DataField="WFTYPE_DESCRIPTION" />
<asp:BoundField HeaderText="Owner" DataField="EMP_CALLING_NAME" />
<%# if(Eval("EXP_PENDING_APPR").ToString() == "0") { %>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ViewImageButton1" runat="server" CommandArgument='<%# Eval("TEMPL_ID") %>'
ImageUrl="Images/jdAttView.gif" OnCommand="btnViewTemplate_Click" ToolTip="View and download template" />
</ItemTemplate>
</asp:TemplateField>
<% } %>
</Columns>
<EmptyDataTemplate>
No templates have been assigned to you security capabilites, Please contact your
local administrator for more information.
</EmptyDataTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:GridView>
The error with this code
The error with this code
You can apply condition on server control itself.
<asp:ImageButton Visible='<%# Eval("EXP_PENDING_APPR").ToString().Equals("0") %>' ID="ViewImageButton1" runat="server" CommandArgument='<%# Eval("TEMPL_ID") %>' ImageUrl="Images/jdAttView.gif" OnCommand="btnViewTemplate_Click" ToolTip="View and download template" />
Currently I have 3 checkboxes in gridview which are Approval,Access and Edit. What I want to achieve is when I checked the Edit column, the Access column will be checked automatically too. Is there any way to solve this? I have looked through a lot internet source but still not able to do it. Please help me..
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowSorting="True" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="11pt" HorizontalAlign="Center" Width="65%">
<Columns>
<asp:BoundField DataField="Module" HeaderText="Module" SortExpression="Module" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
<asp:TemplateField HeaderText="Approval">
<ItemTemplate>
<asp:CheckBox ID="CBApproval" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Access">
<ItemTemplate>
<asp:CheckBox ID="CBAccess" runat="server" AutoPostBack="False" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:CheckBox ID="CBEdit" runat="server" AutoPostBack="True"/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#FFCC00" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px" />
</asp:GridView>
Sinc edit checkbox postback you may set the value of accessed checkbox from codebehind.. Add new event to edit checkbox on click and set new value for accessed checkbox.checked
Works fine in google chrome and firefox but GRIDVIEW is not appearing in IE11.
No errors in console, viewed source and it just isnt there??
Had a look online and couldnt find much someone suggested adding in GridLines="None" but that didnt have any effect....Any ideas please?
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="false" Width="100%" ViewStateMode="Enabled"
BorderWidth="1px" BackColor="White" CellPadding="3" BorderStyle="None"
BorderColor="#CCCCCC" Font-Names="Arial" GridLines="None">
<FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
<PagerStyle ForeColor="#000066" HorizontalAlign="Left"
BackColor="White"></PagerStyle>
<HeaderStyle ForeColor="White" Font-Bold="True"
BackColor="#1e4964"></HeaderStyle>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="SelectedCheckBox" runat="server" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="CheckHeader" OnCheckedChanged="CheckHeader_OnCheckedChanged" AutoPostBack="true" runat="server" />
</HeaderTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="File" DataField="File">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderText="Date Added" DataField="DateAdded" DataFormatString="{0:d}">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<a href="<%# ResolveUrl((string)Eval("LargePictureURL"))%>" onclick="magnificPopup('GridView1')">
<img alt="" src='<%# ResolveUrl((string)Eval("PictureURL"))%>' style="max-height: 20px; max-width: 30px; text-align: center" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="ID" DataField="ID" Visible="true">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
</Columns>
<SelectedRowStyle ForeColor="White" Font-Bold="True"
BackColor="#669999"></SelectedRowStyle>
<RowStyle ForeColor="#000066"></RowStyle>
</asp:GridView>
UPDATE
The gridview is populated with
// Update the images displayed on the gridview
GridView1.DataSource = GetData(false);
GridView1.DataBind();
upViewUploadImages.Update();
Same process shows images for FIREFOX and GOOGLE but not on IE.
The problem is that you don't have set the data source on your grid view - DataSourceID not exist at all.
To display some data your on grid view you need to tell him what that data are.
So I will confuse at first because I believe the the IE11 was the problem but after your comments I realize that you do not have set any data to show !
Eg: You must have something like (if you do not use code behind data binder)
<asp:GridView DataSourceID="ThisPageSql" runat="server" ...
<asp:SqlDataSource ID="ThisPageSql" runat="server"
ConnectionString="<%$ ConnectionStrings:DbCoonect %>" ...
I am trying to open a ModalPopup on GridView LinkButton, but when I am giving LinkButton ID to targetcontrolid of pop up, it is not accepting.
Please help me.
<asp:GridView ID="grdView" runat="server" AutoGenerateColumns="False" CellPadding="0"
ForeColor="#333333" GridLines="None" onrowdatabound="grdView_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Dr. Photo">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Style="height: 80px; width: 100px;" ImageUrl='<%# String.Format("~/Upload/Docters/" + Eval("ImgName")) %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150px" >
<ItemStyle Width="150px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Qualification" HeaderText="Qualification"
ItemStyle-Width="50px" >
<ItemStyle Width="50px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="Click to Contact">
<ItemTemplate>
<asp:LinkButton ID="popup" runat="server" Text="Click to Contact"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<ajaxToolKit:ModalPopupExtender id="ModalPopupExtender1" runat="server"
cancelcontrolid="btncancel" okcontrolid="btnSend"
targetcontrolid="Button1" popupcontrolid="Panel1"
popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG">
</ajaxToolKit:ModalPopupExtender
I am placing my code It will work
<asp:GridView ID="gvproducts" runat="server" DataKeyNames="sno," AutoGenerateColumns="false"
OnRowCommand="gvproducts_RowCommand" OnPageIndexChanging="gvproducts_PageIndexChanging"
AllowPaging="true" PageSize="10" EmptyDataText="No Record Found" Width="100%"
BorderColor="#BDBDBD" HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" >
<Columns>
<asp:TemplateField HeaderText="SNo" FooterStyle-HorizontalAlign="Center">
<ItemTemplate>
<span>
<%#Container.DataItemIndex + 1%>
</span>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="indentid" HeaderText="Indent ID"></asp:BoundField>
<asp:BoundField DataField="productid" HeaderText="Product ID" ></asp:BoundField>
asp:BoundField DataField="productname" HeaderText="Product Name" ></asp:BoundField>
<asp:BoundField DataField="quantity" HeaderText="Quantity" ></asp:BoundField>
<asp:BoundField DataField="unit" HeaderText="Unit" ></asp:BoundField>
asp:BoundField DataField="requestby" HeaderText="Request By"></asp:BoundField>
<asp:TemplateField HeaderText="Purchase" ItemStyle-HorizontalAlign="Center">
ItemTemplate>
<asp:LinkButton ID="lnkPurchase" runat="server" CommandName="Purchase" CommandArgument="<%#Container.DataItemIndex%>"
ext="Purchase" ForeColor="blue">
</asp:LinkButton>
</ItemTemplate>
/asp:TemplateField>
</Columns>
</asp:GridView>
//Modal Popup
<input id="Hid_Sno" type="hidden" name="hddclick" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="MPEPurchase" runat="server" TargetControlID="Hid_Sno"
PopupControlID="pnlpurchase" RepositionMode="RepositionOnWindowResizeAndScroll"
BackgroundCssClass="modalBackground" CancelControlID="btnxcancel" PopupDragHandleControlID="pnlpurchase" />
.CS
protected void gvproducts_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.ToUpper() == "PURCHASE")
{
MPEPurchase.Show();
}
}
You have to use GridView's RowDataBound Event for this as "any control inside the grid is not directly accessible". so you need to find the control in gridview's rowdatabound and then set "targetcontrolid" of Ajaxmodalpopup extender.
I think the simplest solution to this problem is to see the generated HTML output of the webpage and find out the exact rendered id of the Button control.
Once that is found simply replace the id in the following code with the generated id.
<ajaxToolKit:ModalPopupExtender id="ModalPopupExtender1" runat="server"
cancelcontrolid="btncancel" okcontrolid="btnSend"
targetcontrolid="Button1" popupcontrolid="Panel1"
popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG">
Most of the time the asp.net engine replaces the control id with its own ids. So your
targetcontrolid ="Button1" may not be firing.
Another way to resolve this issue is by replacing the code as follows:
Replace the following with:
targetcontrolid ="Button1"
this
targetcontrolid ='<%=Button1.ClientID%>'
I have grid named 'GridView1' and displaying columns like this
<asp:GridView ID="GridView1" OnRowCommand="ScheduleGridView_RowCommand"
runat="server" AutoGenerateColumns="False" Height="60px"
Style="text-align: center" Width="869px" EnableViewState="False">
<Columns>
<asp:BoundField HeaderText="Topic" DataField="Topic" />
<asp:BoundField DataField="Moderator" HeaderText="Moderator" />
<asp:BoundField DataField="Expert" HeaderText="Expert" />
<asp:BoundField DataField="StartTime" HeaderText="Start" >
<HeaderStyle Width="175px" />
</asp:BoundField>
<asp:BoundField DataField="EndTime" HeaderText="End" >
<HeaderStyle Width="175px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Join" ShowHeader="False">
<ItemTemplate>
<asp:Button ID="JoinBT" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="Join" Text="Join" Width="52px" />
</ItemTemplate>
<HeaderStyle Height="15px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Here what is my requirement is whenever we right click on each row in gridview ,it should display three option join meeting(if we click it will go to
meeting.aspx),,view details(will go to detail.aspx),,Subscribe(subscribe.aspx) just like when we click right any where we can see view,sortby,refresh
like that..Do we need to implement javascript here