I am using VS2019.
I am new to web development.
I have a gridview which is displaying information from my db. I'm currently having issues with resizing the gridview as my buttons are being made small.
I would like to know how to ensure the gridview resizes automatically.
Thanks
Below is my ASP Code:
<link href="Content/Style.css" rel="stylesheet" />
<div class="container" style="margin-top: 5%">
<div class="rows">
<div class="col-md-12">
<div class="table-responsive">
<asp:GridView ID="GridView1" runat="server" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AutoGenerateColumns="false" CssClass="mydatagrid" AllowPaging="true" PageSize="10" OnPageIndexChanging="GridView1_PageIndexChanging" PagerStyle-CssClass="pager" HeaderStyle-CssClass="header" RowStyle-CssClass="rows" Width="991px" OnRowCommand="OnRowCommand" >
<Columns>
<asp:BoundField DataField="id" HeaderText="ID"/>
<asp:BoundField DataField="user_name" HeaderText="User Name"/>
<asp:BoundField DataField="user_displayName" HeaderText="Display Name"/>
<asp:BoundField DataField="user_userPartition" HeaderText="Partition"/>
<asp:BoundField DataField="group_name" HeaderText="Group"/>
<asp:BoundField DataField="createdDate" HeaderText="Created Date" />
<asp:TemplateField ShowHeader="False" >
<ItemTemplate >
<asp:Button ID="Button1" runat="server" CausesValidation="false" CommandName="Approve" Text="Approve" OnClick = "Row_Selected" CommandArgument='<%# Eval("id") %>' CssClass="button-container" Visible="True" />
<asp:Button ID="Button2" runat="server" CausesValidation="false" CommandName="Decline" Text="Decline" OnClick = "Row_Selected" CommandArgument='<%# Eval("id") %>' CssClass="button-container-decline" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
</div>
I was able to adjust the grid by adding ItemStyle-width="10%"
Thanks
Related
I am implementing the functionality that on button click the data saved in the gridview should get exported on the button click, I implemented the functionality from here.
But I am getting error as Control 'mainContent_grdTeacherProfile' of type 'GridView' must be placed inside a form tag with runat=server at line
grdTeacherProfile.RenderControl(hw);
Please see the asps code of the gridview:-
<asp:GridView ID="grdTeacherProfile"
runat="server"
Width="100%"
border="1" Style="border: 1px solid #E5E5E5;"
CellPadding="3" FooterStyle-BackColor="#e3e3e3"
AutoGenerateColumns="false"
AllowPaging="true"
CssClass="hoverTable"
DataKeyNames="Id"
PageSize="4"
ShowFooter="false"
OnPreRender="PreRenderGrid"
HeaderStyle-CssClass="k-grid td"
OnDataBound="grdTeacherProfile_DataBound"
OnPageIndexChanging="grdTeacherProfile_PageIndexChanging"
OnRowDeleting="grdTeacherProfile_RowDeleting"
OnRowCommand="grdTeacherProfile_RowCommand"
EnableSortingAndPagingCallbacks="false"
EmptyDataText="No records found">
<AlternatingRowStyle CssClass="k-alt" />
<Columns>
<asp:TemplateField HeaderText="Select" ItemStyle-Width="5" >
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" onClick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="first_name" HeaderText="First Name" ItemStyle-Width="30" />
<asp:BoundField DataField="last_name" HeaderText="Last Name" ItemStyle-Width="30" />
<asp:BoundField DataField="dob" HeaderText="Date of Birth" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="gender" HeaderText="Gender" ItemStyle-Width="20" />
<asp:BoundField DataField="designation" HeaderText="Designation" ItemStyle-Width="20" />
<asp:BoundField DataField="joining_date" HeaderText="Joining Date" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="leaving_date" HeaderText="Leaving Date" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="active" HeaderText="Active" ItemStyle-Width="25" />
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="5%">
<ItemTemplate>
<asp:ImageButton ID="btnEdit" AlternateText="Edit" ImageUrl="~/images/edit.png" runat="server" Width="15" Height="15" CommandName="eEdit" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" />
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle ForeColor="#e3e3e3"
BackColor="#e3e3e3" CssClass="grid-pagi" />
<PagerTemplate>
<table runat="server" id="testTable1" style="width: 100%" class="hoverTable_tbl">
<tr>
<td class="col-md-4 pull-left">
<asp:Label ID="MessageLabel"
Text="Select a page:"
runat="server" />
<asp:LinkButton ID="FirstLB" runat="server" CommandName="Page" CommandArgument="First" ToolTip="First" CssClass="btn-pager btn-default"><<</asp:LinkButton>
<asp:LinkButton ID="PrevLB" runat="server" CommandName="Page" CommandArgument="Prev" ToolTip="Previous" CssClass="btn-pager btn-default"><</asp:LinkButton>
<asp:DropDownList runat="server" ID="PageDropDownList" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="PageDropDownList_SelectedIndexChanged" CssClass="selectpicker form-control-drp"></asp:DropDownList>
<asp:LinkButton ID="NextLB" runat="server" CommandName="Page" CommandArgument="Next" ToolTip="Next" CssClass="btn-pager btn-default">></asp:LinkButton>
<asp:LinkButton ID="LastLB" runat="server" CommandName="Page" CommandArgument="Last" ToolTip="Last" CssClass="btn-pager btn-default">>></asp:LinkButton>
</td>
<td class="col-md-3">
<div>
<div class="pull-left"><asp:Label ID="PageSizeLabel" CssClass="page-size" runat="server" Text="Select Page Size: "></asp:Label>
<asp:DropDownList ID="ddlPageSize" runat="server" OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged" AutoPostBack="true" CssClass="selectpicker form-control-drp">
<%-- <asp:ListItem Value="0" Text="0" />--%>
<asp:ListItem Value="1" Text="1" />
<asp:ListItem Value="2" Text="2" />
<asp:ListItem Value="3" Text="3" />
</asp:DropDownList>
</div>
<div>
<asp:Label ID="CurrentPageLabel" CssClass="view" runat="server" />
</div>
</div>
</td>
</tr>
</table>
</PagerTemplate>
<RowStyle />
</asp:GridView>
Exporting GridView to Excel is easier using a 3rd party like iTextSharp.
If you want to know how I make it work, you can check this sample code:
http://dotnetfrommanila.blogspot.com/2013/04/convert-gridview-to-excel-in-c.html
I hope it could help you.
I got it done on my own,
actually I forgot to add the code below and EnableEventValidation="false".
The code was:-
public override void VerifyRenderingInServerForm(Control control)
{
/* Verifies that the control is rendered */
}
and it worked.!!
I have a gridview whose data's are coming from the database. I also want to show the paging in the gridview. I want the paging as below mentioned in the image.
Image. As I have no idea from where to start this, can you let me know any helpful links So that I can start developing it. Also please see the code for your reference:-
<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3" AutoGenerateColumns="false" OnDataBound="grdCSRPageData_DataBound" PageSize="5" AllowPaging="true" OnPageIndexChanging="grdCSRPageData_PageIndexChanging" OnRowCommand="grdCSRPageData_RowCommand">
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField ItemStyle-Width="30">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" />
<asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" />
<asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" />
<asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" />
<asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" />
<asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" />
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%">
<ItemTemplate>
<asp:ImageButton ID="btnEdit" runat="server" ImageUrl="~/images/edit.png" Width="15" Height="15" />
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="DeleteRow" CommandArgument="<%# Eval("Id") %>" OnClientClick="return confirm('Are you sure to delete?');" />
</span>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="btnUpdate" Text="Update" runat="server" CommandName="Update" />
<asp:LinkButton ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Right now, I have only this much of code for PageIndexChanging, if you need anything else let me know
protected void grdCSRPageData_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
grdCSRPageData.PageIndex = e.NewPageIndex;
grdCSRPageData.DataBind();
}
You should write C# code on event 'grdCSRPageData_PageIndexChanging' same as 'grdCSRPageData_DataBound'
i have the below code:
<asp:GridView runat="server" ID="GridView1" OnRowDataBound="gvChildGrid_RowDataBound" Width="1000px"
DataKeyNames="number" AllowSorting="false" style="font-size:15px;"
AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" AllowPaging="true" HorizontalAlign="Center"
CellPadding="4" GridLines="none">
<%-- <PagerSettings Mode="NumericFirstLast" FirstPageText="first" PreviousPageText="previous" LastPageText="last" NextPageText="next" Position="bottom" PageButtonCount="2" />--%>
<AlternatingRowStyle BackColor="#F7F7F7" />
<Columns>
<asp:TemplateField HeaderText = "Select">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("number") %>');">
<img id="imgdiv" width = "20px" src="images/Alarm-Plus-icon.png" alt="" />
</a>
</ItemTemplate>
<HeaderStyle Font-Bold="True"/>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Number">
<ItemTemplate>
<%# Eval("number")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Name">
<ItemTemplate>
<%# Eval("name")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="div<%# Eval("number") %>" style="display: none; position: relative; overflow: auto">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gvChildGrid" DataKeyNames="number" runat="server" BackColor="Transparent" AutoGenerateColumns="false" OnPageIndexChanging="gvChildGrid_PageIndexChanging"
style="Width:100% !important;" GridLines="None" Font-Names="times new roman" AllowPaging="True" CellPadding="4" AllowSorting="True">
<HeaderStyle BackColor="#8cc63e" Font-Bold="true" ForeColor="White" />
<Columns>
<asp:BoundField DataField="number" HeaderText="Mobile Number" >
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="name" HeaderText="Name" >
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
i'm using an update pannel for the second grid view gvChildGrid because i when i use the paging of this gridview i don't want the hole page to post back... only the grid view
but the problem is that the hole page is posting back
how can i fix this?
Add Update panel to <asp:TemplateField>. It may work I'm not sure.
I have the buttons below working so that the buttond do what they have to, but i would like to add a CSS so that they can hover is there any method of doing this.
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataKeyNames="pageID"
DataSourceID="SQLData" AutoGenerateColumns="False"
PageSize="1" Width="100%" Height="500px"
GridLines="None" ShowHeader="False" >
<Columns>
<asp:BoundField DataField="pageID" HeaderText="pageID" InsertVisible="False"
ReadOnly="True" SortExpression="pageID" ShowHeader="False" Visible="False" />
<asp:BoundField DataField="sectionID" HeaderText="sectionID"
SortExpression="sectionID" Visible="False" ShowHeader="False" />
<asp:BoundField DataField="pageNo" HeaderText="pageNo" SortExpression="pageNo"
Visible="False" ShowHeader="False" />
<asp:BoundField DataField="pageTitle" HeaderText="pageTitle"
SortExpression="pageTitle" Visible="False" ShowHeader="False" />
<asp:TemplateField HeaderText="pageContent" SortExpression="pageContent"
ShowHeader="False" ItemStyle-CssClass="pagecontent">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("pageContent") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblPageContent" runat="server" Text='<%# Bind("pageContent") %>' CssClass="pageContent"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings Mode="NextPrevious"
NextPageImageUrl="~/images/navButtonNext.png" NextPageText="Next Page"
PreviousPageImageUrl="~/images/navButtonPrevious.png" PreviousPageText="Previous Page" LastPageImageUrl="images/navButtonNext.png" />
<PagerStyle CssClass="navPager" HorizontalAlign="Right" />
<PagerTemplate>
<asp:ImageButton ID="navBack" runat="server"
ImageUrl="~/images/navigation/grey_bttn_back.jpg" CssClass="sec" CommandName="Page" CommandArgument="Prev" ClientIDMode="Static" AlternateText="Back" ToolTip="Back" />
<asp:ImageButton ID="navHome" runat="server"
ImageUrl="~/images/navigation/grey_bttn_up.jpg" CommandName="gotoHome" ClientIDMode="Static" AlternateText="Home" ToolTip="Home" />
<asp:ImageButton ID="navFwd" runat="server"
ImageUrl="~/images/navigation/grey_bttn_fwd.jpg" CommandName="Page" CommandArgument="Next" ClientIDMode="Static" AlternateText="Fwd" ToolTip="Fwd" />
</PagerTemplate>
</asp:GridView>
You need JavaScript to do this. Bind your image buttons in mouse move event and add a class something like "hover" to the image button if mouse is hovered on it. Use your Css to style if the image button contains class.
<script type="text/javascript">
window.onload=function(){
document.getElementById("navBack").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navHome").className="";
document.getElementById("navFwd").className="";
}
document.getElementById("navHome").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navBack").className="";
document.getElementById("navFwd").className="";
}
document.getElementById("navFwd").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navHome").className="";
document.getElementById("navBack").className="";
}
}
</script>
Note: Don't forget to remove class name from image buttons if mouse is not hovered on them. Use css effects you want for the class "hover".
I have a gridview and i have two buttons edit and delete.Once i click on edit button, i take the values and put those in textboxes outside grid and visible update and cancel button. but that does not fires..
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Panel ID="pnladdproduct" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label11" runat="server" AssociatedControlID="btnAddProduct"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnAddProduct" ValidationGroup="grpProduct" runat="server" CssClass="mws-button red" Text="Add" OnClick="btnAddProduct_Click" />
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlUpdateProduct" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label12" runat="server" AssociatedControlID="btnUpdateProduct"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnUpdateProduct" runat="server" CausesValidation="False" CssClass="mws-button blue" Text="Update" OnClick="btnUpdateProduct_Click" />
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlCancel" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label13" runat="server" AssociatedControlID="btnCancelUpdate"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnCancelUpdate" CausesValidation="False" runat="server" CssClass="mws-button gray" Text="Cancel" OnClick="btnCancelUpdate_Click" />
</div>
</div>
</asp:Panel>
<div class="mws-form-col-8-8">
<asp:GridView ID="grdProduct" ShowHeaderWhenEmpty="True" CssClass="mGrid" runat="server" AutoGenerateColumns="False" AllowPaging="True" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" OnPageIndexChanging="grdProduct_PageIndexChanging" OnRowDeleting="grdProduct_RowDeleting" OnRowEditing="grdProduct_RowEditing">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Product" SortExpression="Product" />
<asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
<asp:BoundField DataField="Rate" HeaderText="Rate" SortExpression="Rate" />
<asp:BoundField DataField="Amount" HeaderText="Amount" SortExpression="Amount" />
<asp:ButtonField ButtonType="Image" CommandName="Edit" HeaderText="Edit" ImageUrl="~/css/icons/16/edit.png" ShowHeader="True" Text="Edit" />
<asp:ButtonField ButtonType="Image" CommandName="Delete" HeaderText="Delete" ImageUrl="~/css/icons/16/delete.png" ShowHeader="True" Text="Delete" />
<asp:TemplateField HeaderText="HiddenColumn">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="hdfProductID" runat="server" Value='<%# Bind("ProID") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
No Products Added !!
</EmptyDataTemplate>
</asp:GridView>
<div class="mws-form-row inline">
<asp:Label ID="Label15" runat="server" AssociatedControlID="txtQuantity">Total Amount</asp:Label>
<div class="mws-form-item medium">
<asp:TextBox ID="txtTotalAmount" BackColor="Beige" BorderColor="red" ReadOnly="True" CssClass="mws-textinput" runat="server"></asp:TextBox>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdateProduct" EventName="Click"/>
<asp:PostBackTrigger ControlID="btnCancelUpdate" />
</Triggers>
</asp:UpdatePanel>
Server side Code..
protected void grdProduct_RowEditing(object sender, GridViewEditEventArgs e)
{
Session["proID"] = StepGetHiddenValuesFromGridControl(e.NewEditIndex);
txtQuantity.Text = grdProduct.Rows[e.NewEditIndex].Cells[1].Text;
txtRate.Text = grdProduct.Rows[e.NewEditIndex].Cells[2].Text;
txtAmount.Text = grdProduct.Rows[e.NewEditIndex].Cells[3].Text;
txtQuantity.BackColor = Color.Beige;
txtRate.BackColor = Color.Beige;
txtAmount.BackColor = Color.Beige;
//pnladdproduct.Visible = false;
//pnlUpdateProduct.Visible = true;
//pnlCancel.Visible = true;
}
protected void btnUpdateProduct_Click(object sender, EventArgs e)
{
// this code not firing
}
I don't think there's a need for triggers.