Editing Grid View row with HTML Input control - html

I use a Grid view for show and edit data. A column represent birthday. As I need date picker for this field, I have used a HTML input control. The date picker is working charm but problem is I don't know how to save edited birthday field after editing. What should I write instead of this:
<ItemTemplate><input type="text" id="sabzlearn" class="TextBox" name="SimpleUserBirthdayTxt"/>
</ItemTemplate>
.Here is Grid view:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" OnRowEditing="GridView1_RowEditing">
<Columns>
<asp:CommandField ButtonType="Image" CancelText="Cancel" EditImageUrl="~/Images/editbutton.png" ShowEditButton="True" UpdateText="Change" ControlStyle-CssClass="GridViewSelect" />
<asp:BoundField DataField="FirstName" HeaderText="Name" SortExpression="FirstName" ControlStyle-CssClass="GridViewTextBox" />
<asp:BoundField DataField="LastName" HeaderText="SurName" SortExpression="LastName" ControlStyle-CssClass="GridViewTextBox" />
<asp:TemplateField HeaderText="Gender" SortExpression="Gender">
<EditItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" SelectedValue='<%# Bind("Gender") %>' Width="50px">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Gender") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Birthday">
<EditItemTemplate>
<input type="text" id="sabzlearn" class="TextBox" name="SimpleUserBirthdayTxt" value="<%#Eval("Birthday") %>"/>
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/kamadatepicker.min.js"></script>
<script type="text/javascript">
let options = {
placeholder: "DateHolder",
twodigit: false,
closeAfterSelect: true,
nextButtonIcon: "./assets/image/timeir_next.png",
previousButtonIcon: "./assets/image/timeir_prev.png",
buttonsColor: "red",
forceFarsiDigits: true,
markToday: true,
markHolidays: true,
highlightSelectedDay: true,
sync: true,
gotoToday: true,
}
kamaDatepicker("sabzlearn", options);
</script>
</EditItemTemplate>
<ItemTemplate>
<input type="text" id="sabzlearn" class="TextBox" name="SimpleUserBirthdayTxt"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Password" HeaderText="Password" SortExpression="Password" ControlStyle-CssClass="GridViewTextBox"/>
</Columns>
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#6699ff" Font-Bold="True" ForeColor="Black" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>

Related

Why won't the hyperlink work in asp.net gridview first few rows

I have an asp.net gridview table. There is an email column that contains emails. The first few rows (depending on the browser) the hyperlink mailto does not allow you to click on the link.
Below is my code for the gridview
enter code here
<asp:GridView ID="grd_Directory" runat="server" AllowPaging="True" AllowSorting="True" OnPageIndexChanging="grd_Directory_OnPageIndexChanging" OnSorting="grd_Directory_Sorting" AutoGenerateColumns="False"
BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="Account" ShowFooter="True" OnSelectedIndexChanged="OnSelectedIndexChanged"
PageSize="200" CssClass="Grid" HeaderStyle-CssClass="GVFixedHeader">
<RowStyle Height="20px" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnPopup" runat="server" Text="View" OnClick="btnPopup_Click" CssClass="btn btn-primary py-3 px-5" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="Account" HeaderText="User Login" SortExpression="Account" />
<asp:BoundField ItemStyle-Width="150px" DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField ItemStyle-Width="150px" DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:TemplateField HeaderText =" Work Phone">
<ItemTemplate>
<%# Eval ("WorkPhone") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="Extension" HeaderText="Extension" />
<asp:BoundField ItemStyle-Width="150px" DataField="CellPhone" HeaderText="Cell Phone" />
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:HyperLink runat="server" ata-toggle="tooltip" title="Click Here To Email!" Text='<%# Eval("Email") %>' NavigateUrl='<%# string.Format("mailto:{0}", Eval("Email"))%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="Office" HeaderText="Office" SortExpression="Office" />
<asp:BoundField ItemStyle-Width="150px" DataField="Department" HeaderText="Department" SortExpression="Department" />
<asp:BoundField ItemStyle-Width="150px" DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:BoundField ItemStyle-Width="150px" DataField="Supervisor" HeaderText="Supervisor" SortExpression="Supervisor" />
<asp:BoundField DataField="ID" />
</Columns>
</asp:GridView>
enter code here

How do you restrict a Template Field width inside a GridView?

