Gridview item template column width fixed and View details with link Button
Question
Here is my Gridview template.. here I want to fixed my column width but it is not working.
<asp:TemplateField HeaderText="Remarks">
<HeaderStyle Width="20" />
<ItemStyle HorizontalAlign="Left" Width="20px" />
<ItemTemplate>
<%#Eval("Comments")%>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Select" CssClass="accordionButton" Text="Select">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
And After that, I want the comment section will contain a link button which will show details those column value in the same column .. I am using this java script .
<script type="text/javascript">
$(document).ready(function () {
//ACCORDION BUTTON ACTION
$('.accordionButton').click(function () {
alert("HERE!");
$(this).next().slideToggle();
});
});
</script>
<style>
.accordionButton {
width: 100%;
cursor: pointer;
line-height: 20px;
}
.accordionContent {
width: 100%;
display: none;
}
in this picture the result is showing ..so i want a link button that will work for seeing deatils.
2 answers
solution1
0 2016-08-09 09:31:08
Have you tried setting a MaxWidth for the column? And for the text to disappear, you can use TextTrimming:
<asp:TemplateField HeaderText="Remarks">
<HeaderStyle Width="20" />
<ItemStyle HorizontalAlign="Left" Width="20px" MaxWidth="150" TextTrimming="CharacterEllipsis"/>
<ItemTemplate>
<%#Eval("Comments")%>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Select" CssClass="accordionButton" Text="Select">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
MaxWidth Gives an maximum width to the column.
TextTrimming="CharacterEllipsis" makes the text dissapear if it is longer the the field it is in (see picture)
I hope this helped
solution2
0 2016-08-09 10:20:05
Here is a simple example using jQuery and Twitter Bootstrap:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('.accordionButton').click(function () {
$(".modal-body").empty();
var remark = $(this).data('remark');
$(".modal-body").html(remark);
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Remarks">
<HeaderStyle Width="20" />
<ItemStyle HorizontalAlign="Left" Width="20px" />
<ItemTemplate>
<%# Eval("Comments").ToString().Length >= 10 ? Eval("Comments").ToString().Substring(0,10) + "..." : "" %>
<a href="#" class="accordionButton" data-remark='<%# Eval("Comments") %>'>See more</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
Output:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.