I am trying to write some data to a database and then update the gridview with the updated data. There is a nested gridview inside the other. I also have two update panels. The child gridview is inside parent updatepanel. at the end of parent updatepanel, child update panel starts, that has a button.
On click I have managed to write to the DB, using find control, I can find the dynamic gridview, re-bind it to the data source. I can also find the child updatepanel and I am using the update method. but it is not updating. I am getting no errors.
<ItemTemplate>
<img alt="" runat="server" style="cursor: pointer" src="images/plus.png" />
<asp:UpdatePanel ID="pnlOrders" runat="server" Style="display: none" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="OrderId" HeaderText="Contact Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="City" />
</Columns>
</asp:GridView>
<asp:UpdatePanel id="pnChild" runat="server" CssClass="ChildGrid" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("CustomerID") %>'></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="MyButtonClick" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
C Sharp code:
GridView gvOrder = gvr.FindControl("gvOrders") as GridView;
gvOrder.DataSource = GetData(string.Format("select top 10 * from Orders where CustomerId='{0}'", cID));
gvOrder.DataBind();
UpdatePanel uPanel = gvr.FindControl("pnlOrders") as UpdatePanel;
uPanel.Update();
Html output:
<table class="Grid" cellspacing="0" rules="all" border="1" id="gvCustomers" style="border-collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col">Contact Name</th><th scope="col">Contact Name</th><th scope="col">City</th>
</tr><tr>
<td>
<img src="images/plus.png" alt="" style="cursor: pointer" />
<div id="gvCustomers_pnlOrders_0">
<div>
<table class="ChildGrid" cellspacing="0" rules="all" border="1" id="gvCustomers_gvOrders_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Contact Name</th><th scope="col">City</th>
</tr><tr>
<td style="width:150px;">1</td><td style="width:150px;">19-05-18</td>
</tr><tr>
<td style="width:150px;">12</td><td style="width:150px;">25-05-18</td>
</tr>
</table>
</div>
<div id="gvCustomers_pnChild_0" CssClass="ChildGrid">
<input name="gvCustomers$ctl02$TextBox1" type="text" id="gvCustomers_TextBox1_0" />
<input name="gvCustomers$ctl02$TextBox2" type="text" value="1" id="gvCustomers_TextBox2_0" />
<input type="submit" name="gvCustomers$ctl02$Button1" value="Button" id="gvCustomers_Button1_0" />
</div>
The HTML layout looks wrong, but that's because I have only posted output of one row. There are no layout issues.
When you use the UpdateMode="Conditional" then you have to set the ChildrenAsTriggers="False".
And manually trigger your button(s) or other controls events as AsyncPostBackTrigger like:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
and manually update your updatepanel as yourupdatepanel.Update():
UpdatePanel uPanel = gvr.FindControl("pnlOrders") as UpdatePanel;
uPanel.Update();
The issue seemed to be with nesting of the panels. I changed the child updatepanel to just a panel and all seems to be working without needing a trigger declaration.
Related
I am facing a strange problem. Inside a grid view I have some image button which is again inside update panel to load some calendar content with partial post back without any page refresh.
This partial postback is working for first few rows but after few rows, lets say around 15 rows the button click event not hitting and only breakpoint going in page load event and the the entire page refresh.
there are huge data in each row but I am for example showing the update panel structure. please help me to fix the issue . I have tried various way to fix it but still facing same issue.
<asp:GridView ID="GVSales" runat="server" AllowPaging="false" AutoGenerateColumns="false" DataKeyNames="UserId" BackColor="#FFFFCC" EmptyDataText="No salesman selected to show" OnRowDataBound="GVSales_OnRowDataBound" OnDataBound="GVSales_AfterDataBound">
<PagerSettings Visible="false" />
<AlternatingRowStyle BackColor="#99CCFF" />
<Columns>
<asp:BoundField DataField="GroupName" Visible="false" />
<asp:TemplateField>
<ItemTemplate>
<table width="100%" border="1px" cellpadding="0" cellspacing="0" style="color: Black; font-family: Arial; text-align: center">
<tr>
<td colspan="18" style="text-align: left">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<div id="divNavigateCal" runat="server" style="float: right; display: none">
<asp:HiddenField ID="hdnDaydiff" runat="server" Value="1" />
<div class="blink" id="BlinkLoad" style="width: 100px; padding-top: 10px; vertical-align: top; display: none">Please Wait...</div>
<asp:ImageButton ID="imgBtnPrevious" AutoPostback="false" runat="server" class="Previous" CommandArgument='<%# Eval("UserId")%>' Customid='<%# Eval("UserId") %>' OnClientClick='<%# "GetCustomerID(" + Eval("UserId") + ");" %>' ImageUrl="~/admin/images/cal_previous.gif" OnClick="imgBtnPrevious_Click" />
<asp:ImageButton ID="imgBtnNext" runat="server" class="Next" CommandArgument='<%# Eval("UserId")%>' Customid='<%# Eval("UserId") %>' OnClientClick='<%# "GetCustomerID(" + Eval("UserId") + ");" %>' ImageUrl="~/admin/images/cal_next.gif" OnClick="imgBtnNext_Click"/>
</div>
<input type="button" class="ShowCalendar" value="Show/Hide Calendar" runat="server" data-id='<%# Eval("UserId")%>' /> <asp:Label ID="lbl_alert1" runat="server" Text="Started this week with low meetings" ForeColor="Red" Font-Bold="true" Width="300" Visible='<%# (Convert.ToBoolean(Eval("Alert1"))) %>'></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Did not create 7 meetings on monday." ForeColor="Red" Font-Bold="true" Width="300" Visible='<%# (Convert.ToBoolean(Eval("Alert2"))) %>'></asp:Label>
<table id="calendar">
<tr>
<td>
</td>
</tr>
</table>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgBtnPrevious" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="imgBtnNext" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Here I am updating the table calendar content with partial postback for button click event of imgBtnPrevious imgBtnNext which has some calendar like structure.
This code is working fine for 1st 14 - 15 rows but this issue coming after that.
Note:
there are other huge data in each row but here i have shown only the update panel structure for example.
UPDATE
I have investigated the issue further and disabled all update panels to check if update panel is causing issue but I found it not due update panel. The buttons click event is not firing after 14 -15 rows. even tried with row command and still same. what may be the root of this issue? any solution? please help. Whenever i click the button it just reload the page but click event is not hitting the debugger.
I found the issue. OnRowdataBound of grid view there was some code which was appending extra row in that table which was causing this strange issue.
I have an Grid with 2 checkboxes. But it's display in 2 lines and I need that display in one line (Ckeckboxes + Label).
I use CSS Bootstrap. IN Checkbox, I set to display inline.
My css.
input[type="checkbox"] { cursor: pointer; display: inline;}
My page:
<div id="Div1" width="auto" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" GridLines="None"
CssClass="table table-bordered table-striped" Width="100%">
<Columns>
<asp:BoundField DataField="idTickets" HeaderText="ID" />
<asp:BoundField DataField="User" HeaderText="User" />
<asp:BoundField DataField="RequestDate" HeaderText="Request Date" DataFormatString="{0:d}" />
<asp:BoundField DataField="BusinessJustification" HeaderText="Business Justification" />
<asp:BoundField DataField="AccessType" HeaderText="Group Access" />
<asp:BoundField DataField="sub_folder_path" HeaderText="Folder Path" />
<asp:BoundField DataField="ServerName" HeaderText="Server Name" />
<asp:TemplateField HeaderText="Approved/Denied">
<ItemTemplate>
<asp:HiddenField ID="UserValue" runat="server" Value='<%# Bind("User") %>' />
<asp:CheckBox ID="CheckBox1" runat="server" Text="Approved" OnCheckedChanged="CheckBox1_ChangeCheck"
AutoPostBack="true" />
<asp:CheckBox ID="CheckBox2" runat="server" Text="Denied" OnCheckedChanged="CheckBox2_ChangeCheck"
AutoPostBack="true" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
How I can configure this CkechBox to display in just one row? I have this problem in other 2 pages.
Attached print:
My html:
<tr><td>
<input type="hidden" name="GridView1$ctl02$UserValue" id="GridView1_UserValue_0" value="MXLozadaRa">
<input id="GridView1_CheckBox1_0" type="checkbox" name="GridView1$ctl02$CheckBox1" onclick="javascript:setTimeout('__doPostBack(\'GridView1$ctl02$CheckBox1\',\'\')', 0)">
<label for="GridView1_CheckBox1_0">Approved</label>
<input id="GridView1_CheckBox2_0" type="checkbox" name="GridView1$ctl02$CheckBox2" onclick="javascript:setTimeout('__doPostBack(\'GridView1$ctl02$CheckBox2\',\'\')', 0)">
<label for="GridView1_CheckBox2_0">Denied</label>
</td></tr>
Second Div with CkeckBox.
<div align="center" width="auto" id="DivCheckBox">
<input id="ckbApprovalAll" type="checkbox" name="ckbApprovalAll" onclick="javascript:setTimeout('__doPostBack(\'ckbApprovalAll\',\'\')', 0)">
<label for="ckbApprovalAll">Approved All</label>
<input id="ckbDeniedAll" type="checkbox" name="ckbDeniedAll" onclick="javascript:setTimeout('__doPostBack(\'ckbDeniedAll\',\'\')', 0)">
<label for="ckbDeniedAll">Denied All</label>
<br>
<br>
<input type="submit" name="btnSend" value="Send" id="btnSend" class="btn" align="center">
</div>
The easiest way is to use table. I avoid using table these days.
In this case, GridView generates a table anyway, so it doesn't matter anymore.
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="false" GridLines="None" Width="100%">
<Columns>
...
<asp:TemplateField HeaderText="Approved/Denied">
<ItemTemplate>
<table>
<tr>
<td><asp:CheckBox ID="CheckBox1" ... /></td>
<td><asp:CheckBox ID="CheckBox2" ... /></td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
If you want to display both text and checkbox in a single line, you can remove text from CheckBox, and display in td separately.
<table>
<tr>
<td><asp:CheckBox ID="CheckBox1" ... /></td>
<td>Approved</td>
<td><asp:CheckBox ID="CheckBox2" ... /></td>
<td>Denied</td>
</tr>
</table>
Last but not least you can render each checkbox in separate Template Field. I prefer this approach than other two.
<asp:GridView ID="GridView1" runat="server" ...>
<Columns>
<asp:TemplateField HeaderText="Approved">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" .../>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Denied">
<ItemTemplate>
<asp:CheckBox ID="CheckBox2" ... />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
There's much easier and cleaner solution.
Adding CssClass (proper way)
All you need to do is add a CSS class to every asp:CheckBox you want to render inline. If you do that, ASP will automagically render input+label inside a parent span with your class. Then, for that class you need to set white-space: nowrap; to stop text from breaking to another line.
.cb {
white-space: nowrap;
}
<asp:CheckBox runat="server" Text="Approved" CssClass="cb" />
Sample Code Snippet
.cb {
white-space: nowrap;
}
/*/ Style for the sake of this Code Snippet /*/
.test-sample {
border: dotted 1px;
width: 50px;
}
<!--
div.test-sample is not needed! I used it in this code snippet
to prove that CheckBox label is not breaking to another line.
-->
<p>With <code>CssClass="cb"</code>:</p>
<div class="test-sample">
<!-- <asp:CheckBox runat="server" ID="CheckBox1" Text="Approved" CssClass="cb" /> -->
<span class="cb"><input id="CheckBox1" type="checkbox" /><label for="CheckBox1">Approved</label></span>
</div>
<p>Without <code>CssClass="cb"</code>:</p>
<div class="test-sample">
<!-- <asp:CheckBox runat="server" ID="CheckBox2" Text="Approved" /> -->
<input id="CheckBox2" type="checkbox" /><label for="CheckBox2">Approved</label>
</div>
I don't recommend using tables for such a simple task. That's overkill and you may have issues in the future, as tables' behaviour is generally hard to predict.
Also, try to not render CheckBox and its label separately as some people recommended in this thread, unless you'll provide appropriate feedback and render proper label element. CheckBoxes without label element are very frustrating to use, because they're breaking users' natural habits of clicking on caption, instead of teeny–tiny little square.
Stay simple!
~Wiktor
You have to set display to block. Also you have to set width and height to your last td.
For example:
input,span
{
float:left
display:block;
}
Try CSS your div
.Div1 { white-space: nowrap; display:inline }
You must set a width to that last column, or else the float:left won't work. Try with bigger widths first then go smaller until you find your ideal setting. Good luck!
you could also use white-space: no wrap check on w3schools
I could reproduce your problem, your label may inheritance display:block. I fix it adding a display: inline to it.
Check how it results
<div style= "white-space: nowrap;">
<input id="ckbApprovalAll" type="checkbox" name="ckbApprovalAll" onclick="javascript:setTimeout('__doPostBack(\'ckbApprovalAll\',\'\')', 0)">
<label style="display: inline" for="ckbApprovalAll">Approved All</label>
</div>
I hope you are coding well,
I am working on a Image Upload module , which is in a Modal Popup and hence is wrapped inside an Update Panel,
<asp:UpdatePanel runat="server" ID="UpdateModelPopup" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lnkUploadImage" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel runat="server" ID="pnlModel" CssClass="ModalWindow">
<!-- Style="display: none;" -->
<table border="0" class="modalTable" cellspacing="5">
<tr>
<td>
Keywords 2<strong><font color="#FF0000">*</font></strong> <i>(Seperated by , )</i>
<br />
<asp:TextBox runat="server" ID="txtKeywordsTwo"></asp:TextBox><br />
</td>
<td>
Dimensions <strong><font color="#FF0000">*</font></strong>
<br />
Width :
<asp:TextBox ID="txtDimWidth" runat="server" Width="50px"></asp:TextBox>
Height :
<asp:TextBox ID="txtDimHeight" runat="server" Width="50px"></asp:TextBox>
</td>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
Browse .psd file<br />
<ajaxToolkit:AsyncFileUpload runat="server" ID="pdfFile" Width="200px" OnUploadedComplete="pdfFile_UploadedComplete"
CompleteBackColor="" ErrorBackColor="" OnClientUploadComplete="Success" />
<asp:Image runat="server" ID="imgThumbNail" /><br />
<font color="#FF0000">or</font><br />
Refrence URL<br />
<asp:TextBox ID="TextBox11" runat="server"></asp:TextBox>
</td>
<td>
Browse file <i>(.jpeg, .gif or .png)</i><strong><font color="#FF0000">*</font></strong><br />
<ajaxToolkit:AsyncFileUpload runat="server" ID="AsyncFileUpload1" Width="200px" />
</td>
</tr>
</table>
<asp:Button runat="server" ID="btnUpload" Text="Upload" CssClass="btn" OnClick="btnUpload_Click" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Now as per the business requirement, I need to show a thumbnail of the Image that user uploads, and for .psd file I have a standard icon which I display's at the run time, in the code behind I am validating the file extension to be the .psd file and it is then display the psd icon, I am trying to set the ImageURL for
protected void pdfFile_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (Path.GetExtension(e.FileName).ToString().ToLower() != ".psd")
{
string alertMsg = #"alert('Please provide .PSD type file');";
ScriptManager.RegisterStartupScript(this, this.GetType(), "Test", alertMsg, true);
//pdfFile
}
else
{
imgThumbNail.ImageUrl ="~/images/psdIcon.jpg";
}
}
The problem is that Panel doesnt gets update at the run time, even the page source shows src="". I am suspecting that its a Update Panel issue.
Kindly point me into the right direction.
Thanks in advance
FileUpload can not be done Asynchronously. In order to do that PostBackTrigger Trigger will be required to upload.
I currently have a GridView in a pop-up control. The GridView is embedded in an UpdatePanel and I have the window pop-up showing nothing on it. However, when I debug through it I see that the GridView has data in it and it is bound, but I am not noticing any changes. I even tried to call the Update method on the UpdatePanel, but received no changes in that either.
Basically what I wish to do is show a blank page up until my data has been loaded in. After the GridView has the data bound to it I would like it to be visible. Please find the below code snippet of the current process.
ASPX source:
<dx:ASPxPopupControl ID="ASPxPopupItem" runat="server" ClientIDMode="AutoID" LoadingPanelImagePosition="Bottom"
Modal="True" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter"
EnableAnimation="False" HeaderText="Item Checker"
Width="614px">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupCoverageItem" runat="server" SupportsDisabledAttribute="True">
<table style="width: 611px" cellpadding="3" cellspacing="3">
<tr>
<td align="center">
Title
</td>
</tr>
<tr>
<td colspan="2">
<div style="height: 75px; overflow: auto; width: 595px;">
<asp:UpdatePanel runat="server" ID="udpItems" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView runat="server" ID="gvTitles" Width="575px" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="90px">
<ItemTemplate>
<center>
<asp:ImageButton OnClick="btnSelect_Click" ID="lnk_Select" runat="server" CommandArgument='<%# Eval("title") %>'
ImageUrl="~/images/save.png" ToolTip="Choose this record" />
</center>
</ItemTemplate>
<HeaderStyle Width="90px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:TemplateField>
<asp:BoundField HeaderText="Item ID" DataField="item_id" SortExpression="item_id" />
<asp:BoundField HeaderText="Title" DataField="title" SortExpression="title" />
<asp:BoundField HeaderText="Date" DataField="date" SortExpression="date" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</td>
</tr>
<tr>
<td align="center">
<asp:Button runat="server" ID="btnCancelTitle" Text="Cancel" CssClass="popupButton"
OnClick="btnCancelTitle_Click" />
</td>
</tr>
</table>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
C# back end:
// Bind the data from the returning SQL query and update
gv.DataSource = npgDat;
gv.DataBind();
udpItems.Update();
Unfortunately there isn't much more of the C# back-end that I can show since we're using a company specific Query tool that works well in other situations.
Thanks
Are you sure an ASPxPopupControl supports having an UpdatePanel as content? I'd try getting rid of the UpdatePanel and see if the GridView works as expected then, or try moving the UpdatePanel (with the GridView still inside it) outside of the ASPxPopupControl and see if that works. If the problem is having the UpdatePanel inside the ASPxPopupControl, then you'll probably have to contact DevExpress for more help, as that would lead me to believe it's a problem with their control.
Update
Based on your comment below, you may want to look into Example: How to show the ASPxLoadingPanel while the content is loading inside the ASPxPopupControl over on the DevExpress support forum.
I have a fileupload control with an updatePprogress in an updatePanel like this:
UpdatePanel is: updExtraSmall
<Triggers>
<asp:PostBackTrigger ControlID="lnkExtraSmall" />
</Triggers>
<ContentTemplate>
<table>
<tr>
<td style="border: 1px">
<asp:FileUpload ID="fupldExtraSmall" runat="server" />
</td>
<td>
<asp:LinkButton ID="lnkExtraSmall" OnClientClick="javascript:showWait();" OnClick="lnkExtraSmall_click" CausesValidation="false"
runat="server" Text="Upload" />
<asp:Label ID="lblMessage" runat="server" />
</td>
<td>
<asp:Label ID="lblExtraSmallMessage" runat="server" />
</td>
<td>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updExtraSmall">
<ProgressTemplate>
<DIV id="IMGDIV" align="center" valign="middle" runat="server" style="position: absolute;left: 35%;top: 25%;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:White">
<img src="loading/loading.gif" /><br />
</DIV>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</table>
</ContentTemplate>
and:
function showWait()
{
if ($get('fupldExtraSmall').value.length > 0)
{
$get('UpdateProgress1').style.display = 'block';
}
}
The problem is that the updateProgrss doesn't show.
Can anyone help me please?
Thank you,
Alina
Just Use the asyncfileupload control which come with ajaxcontroltoolkit 3.0 and then upload the file.
Put the UpdateProgress outside the ContentTemplate.
Ref: http://msdn.microsoft.com/en-us/library/bb398821.aspx