I need help restricting the 'Link target' column inside this gridview. If a long URL string is entered the page will stretch outside of the panel and give the webpage a deformed look.
I can restrict the column width by setting the HeaderStyle width but it does not stop a long URL string.
I can edit the width, but even with an adjusting width the cell will not restrict the size of the actual content.
<asp:GridView ID="gvRefLinks" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="PRL_ID" DataSourceID="sqlDsRefLinks" ForeColor="#333333" GridLines="None" Width="100%" AllowSorting="True">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="PRLT_TypeName" HeaderText="Link Type" SortExpression="PRLT_TypeName" >
<HeaderStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:TemplateField HeaderText="Link Target" SortExpression="PRL_LinkTarget">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("PRL_LinkTarget") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:HyperLink ID="hlLinkTarget" runat="server" Target="_blank" Text='<%# Eval("PRL_LinkTarget") %>' Visible="False"></asp:HyperLink>
<asp:LinkButton ID="lbLinkTarget" runat="server" CommandArgument='<%# Eval("PRL_LinkTarget") %>' CommandName="EPDM" Text='<%# Eval("PRL_LinkTarget") %>' Visible="False"></asp:LinkButton>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:BoundField DataField="PRL_Description" HeaderText="Link Description" SortExpression="PRL_Description" >
<HeaderStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:CommandField ShowDeleteButton="True">
<ItemStyle ForeColor="Blue" HorizontalAlign="Right" />
</asp:CommandField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<EmptyDataTemplate>
No reference links have been specified for the current project.
</EmptyDataTemplate>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
I want to force the 'Link Target' row to a certain width and if the string exceeds that width, I want to have the rest of the string wrapped or hidden.
Try to add the following css class to hlLinkTarget and lbLinkTarget:
.truncate {
width: 150px; /* set the desired width */
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Grid view cell spacing in edit mode is asp.net

When I click edit in purchase tab grid view cell mode is fine but in sales tab grid view cell mode not accurate what i want....i don't understand what should i do now...i want sales tab cell mode as purchase tab cell mode. hope you can help me
I'm including picture for better understand
and its html code
<asp:GridView ID="GridView1" runat="server" CssClass="dataGridTable" AutoGenerateColumns="False" Width="100%" AllowPaging="True" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataSourceID="ObjectDataSource1" HeaderStyle-Height="30" OnRowCreated="GridView1_RowCreated" PageSize="30" DataKeyNames="invoiceNumber,productName,productCategory" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDeleting="GridView1_RowDeleting" OnRowUpdating="GridView1_RowUpdating" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:CommandField ShowEditButton="true"/>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="invoiceNumber" HeaderText="Invoice" ReadOnly="true" SortExpression="invoiceNumber" />
<asp:BoundField DataField="productName" HeaderText="Name" ReadOnly="true" SortExpression="productName" />
<asp:BoundField DataField="productCategory" HeaderText="Category" ReadOnly="true" SortExpression="productCategory" />
<asp:BoundField DataField="totalQuantity" HeaderText="Quantity" SortExpression="totalQuantity" />
<asp:BoundField DataField="totalPurchasePrice" HeaderText="Total Price" SortExpression="totalPurchasePrice" />
<asp:BoundField DataField="salePricePerItem" HeaderText="Sale Price/Item" SortExpression="salePricePerItem" />
<asp:BoundField DataField="comments" HeaderText="Comments" SortExpression="comments" />
<asp:BoundField DataField="date" HeaderText="Date" ReadOnly="true" SortExpression="date" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" Height="24px" ImageUrl="~/Images/detailsInfo.png" Width="24px" OnClick="ImageButton1_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" CssClass="gridHeaderAlignment" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
and its html code
<asp:GridView ID="GridView1" runat="server" CssClass="dataGridTable" AutoGenerateColumns="False" Width="100%" AllowPaging="True" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataSourceID="ObjectDataSource1" HeaderStyle-Height="30" OnRowCreated="GridView1_RowCreated" PageSize="30" OnRowDeleting="GridView1_RowDeleting" OnRowUpdating="GridView1_RowUpdating" DataKeyNames="invoiceNumber,productName,productCategory">
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="invoiceNumber" HeaderText="Invoice" ReadOnly="true" SortExpression="invoiceNumber" />
<asp:BoundField DataField="productName" HeaderText="Name" ReadOnly="true" SortExpression="productName" />
<asp:BoundField DataField="productCategory" HeaderText="Category" ReadOnly="true" SortExpression="productCategory" />
<asp:BoundField DataField="totalQuantity" HeaderText="Quantity" SortExpression="totalQuantity" />
<asp:BoundField DataField="totalPrice" HeaderText="Price" SortExpression="totalPrice" />
<asp:BoundField DataField="paidAmount" HeaderText="Paid Amount" SortExpression="paidAmount" />
<asp:BoundField DataField="comments" HeaderText="Comments" SortExpression="comments" />
<asp:BoundField DataField="date" HeaderText="Date" ReadOnly="true" SortExpression="date" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" Height="24px" ImageUrl="~/Images/detailsInfo.png" Width="24px" OnClick="ImageButton1_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" CssClass="gridHeaderAlignment" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
You need ItemStyle and ControlStyle property of bound field. ItemStyle modifies the style for gridview column and ControlStyle modifies the style for control present in gridview column.
<asp:BoundField DataField="totalQuantity" HeaderText="Quantity" SortExpression="totalQuantity" />
<ItemStyle Width="200px" />
<ControlStyle Width="100%" />
</asp:BoundField>
Adjust the width as per your wish.
You could also use ControlStyle-CssClass or ItemStyle-CssClass, if you want to generalized you style.

template field width is not increasing in grid view in asp.net

i have used one template field for add edit, update, delete and cancel image icons. but edit and delete template field width is small and these two images are displaying on by one vertically due to less width . how to increase width of template field so that it can display two images in one line horizontally
<asp:TemplateField>
<ItemStyle Width="80px" />
<HeaderStyle Width="80px" />
<FooterStyle Width="80px" />
<ItemTemplate>
<asp:ImageButton ID="btnEdit" runat="server" CommandName="Edit" ImageUrl="img/edit.png" ToolTip="Edit" />
<asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" ImageUrl="img/delete.PNG" ToolTip="Delete" />
</ItemTemplate>
<EditItemTemplate>
<asp:ImageButton ID="btnUpdate" runat="server" CommandName="Update" ImageUrl="img/icon-update.png" ToolTip="Update" Height="18px" Width="18px" />
<asp:ImageButton ID="btnCancel" runat="server" CommandName="Cancel" ImageUrl="img/icon-Cancel.png" ToolTip="Cancel" CausesValidation="false" Height="16px" Width="16px" />
</EditItemTemplate>
</asp:TemplateField>
You may need to wrap your buttons in a div, with a CSS style to set the width.
Define a selector in your stylesheet as follows:
.buttonColumnWidth
{
width: 80px; /* change this value as required */
}
Then, make these changes to your Gridview:
<asp:TemplateField>
<ItemStyle Width="80px" />
<HeaderStyle Width="80px" />
<FooterStyle Width="80px" />
<ItemTemplate>
<div class="buttonColumnWidth">
<asp:ImageButton ID="btnEdit" runat="server" CommandName="Edit" ImageUrl="img/edit.png" ToolTip="Edit" />
<asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" ImageUrl="img/delete.PNG" ToolTip="Delete" />
</div>
</ItemTemplate>
<EditItemTemplate>
<div class="buttonColumnWidth">
<asp:ImageButton ID="btnUpdate" runat="server" CommandName="Update" ImageUrl="img/icon-update.png" ToolTip="Update" Height="18px" Width="18px" />
<asp:ImageButton ID="btnCancel" runat="server" CommandName="Cancel" ImageUrl="img/icon-Cancel.png" ToolTip="Cancel" CausesValidation="false" Height="16px" Width="16px" />
</div>
</EditItemTemplate>
</asp:TemplateField>

Gridview using html in ASP.NET

I have a doubt in gridview design can anyone help me.
I have created a gridview, but when im giving any text to that grid cell my grid design is changing. My question is how to give a fixed height to the gridview even if we are entering text into one cell or no: of cells. And Here is my code.
Thank You in Advance.
<asp:GridView ID="GrvSchoolName1" runat="server" AllowPaging="True" PageSize="4" Height="30px" BackColor="White"
BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3"
GridLines="Vertical" CssClass="grvclass"
AutoGenerateColumns="False"
ForeColor="Black" onpageindexchanging="GrvSchoolName1_PageIndexChanging">
<PagerSettings Mode="NumericFirstLast" PageButtonCount="4" FirstPageText="First" LastPageText="Last"/>
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField HeaderText="Emergency Alert" HeaderStyle-Height="30px">
<ItemTemplate>
<div style="overflow:auto; height:60px;">
<asp:Label ID="Label1" runat="server" Text='<% #Eval("AlertMessage") %>' ></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCCCC" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
</div>
Give a css class to your itemstyle template. Same works for the header :)
.NET
<ItemStyle CssClass="items"> </ItemStyle>
<ItemTemplate>
your stuff
</ItemTemplate>
CSS.
.items{width:200px;}