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>
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 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.
<table style="width: 98%; height: 100%; text-align: left">
<tr>
<td valign="top">
<asp:CheckBoxList ID="c1" runat="server" DataTextField="Title" DataValueField="Id" RepeatDirection="Horizontal"
OnDataBound="cblAvailableWidgetSelector_DataBound">
</asp:CheckBoxList>
<asp:CheckBox ID="CheckBox1" runat="server" />
<label runat="server" id="lblMessage" style="padding: 3px;" />
</td>
</tr>
</table>
Here, I get the out as list of checkbox and label attached to it.
Example: I get,
Checkbox Item1
Checkbox Item2
Checkbox Item3
But I want,
Checkbox Checkbox Item1
Checkbox Checkbox Item2
Checkbox Checkbox Item3
I am using a checkbox listitem, but How can I get the output as desired.
In the code file,
DataTable dt = //datatable, which I get
c1.DataSource = dt;
c1.DataBind();
So, I get the checkbox list and a label with values, but I want to add 1 more checkbox to this list. How can I do that ?
Update
Trying to use this,
<asp:Repeater runat="server" ID="CheckBoxRepeater">
<ItemTemplate>
<asp:CheckBox ID="c1" OnDataBinding="c1_DataBound" runat="server" Checked="<%# Convert.ToBoolean(Eval("Id")) %>" />
<asp:CheckBox ID="CheckBox2" runat="server" />
<asp:Label ID="lblMessage" runat="server" style="padding: 3px;" Text="<%# Eval("Title") %>" />
</ItemTemplate>
</asp:Repeater>
But still it is not working.
Error: The server tag is not well formed.
CheckBoxList does not allow you custom templating, so it is too limited to achieve what you are trying to do. But this should be very easy to imitate with repeater:
<asp:Repeater runat="server" ID="CheckBoxRepeater">
<ItemTemplate>
<asp:CheckBox runat="server" Checked="<%# Eval("BoolProperty1") %>" />
<asp:CheckBox runat="server" Checked="<%# Eval("BoolProperty2") %>" />
<asp:Label runat="server" Text="<%# Eval("TextProperty") %>" />
</ItemTemplate>
</asp:Repeater>
Make sure to use Bind instead of Eval if you need two-way binding.
Instead of this:
Checked="<%# Convert.ToBoolean(Eval("Id")) %>"
Try this:
Checked="<%# Convert.ToBoolean(Eval('Id')) %>"
ASP.NET gets picky with the quotation marks in a render block. You need to alternate - one set is double, one set is single quotes.
I have been trying to get a progressBar into my GridView for a while now. Unfortunately without success. I currently have the following:
<asp:GridView ID="gvShow" runat="server" AutoGenerateColumns="False" DataKeyNames="Progress" Width="100%">
<Columns>
<asp:BoundField DataField="Progress" HeaderText="Progress" />
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:Literal ID="lbProgress" runat="server" Text="<div class='progress'><div class='progress-bar' role='progressbar' aria-valuenow='<%#Eval("Progress") %>' aria-valuemin='0' aria-valuemax='100' style='width: 60%;'><span class='sr-only'>60% Complete</span></div></div>"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
which results in a parser error (The server tag is not well formed.). If I replace the eval with any value it works without any issues. I think I am missing something here but I really can't find it.
For some reason all of your markup is as text of Literal control. So you have the problem with quotes, as you need double quotes for Text="" and of Eval.
Personally I see no reason to use Literal here, you can just use the markup as is, and the problem will go away:
<ItemTemplate>
<div class='progress'>
<div class='progress-bar' role='progressbar' aria-valuenow='<%#Eval("Progress") %>' aria-valuemin='0' aria-valuemax='100' style='width: 60%;'>
<span class='sr-only'>60% Complete</span>
</div>
</div>
</ItemTemplate>
You have to use Eval method instead of Text Method.
<ItemTemplate>
<div class='progress'>
<div class='progress-bar' role='progressbar' aria-valuenow='<%#Eval("Progress") %>' aria-valuemin='0' aria-valuemax='100' style='width: 60%;'>
<span class='sr-only'>60% Complete</span>
</div>
</div>
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.