Limit GridView Columns - asp.net

Question

I have a gridview which is displaying products information (code below)
now I would like to limit description field so that only the first few is shown if there is a long description and also resize the image to fit in the image column (and making the image, description column a bit bigger than the others
Thanks
<asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductId" OnRowDeleting="gvProducts_RowDeleting" OnSelectedIndexChanged="gvProducts_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="Productname" HeaderText="Name" />
<asp:BoundField DataField="ProductDescription" HeaderText="Description" />
<asp:BoundField DataField="ProductSupplier" HeaderText="Supplier" />
<asp:BoundField DataField="ProductCategory" HeaderText="Category" />
<asp:BoundField DataField="ProductSubCategory" HeaderText="SubCategory" />
<asp:BoundField DataField="ProductVAT" HeaderText="VAT" />
<asp:BoundField DataField="ProductStock" HeaderText="Stock" />
<asp:ImageField DataImageUrlField="ProductImage" HeaderText="Image"/>
<asp:CheckBoxField DataField="ProductActive" HeaderText="Active" />
<asp:CommandField ButtonType="Button" ShowDeleteButton="True" />
</Columns>
<SelectedRowStyle CssClass="selectedrow" />
</asp:GridView>

Answer 1

Using css we can limit the description text to be displayed. Like this....
<asp:GridView ID="gvProducts" runat="server" CssClass="GridCSS" AutoGenerateColumns="False" DataKeyNames="ProductId" OnRowDeleting="gvProducts_RowDeleting" OnSelectedIndexChanged="gvProducts_SelectedIndexChanged">
<Columns>
-----------------------
-----------
---------
<asp:BoundField DataField="ProductDescription" HeaderText="Description" ItemStyle-CssClass="limittext" />
------------------
---------
-------------
</Columns>
</asp:GridView>
CSS style:
.GridCSS {
table-layout:fixed;
width:100%;
}
.GridCSS .limittext{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Answer 2

You can use mask for fw 4.5 or some external pluging lika Jquery Mask.
or You can make them Template Item and put some code like <%# Eval("ProductDescription").SubString(0,50) %>

Answer 3

If you're working with MVC, you can alter your GridView's data in your controller before binding it to GW. If you're not using MVC, the only thing I can offer is: in your RowDataBound event, check if description exceeds your defined max. chars and then truncate it.
Not a proper answer I know, but it may give you a few ideas. Can't provide code right now as I'm at work, but I'll check later if there is no answer to your post.
For further reading:
http://www.dotnetspider.com/resources/43687-How-show-formatted-html-content-grid-view.aspx
http://forums.asp.net/t/1391922.aspx/1

Answer 4

Try this
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<%# Eval("ProductDescription").ToString().Length > 50 ? Eval("ProductDescription").ToString().Substring(0,50)+"..." : Eval("ProductDescription").ToString() %>
</ItemTemplate>
</asp:TemplateField>
If text is more than 50 characters, display first 50, otherwise, display the whole text.
Another option is return a shortDescription from the database or from the Product object
public string ShortDescription
{
get
{
return ProductDescription.Length > 50 ? ProductDescription.Substring(0,50) : ProductDescription;
}
}

Answer 5

<table style="table-layout: fixed">
<tr>
<td>
<telerik:RadGrid ID="radGVEmployee" runat="server" AllowSorting="True" GridLines="None"
AutoGenerateColumns="False" CellSpacing="0" OnNeedDataSource="radGVEmployee_NeedDataSource"
Visible="True" OnSortCommand="radGVEmployee_SortCommand" AllowPaging="true" OnPageIndexChanged="radGVEmployee_PageIndexChanged"
Width="900px" OnItemDataBound="radGVEmployee_ItemDataBound" OnItemCommand="radGVEmployee_ItemCommand"
PageSize="5">
<FilterMenu EnableTheming="True">
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
<GroupingSettings CaseSensitive="False" />
<MasterTableView DataKeyNames="UsrId" AllowFilteringByColumn="true" TableLayout="Fixed"
Visible="true" AllowMultiColumnSorting="false">
<NoRecordsTemplate>
<div style="width: 700px;" align="center">
There is No Data to display</div>
</NoRecordsTemplate>
<CommandItemSettings ExportToPdfText="Export to PDF" />
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
</ExpandCollapseColumn>
<Columns>
<telerik:GridTemplateColumn SortExpression="UserName" DataField="UserName" HeaderText="UserName"
HeaderStyle-Width="60px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmUserName" runat="server" Text='<%# Eval("UserName") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="FullName" DataField="FullName" HeaderText="FullName"
HeaderStyle-Width="60px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmFullName" runat="server" Text='<%# Eval("FullName") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="MobileNo" DataField="MobileNo" HeaderText="MobileNo"
HeaderStyle-Width="40px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmMobileNo" runat="server" Text='<%# Eval("MobileNo") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="CompanyName" DataField="CompanyName"
HeaderText="CompanyName" HeaderStyle-Width="50px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmCompanyName" runat="server" Text='<%# Eval("CompanyName") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="BranchName" DataField="BranchName" HeaderText="BranchName"
HeaderStyle-Width="50px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmBranchName" runat="server" Text='<%# Eval("BranchName") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="Designation" DataField="Designation"
HeaderText="Designation" HeaderStyle-Width="50px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmDesignation" runat="server" Text='<%# Eval("Designation") %>'></asp:Label>
<asp:Label ID="lblItmLockStatus" runat="server" Text='<%# Eval("LockStatus") %>'
Visible="false"></asp:Label>
<asp:Label ID="lblItmUserStatus" runat="server" Text='<%# Eval("UserStatus") %>'
Visible="false"></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="UserImage" DataField="UserImage" HeaderText="UserImage"
HeaderStyle-Width="50px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center"
AllowFiltering="false">
<ItemTemplate>
<asp:Image ID="lblUserImage" runat="server" ImageUrl='<%#Eval("ImageName")!=DBNull.Value?
System.Configuration.ConfigurationManager.AppSettings["AzureImagePath"]+Eval("ImageName"):System.Configuration.ConfigurationManager.AppSettings["UserImagePath"]+"profile-empty-head.gif"%>'
Height="100px" Width="90px" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn AllowFiltering="false" DataField="Actions" HeaderText="Actions"
HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Center">
<%--OnClientClick='radconfirm("Are you sure you want to Change this LockStatus?", ClientGridCallback,300,150); return false;' --%>
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgLockStatus" ImageUrl="~/App_Themes/DefaultClient/images/unlock.png"
CommandName="ChangeLockStatus" CommandArgument='<%# Eval("UsrId") %>' ToolTip="UserLockStatus"
AlternateText="LockStatus" OnClientClick="return blockConfirm('Are you sure you want to Change Lock Status?', event, 340, 150,'','Change Lock Status')" />
<asp:ImageButton runat="server" ID="imgUserStatus" ImageUrl="~/App_Themes/DefaultClient/images/select.png"
CommandName="ChangeUserStatus" CommandArgument='<%# Eval("UsrId") %>' ToolTip="UserActivationStatus"
AlternateText="UserActivationStatus" OnClientClick="return blockConfirm('Are you sure you want to Change Activation Status?', event, 340, 150,'','Change Activation Status')" />
<asp:ImageButton runat="server" ID="imgResetPassword" ImageUrl="~/App_Themes/DefaultClient/images/logoff.png"
CommandName="ResetPassword" CommandArgument='<%# Eval("UsrId") %>' ToolTip="ResetPassword"
Width="22px" Height="22px" AlternateText="ResetPassword" OnClientClick="return blockConfirm('Are you sure you want to Reset Password?', event, 340, 150,'','Reset Password')" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<%-- <telerik:GridButtonColumn ConfirmText="Are you sure you want to Change LockStatus ?<br /><br /><br />"
ConfirmDialogType="RadWindow" HeaderStyle-Width="15px" ConfirmDialogHeight="150px"
HeaderText="LockStatus" HeaderStyle-HorizontalAlign="Center" CommandName="ChangeLockStatus"
ButtonType="ImageButton" ImageUrl="~/App_Themes/DefaultClient/images/unlock.png"
ItemStyle-HorizontalAlign="Center" ConfirmTitle="Delete Currency" UniqueName="ChangeLockStatus">
</telerik:GridButtonColumn>
<telerik:GridButtonColumn ConfirmText="Are you sure you want to Change ActivationStatus ?<br /><br /><br />"
ConfirmDialogType="RadWindow" HeaderStyle-Width="15px" ConfirmDialogHeight="150px"
HeaderText="ActivationStatus" HeaderStyle-HorizontalAlign="Center" CommandName="ChangeUserStatus"
ButtonType="ImageButton" ImageUrl="~/App_Themes/DefaultClient/images/unlock.png"
ItemStyle-HorizontalAlign="Center" ConfirmTitle="Delete Currency" UniqueName="ChangeUserStatus">
</telerik:GridButtonColumn>--%>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<GroupingSettings CaseSensitive="False" />
<ClientSettings>
<ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>
<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
</telerik:RadGrid>
</td>
</tr>
</table>
Try this ..........