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>
Related
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>
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
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;
}
I write this html code into my webform.aspx:
<td class="auto-style1">
<asp:GridView ID="GridView1" AutoGenerateSelectButton="True" runat="server" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" style="direction: rtl" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
</td>
How can i show in my table column fit height and width?
I'll post here since I cannot comment yet.
I am sorry but your question isn't much clear, so I'll give my shot.
If you're talking about row height, your best options would be to give a cssclass to your RowStyle and AlternatingRowStyle. Now thats only for rows, if you want to give a style to your columns, you need to work with TemplateField. Usually just adjusting the header column width helps, but you can add our cssclass to each item inside the template field. Ex:
<asp:TemplateField HeaderText="Item1" SortExpression="Item1" ItemStyle-CssClass="Col1">
<ItemTemplate>
Something
</ItemTemplate>
</asp:TemplateField>
OR
<asp:TemplateField HeaderText="Item1" SortExpression="Item1">
<ItemTemplate>
Something
</ItemTemplate>
<ItemStyle CssClass="Col1" />
</asp:TemplateField>
and then on your stylesheet name something like this:
.Col1 {
width: 100px;
}
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;}