How to adjust the size of data gridview ASP - asp.net

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

Exporting Excel is giving error on button click

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.!!

Detail information of Pagination in Gridview

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'

update panel full post back

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.

asp:imagebutton hover effect css

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".

Button Outside Gridview not firing once click on Edit button of gridview

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.

Resources