[Solved] Custom Filtering + Frozen Columns

[Kyle Murphy]

Hi All,

Thanks in advance to anybody who may be able to help me. 

I am having two problems with an implementation of RadGrid. The first is how to define a custom filter method for percentage values. I have a grid with some columns as integers and others as percentages (double). I would like for the user to be able to filter these values based on their percentage value (0-100) and not their rate value (0-1). For example, filter by 1.79 as opposed to 0.0179. I realize the easiest way to do this is to cast the user input as a double and divide by 100 to obtain the corresponding rate, however I am not sure how to do this.

The second problem I am having is scrolling with frozen columns and headers. It seems that when I declare frozen columns, the grid does not scroll to the right entirely and truncates the right-most columns from view. The more frozen columns I have, the more columns get truncated from the right. Below are screenshots to illustrate the problem:

Without frozen columns (Link Outage is right-most column): http://216.196.244.34/scroll.jpg

With 2 frozen columns (Link Outage is no longer viewable): http://216.196.244.34/freezescrollbroken.jpg

NOTE: The RadGrid I have declared in code has the static columns as well as a dozen or so dynamic columns, generated at run-time.

                RadGrid1.ClientSettings.Scrolling.AllowScroll = true;
                RadGrid1.ClientSettings.Scrolling.FrozenColumnsCount = 2;
                RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = true;

<telerik:RadGrid Width="800px" OnItemCommand="radGridItemCommand" Skin="Hay" ID="RadGrid1" runat="server" AllowPaging="True" AllowFilteringByColumn="True" AllowSorting="True" GridLines="None" AutoGenerateColumns="False" OnItemDataBound="radGridItemDataBound" OnNeedDataSource="radGridNeedDataSource" >

<MasterTableView Height="100%" PageSize="24" RetrieveAllDataFields="false" AllowSorting="true">

<Columns>

<telerik:GridBoundColumn FilterImageUrl="img/arrow-icon.png" FilterControlWidth="50" DataField="Data_Date" SortExpression="Data_Date" HeaderText="Date" DataFormatString="{0:MM/dd/yy}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn Visible="false" FilterControlWidth="15" DataField="Data_Hour" SortExpression="Data_Hour" HeaderText="Hour2"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn FilterImageUrl="img/arrow-icon.png" FilterControlWidth="15" HeaderText="Hour" SortExpression="Data_Hour">

<ItemTemplate>

<asp:LinkButton ID="hourLinkButton" runat="server" CommandName="Click" CausesValidation="false" CommandArgument='<% # Eval("Data_Date").ToString() + "|" + Eval("Data_Hour").ToString() %>' Text='<% #Eval("Data_Hour") %>' OnClick="AntennaLevel"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn Visible="false" FilterControlWidth="15" DataField="Week" SortExpression="Week" HeaderText="Week"></telerik:GridBoundColumn>

<telerik:GridBoundColumn Visible="false" FilterControlWidth="15" DataField="Month" SortExpression="Month" HeaderText="Month"></telerik:GridBoundColumn>

<telerik:GridBoundColumn FilterControlWidth="15" Visible="False" DataField="MarketNum" SortExpression="MarketNum" HeaderText="MarketNum"></telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<AlternatingItemStyle BackColor="#c9fca3"/>

</telerik:RadGrid>

Thanks again for any assistance you can provide,

Kyle

[Tsvetoslav]

Hi Kyle,

Concerning you first question, please, review the following forum thread where you can find a sample demonstrating the desired scenario:
http://admin.telerik.com/?Context=Support&Control=~/UserControls/Support/ThreadReply.ascx&ST=213906&SM=0&PURL=%2fDefault.aspx

As for the frozen column issue, try setting the HeaderStyle.Width property of each to a suitable column value and see if it helps.

Regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kyle Murphy]

Thank you for your reply. I actually saw the article that deals with frozen headers and scrolling, and tried to declare each column with a header width, but it produces the same results as before. Right now, my workaround is to have an additional column declared (with a blank header) that I allow to be 'eaten up' by the rendering issue. Below is my updated code:

                                <telerik:RadGrid Width="900" OnItemCommand="radGridItemCommand" Skin="Hay" ID="RadGrid1" runat="server" AllowPaging="True" AllowFilteringByColumn="True" AllowSorting="True" GridLines="None" AutoGenerateColumns="False" OnItemDataBound="radGridItemDataBound" OnNeedDataSource="radGridNeedDataSource" >
                                    <MasterTableView PageSize="24" RetrieveAllDataFields="false" AllowSorting="true">
                                        <Columns>
                                            <telerik:GridBoundColumn HeaderStyle-Width="75" FilterImageUrl="img/arrow-icon.png" FilterControlWidth="50" DataField="Data_Date" SortExpression="Data_Date" HeaderText="Date" DataFormatString="{0:MM/dd/yy}"></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn HeaderStyle-Width="50" Visible="false" FilterControlWidth="15" DataField="Data_Hour" SortExpression="Data_Hour" HeaderText="Hour2"></telerik:GridBoundColumn>
                                            <telerik:GridTemplateColumn HeaderStyle-Width="50" FilterImageUrl="img/arrow-icon.png" FilterControlWidth="15" HeaderText="Hour" SortExpression="Data_Hour">
                                                <ItemTemplate>
                                                    <asp:LinkButton ID="hourLinkButton" runat="server" CommandName="Click" CausesValidation="false" CommandArgument='<% # Eval("Data_Date").ToString() + "|" + Eval("Data_Hour").ToString() %>' Text='<% #Eval("Data_Hour") %>' OnClick="AntennaLevel"/>
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn HeaderStyle-Width="50" Visible="false" FilterControlWidth="15" DataField="Week" SortExpression="Week" HeaderText="Week"></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn HeaderStyle-Width="50" Visible="false" FilterControlWidth="15" DataField="Month" SortExpression="Month" HeaderText="Month"></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn HeaderStyle-Width="50" FilterControlWidth="15" Visible="False" DataField="MarketNum" SortExpression="MarketNum" HeaderText="MarketNum"></telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>
                                    <ClientSettings Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true" Scrolling-FrozenColumnsCount="2" />
                                    <HeaderStyle Wrap="false" />
                                    <ItemStyle Wrap="false" />
                                    <AlternatingItemStyle BackColor="#c9fca3"/>
                                </telerik:RadGrid>

Also, the link you posted regarding custom filtering ( http://admin.telerik.com/?Context=Support&Control=~/UserControls/Support/ThreadReply.ascx&ST=213906&SM=0&PURL=%2fDefault.aspx ) does not seem to work.

Thanks Again,

Kyle

[Tsvetoslav]

Hi Kyle,

1. With regards to the first question, please, try the following link:
http://www.telerik.com/community/forums/aspnet-ajax/grid/filter-numerictype-quot-percentage-quot.aspx

2. As for the second one - this is a know issue with the fozen columns scrolling and you need to set a greater HeaderStyle.Width to the last column so that it will not be truncated.

Regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.