I have an ASP:Gridview whose Columns might change visibility depending of users clicks.
I would like the layout not to resize when controls visibility changes.
Here is the Gridview code:
<asp:TemplateField HeaderText="Name" HeaderStyle-HorizontalAlign="Right">
<ItemStyle HorizontalAlign="Left" Wrap="False" Font-Size="Small" />
<HeaderStyle HorizontalAlign="Right" CssClass="text-align:right" Font-Size="XX-Small" />
<ItemTemplate>
<asp:Label ID="Label_Name" runat="server" Text='<%# Bind("Name") %>' Width="150" Height="10" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="doc ">
<ItemStyle HorizontalAlign="Center" Wrap="False" Font-Size="Small" />
<ItemTemplate>
<asp:CheckBox ID="CB_Doc" runat="server" Checked='<%# Bind("MyProp") %>' Width="50px" AutoPostBack="true" OnCheckedChanged="CB_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Book">
<ItemStyle HorizontalAlign="Left" Wrap="False" Font-Size="XX-Small" />
<ItemTemplate>
<asp:HiddenField runat="server" ID="HF_Id" Value='<%# Bind("Id") %>' />
<table>
<tr>
<td style="padding-left: 50px;">
<asp:CheckBox ID="CB_Book" runat="server" Checked='<%# Bind("MyProp2") %>' Width="30" AutoPostBack="true" OnCheckedChanged="CB_CheckedChanged" />
</td>
<!-- A few more controls that might be visible or not depending if user clicks previous CheckBox -->
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Default it displays this way:
When I click on the right Checkbox, the GridView has the bad idea to resize this way:
Is there a way to prevent this resizing?
As far as I can see, there would definitely be enough space to display all of the controls whose visibility changes, without resizing.
Thx in advance.
EDIT: the 2 updaded images from the post appear so compressed that we cannot see the problem. :(
But the first column width is decreased of -30% causing the whole page layout to be broken.
Put your gridView inside a div tag and set its attributes i.e.
<div id="ScrollList" style="height: 500px; overflow: auto">
<!-- your gridview -->
</div>
And also set the width of your boundfields i.e.
ItemStyle-Width="100%" ControlStyle-Width="100%"
Hope it helps.
Related
I have a gridView that I wish to add a textbox to. I want the textbox to be located in the footer, but I have no idea how to do that.
This is my gridview:
<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false"
AllowSorting="True"
ShowFooter="True"
ShowHeaderWhenEmpty="true"
OnRowDataBound="gvTest_RowDataBound"
Width="550px">
<EmptyDataTemplate>
No data.
</EmptyDataTemplate>
<Columns>
<asp:BoundField DataField="Name" headerText="Name"/>
<asp:TemplateField>
<HeaderTemplate>
Actions
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="imbView" runat="server" ToolTip="View details" ImageUrl="~/css/images/Search.png" Width="16" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I've seen people talking about adding something like this:
<FooterTemplate>
<asp:TextBox ID="tbName" runat="server"/>
</FooterTemplate>
But I dont know where or how to add it. If I just put it in between the <asp:TemplateField>tags it messes up (probably because my boundfields).
Additional information:
I bind the gridview using DataTable. The real table has more columns, but this will suffice for an example.
Switch from:
<asp:TemplateField>
<HeaderTemplate>
Actions
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="imbView" runat="server" ToolTip="View details" ImageUrl="~/css/images/Search.png" Width="16" />
</ItemTemplate>
</asp:TemplateField>
to:
<asp:TemplateField>
<HeaderTemplate>
Actions
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="imbView" runat="server" ToolTip="View details" ImageUrl="~/css/images/Search.png" Width="16" />
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="tbName" runat="server"/>
</FooterTemplate>
</asp:TemplateField>
It's easy if you understand, that you can devide your TemplateField into three sections:
Header
Item(or main content)
Footer
Greetz
You will need to put it in the template field.. like this..
<asp:TemplateField HeaderText="BankName" SortExpression="BankName">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("BankName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("BankName") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="tbAddBankName" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
this is an example from my working code.
I have the following grid:
<asp:GridView ID="myGrid"
AutoGenerateColumns="true"
runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%">
<AlternatingRowStyle CssClass="rowEven" />
<HeaderStyle CssClass="rowHead" />
<RowStyle CssClass="row" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" data-flag="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
and its generating
<span data-flag="false"><input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" /></span>
I want the data flag inside the checkbox. not as an span
Possible and simple workaround is to use the simple html checkbox with a runat="server"
<ItemTemplate>
<input id="Checkbox1" runat="server" type="checkbox" data-flag="false" />
</ItemTemplate>
I think you should use Checked="false" instead of data-flag.
i have a grid view in the web custom control and want to select any row and so that i can edit that row. the edit button is on the master page and default.aspx is inherited from that master and know i want the row id on my defult page so that i can edit that row easily.
my web user control is
<asp:GridView runat="server" ID="grvBranches" GridLines="None"
AutoGenerateColumns="False" CellPadding="5"
OnRowDataBound="grvBranches_RowDataBound"
OnRowCancelingEdit="grvBranches_RowCancelingEdit"
OnRowEditing="grvBranches_RowEditing"
OnRowUpdating="grvBranches_RowUpdating">
<SelectedRowStyle BackColor="#d8d8d8" />
<HeaderStyle BackColor="#d8d8d8" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label Text="BranchName" ID="lblHeaderBranchName" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("ID") %>' ID="lblID" Visible="false" runat="server" />
<asp:Label Text='<%# Eval("Branch_Name") %>' ID="lblBranchName" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label Text="OrganizationName" ID="lblHeaderOrganizationName" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("Organization_Name") %>' ID="lblOrganizationName" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label Text="Address" ID="lblHeaderAddress" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("Address_1") %>' ID="lblAddress" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label Text="City" ID="lblHeaderCityName" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("City_Name") %>' ID="lblCityName" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField />
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
and i want this rowid in on my Default page
On your master page .cs, on the EditButton click event
GridView gView = ContentPlaceHolder1.FindControl("GridView1") as GridView;
// use gView.SelectedIndex to manipulate the row, edit it, etc
Assuming your main ContentPlaceHolder's ID is 'ContentPlaceHolder1'
I have a grid. I have a button down that if i click on that button it will add an empty row to that grid in which i will edit and save. I need to display a scroll bar so that when i click on that button it will add empty row in the end of grid with scroll bar at the end
<div id="Div" runat="server" class="divFieldRow">
<div>
<center>
<div style="overflow: auto; height: 150px">
<asp:GridView ID="gvEventMechanic" runat="server" AutoGenerateColumns="False" PageSize="5"
GridLines="None" AllowSorting="true" BorderWidth="1"
BorderColor="Brown" AlternatingRowStyle-BackColor="Cyan" HeaderStyle-BackColor="ActiveCaption"
FooterStyle-BackColor="DimGray" EnableViewState="true" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Disable
</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" AutoPostBack="true" OnCheckedChanged="cbDelete_OnCheckedChanged"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField >
<HeaderTemplate>Event</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Label ID="lblDesc" Visible='<%# ! IsInEditMode %>' runat="server" Text='<%# Eval("Description") %>' />
<asp:TextBox ID="txtDesc" Visible='<%# IsInEditMode %>' runat="server" Text='<%#Eval("Description")%>' MaxLength="255">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</center>
</div>
Using a div that wraps the grid with fixed height and overflow should do the trick in case the table exceeds the fixed height. With paging involved you may switch to the last available page in the grid and rebind it, if that is what you want to achieve.
I have an UpdatePanel and a GridView within it. I have a problem with paging: when I press Next button, grdUsers_PageIndexChanging() is not called, so the page stays 1, and if previously I changed selection in ddlPageSize, now it goes back to the initial selection.
Also, if I am on the first page, the Previous button is not disabled, and pressing it causes Out Of Range error.
What am I doing wrong?
Thanks.
<asp:UpdatePanel ID="upnlUsers" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" >
<ContentTemplate>
<div style="height:400px; width:1500px; overflow:auto;">
<asp:GridView ID="grdUsers" runat="server" AllowPaging="True" ShowHeader="false" ShowFooter="true"
AutoGenerateColumns="false" CssClass="largegridview largegridview_td"
Width="1480px" Height="100%" PageSize="100" DataKeyNames="ID" EnableSortingAndPagingCallbacks="false"
onpageindexchanging="grdUsers_PageIndexChanging"
onrowdatabound="grdUsers_RowDataBound">
<AlternatingRowStyle CssClass="alternatingrowstyle" />
<Columns>
<asp:TemplateField HeaderText="User Name" SortExpression="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name" SortExpression="LastName">
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%# Eval("LastName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name" SortExpression="FirstName">
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FirstName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email" SortExpression="Email">
<ItemTemplate>
<asp:Label ID="lblEmail" runat="server" Text='<%# Eval("Email") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="pagerstyle" />
<PagerTemplate>
<asp:Label ID="Label1" runat="server" Text="Show rows:" />
<asp:DropDownList ID="ddlPageSize" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged">
<asp:ListItem Value="20" />
<asp:ListItem Value="50" />
<asp:ListItem Value="100" />
</asp:DropDownList>
Page
<asp:TextBox ID="txtGoToPage" runat="server" AutoPostBack="true"
OnTextChanged="GoToPage_TextChanged" CssClass="gotopage" />
of
<asp:Label ID="lblTotalNumberOfPages" runat="server" />
<asp:Button ID="btnPrev" runat="server" CommandName="Page"
ToolTip="Previous Page" CommandArgument="Prev" CssClass="previous" />
<asp:Button ID="btnNext" runat="server" CommandName="Page" ToolTip="Next Page"
CommandArgument="Next" CssClass="next" />
</PagerTemplate>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Agreed, I tested the code, and grdUsers_PageIndexChanging() is called on mine.
Dear Friend
their is in build paging in the gridview if you want your own paging style then you have to implement your own paging through PageDataSource Class.
Click to view code
this link provide you how to implement the paging in the Datalist and Repeater through same way you will implement the paging in grid view .
Then no pageindex change event will fired in the gridview.
I don't think you are doing anything wrong; it may not actually fire the PageIndexChanged event, it probably fires the RowCommand event. Attach to the ItemCommand event and that will receive the event.
HTH.