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.
Related
Ajax Calendar not displaying in child GridView
<asp:GridView ID="GVCollapse" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" OnClick="Show_Hide_ChildGrid" ImageUrl="~/images/plus.png" CommandArgument="Show" Height="20" Width="20" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none;">
<asp:GridView ID="gvOrders" runat="server">
<asp:TemplateField HeaderText="Dispatch Date">
<ItemTemplate>
<asp:TextBox Width="90px" ID="txtDispatchDate" runat="server" Text=""></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy"
PopupButtonID="txtDispatchDate" TargetControlID="txtDispatchDate">
</ajaxToolkit:CalendarExtender>
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Ajax Calendar is not working in child gridview whereas I did the same thing with parent gridview then it's working well
is Ajax calendar not working with child gridview?? or I did any mistake. I posted my design code
I have a div that has a gridview inside an updatepanel, that I use bootbox.js to show modal.
Inside the gridview is an itemtemplate with an asp.net button "Button1" which I need to click to edit the row after modalpopup but this doesnt fire
Please what am I missing
<div id="userForm" class="form-horizontal" style="display:none;width:100%;border:solid 0px;" >
<input ID="btnshowRun" type="button" Value="Show Leave" class="btn btn-warning " style="float:lefts;" OnClick ="showhide();"/>
<asp:UpdatePanel ID="UpdatePanel5" runat="server" style="display:none;">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" AllowSorting="False"
AutoGenerateColumns="False" DataKeyNames="EntryID"
EmptyDataText="There are no data records to display."
ShowFooter="False" HorizontalAlign="Center" OnRowCommand="gvl_RowCommand"
ShowHeaderWhenEmpty="True" CssClass="table table-striped table-bordered table-hover table-responsive table-condenseds " Width="100%" GridLines="None">
<Columns>
<asp:TemplateField HeaderText="Total" SortExpression="Total">
<EditItemTemplate>
<asp:TextBox ID="tot" runat="server" Text='<%# Bind("Total") %>' class="form-control"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("Total") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="CommandButton" runat="server" CommandArgument='<%# Eval("EntryID") %>' UseSubmitBehaviour=true CausesValidation="False"
CommandName="Update" OnCommand="Updates_Command" Text="Update" class="btn btn-primary btn-sm contrl" Style="margin-right: 10px;"
/>
<asp:LinkButton ID="Button2" runat="server" CausesValidation="False" CommandName="Cancel" class="btn btn-warning btn-sm contrl" Style="margin-right: 10px;"
Text="Cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="Button1" runat="server" CommandArgument='<%# Eval("EntryID") %>' class="form-control btn btn-default btn-blocks contrl btn-sms"
CommandName="Edit" OnCommand="Button1_Command" Text="Edit" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Center" Font-Bold="True" ForeColor="Black"></HeaderStyle>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The problem with modals is that they usually place the contents outside of the <form> tag. And then the Buttons do not work anymore.
Replace the Buttons with LinkButtons. They perform a PostBack with JavaScript and will work from a Modal.
I wasnt handling rowediting event hence I was getting an error when I checked the developer view in firefox.Now it fires for me to edit but its after the second click of the link button before it enables the editing.Any ideas?
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.
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 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.