Filter row looks bad after deployment in sharepoint 2010

[Мarkus]

Hi,

i have an asp.net application using some radgrids with filter controls: AllowFilteringByColumn="True"
I tested the radgrid from my local machine, and the radgrid looked fine.
Then i deployed the web application to a sharepoint server.
Now i noticed that the filter controls (the filter row) look bad only when the FilterIcon of my GridDateTimeColumn is hidden: ShowFilterIcon="false"

Here a screenshot when the FilterIcon of my DateTimeColumn is hidden: link1
Here a screenshot when the FilterIcon of my DateTimeColumn is visible: link2

• Can someone explain me why and how to fix it? Is that a known Issue in Sharepoint 2010?
• As we plan to use our radgrid only in sharepoint environment, it is really important for us to know,
what are the known issues of the Telerik version 2010.1.415.20 in sharepoint?

Here the code of my aspx page:

<table border="0" style="height: 100%; width: 100%">

<tr >

<td style="width: 100%; padding-top: 5px; vertical-align: top;">

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

<script type="text/javascript">

function OnClientSelectedIndexChangedHandler(sender, eventArgs) {

var inputElement = sender.get_inputDomElement();

inputElement.style.textAlign = "center";

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" />

<telerik:RadGrid ID="RadGrid1" Skin="Windows7" Width="100%" AllowFilteringByColumn="True"

AllowSorting="True" PageSize="12" AllowPaging="True" runat="server"

AutoGenerateColumns="False" GridLines="None" >

<GroupingSettings CaseSensitive="false" />

<MasterTableView EditMode="InPlace" DataKeyNames="ProjectUID" TableLayout="Fixed">

<Columns>

<telerik:GridHyperLinkColumn HeaderText="ProjectName" UniqueName="ProjectName" DataTextField="ProjectName"

SortExpression="ProjectName" HeaderStyle-Width="40%" FilterControlWidth="95%" AutoPostBackOnFilter="false" ShowFilterIcon="true" />

<telerik:GridBoundColumn HeaderText="ProjectLeader" DataField="ProjectLeader" UniqueName="ProjectLeader"

SortExpression="ProjectLeader" HeaderStyle-Width="15%" FilterControlWidth="85%" AutoPostBackOnFilter="false" ShowFilterIcon="true" />

<telerik:GridDateTimeColumn HeaderText="LastReport" DataField="LastReport" UniqueName="LastReport" DataType="System.DateTime" DataFormatString="{0:MM/d/yyyy}"

SortExpression="LastReport" HeaderStyle-Width="15%" FilterControlWidth="90%" AutoPostBackOnFilter="false" ShowFilterIcon="true" />

<telerik:GridBoundColumn HeaderText="LastModifiedBy" DataField="LastModifiedBy" UniqueName="LastModifiedBy"

SortExpression="LastModifiedBy" HeaderStyle-Width="15%" FilterControlWidth="85%" AutoPostBackOnFilter="false" ShowFilterIcon="true" />

<telerik:GridTemplateColumn HeaderText="Status" DataField="Status" UniqueName="Status"

SortExpression="Status" HeaderStyle-Width="15%" FilterControlWidth="85%" ReadOnly="true" AutoPostBackOnFilter="false" ShowFilterIcon="false" >

<ItemTemplate>

<asp:Image ID="StatusImage" Style="float: left;" ImageUrl=''

runat="server" AlternateText="StatusImage" />

<asp:Label ID="StatusLabel" runat="server" Text='<%#Eval("Status")%>'></asp:Label>

</ItemTemplate>

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="FilterComboStatus" AutoPostBack="true"

Filter="Contains" Skin="Windows7" Width="99%"

DataTextField="<%# STR_TEXT %>" DataValueField="<%# STR_VALUE %>" DataSource='<%# GridHelperObj.Indicator_CreateStatusDT() %>'

OnSelectedIndexChanged="FilterComboStatus_SelectedIndexChanged"

OnClientLoad="OnClientSelectedIndexChangedHandler"

SelectedValue='<%# TryCast(Container,GridItem).OwnerTableView.GetColumn("Status").CurrentFilterValue %>' >

</telerik:RadComboBox>

</FilterTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn >

</Columns>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

</table>

Thank you in advance

[Tsvetoslav]

Hi Markus,

Going by the screenshots and your mark-up, what is taking place is that the filter control coupled with the filter image do not with within the header cell and thus the browser tries to wrap them expanding the height of the latter and consequently of the whole header row. You should set a smaller with for the filter control taking into account that the filter button image requires some space as well. Currently, I saw the FilterControlWidth to be set to 90%, however evidently 10% is not enough for the filter image to fit in smoothly.

Currently we do not have any issues reported for the telerik controls under Sharepoint 2010.

Hope it helps.

Best wishes,
Tsvetoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.