This is a migrated thread and some comments may be shown as answers.

repaint and frozencolumnscount

5 Answers 129 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Albert Shenker asked on 15 Dec 2010, 05:02 PM

I have a tabstrip with multiple pageviews, each which contain a grid with height 100%. When the tabs are switched, I obtain the particular grid object client side and use repaint. This is necessary because otherwise the grid appears collapsed. At least, this was the case in previous versions. Perhaps this bug has been fixed. Anyhow, the issue I am having is that all my grids have frozencolumnscount="1" set, because I want the first column to be frozen. However, only the grid which is on the pageview that loads initially has this working. When I switch tabs, the other grids don't have their first column frozen. Any idea what might be going on. Is the grid repaint causing the issue?

5 Answers, 1 is accepted

answered on 21 Dec 2010, 08:36 AM

Hello Albert,

Since there are a lot of client-side specifics about RadGrid, could you please paste the mark-up of your TabStrip including the grid declaration, so we can see your settings and copy them into a working project to inspect the behavior of the frozen columns functionality? Also, could you please confirm if posting back and rebinding the grid on tab change fixes the issue on your side?

Best wishes,
Tsvetina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 21 Dec 2010, 04:26 PM

Postback works, but that isn't really an option in my scenario. I need the switching of tabs to be fast, so I load the data on both tabs/grids up font. The following markup isn't exactly what I have.... The grids actually exist in user controls and are ajaxified, but this is the gist of it.

Markup:

<telerik:RadCodeBlock ID="rcb1" runat="server">

<script type="text/javascript">

function TabSelectedHandler_QMM(sender, eventArgs) {

var tab = eventArgs.get_tab();

switch (tab.get_value()) {

case "SEP":

grid = $find("<%= rgDataSEP.ClientId%>");

if (grid) {

grid.repaint();

}

break;

case "VR":

grid = $find("<%= rdDataSEP.ClientId%>");

if (grid) {

grid.repaint();

}

break;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadTabStrip ID="tsQMM"

runat="server"

Skin="Office2007"

MultiPageID="mpQMM"

width="100%"

SelectedIndex="0"

OnClientTabSelected="TabSelectedHandler_QMM">

<Tabs>

<telerik:RadTab ID="tab1" runat="server" PageViewID="pvSEP" Text="SEP" Value="SEP" />

<telerik:RadTab ID="tab2" runat="server" PageViewID="pvVR" Text="VR" Value="VR" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="mpQMM"

runat="server"

Height="100%"

SelectedIndex="0"

CssClass="TabbedContent">

<telerik:RadPageView ID="pvSEP" runat="server" Height="100%">

<div style="padding:7px; height:100%;">

<telerik:RadGrid id="rgDataSEP"

runat="server"

AutoGenerateColumns="False"

Skin="Office2007"

AllowSorting="False"

AllowPaging="False"

Height="100%"

ShowFooter="False"

>

<MasterTableView

DataKeyNames="Id"

ClientDataKeyNames="Id"

Width="100%"

TableLayout="Fixed"

>

<Columns>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="Group" DataField="GroupName" />

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="P(#)" DataField="PlacementRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Current Working SEP"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="P(%)" DataField="PlacementPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Current Working SEP %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="JM(#)" DataField="JobMatchRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs matching job goal"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="JM(%)" DataField="JobMatchPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs matching job goal %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="H(#)" DataField="WorkHoursRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs matching hour goal"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="H(%)" DataField="WorkHoursPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs matching hour goal %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="W(#)" DataField="WagesRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs matching wage goal"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="W(%)" DataField="WagesPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs matching wage goal %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="90(#)" DataField="PlacedWithinGoalRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Placed within 90 days"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="90(%)" DataField="PlacedWithinGoalPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Placed within 90 days %"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="PT(μ)" DataField="PlacementTimeframe_AvgString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Placement Speed Average"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="R(#)" DataField="RetentionRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs retained"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="R(%)" DataField="RetentionPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs retained %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="RP(#)" DataField="RetentionPlanRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs with retention plans"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="RP(%)" DataField="RetentionPlanPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Jobs with retention plans %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="CP(#)" DataField="NonWorkPlacementRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Current Community Placements"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="CP(%)" DataField="NonWorkPlacementPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community Placement %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="CJM(#)" DataField="NonWorkJobMatchRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community placements matching job goal"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="CJM(%)" DataField="NonWorkJobMatchPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community placements matching job goal %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="CH(#)" DataField="NonWorkHoursRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community Placements matching hour goal"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="CH(%)" DataField="NonWorkHoursPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community Placements matching hour goal %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="C90(#)" DataField="NonWorkPlacedWithinGoalRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community Placed within 90 days"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="C90(%)" DataField="NonWorkPlacedWithinGoalPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community Placed within 90 days %"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="CPT(μ)" DataField="NonWorkPlacementTimeframe_AvgString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community Placement Speed Average"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="CRP(#)" DataField="NonWorkRetentionPlanRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community Placements with retention plans"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="CRP(%)" DataField="NonWorkRetentionPlanPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Community Placements with retention plans %"/>

</Columns>

<CommandItemTemplate>

</CommandItemTemplate>

</MasterTableView>

<ItemStyle BorderStyle="None" />

<GroupingSettings GroupByFieldsSeparator="" CaseSensitive="False" />

<ClientSettings AllowExpandCollapse="False">

<ClientEvents OnFilterMenuShowing="" />

<Selecting AllowRowSelect="False" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100%" FrozenColumnsCount="1" />

<Resizing AllowColumnResize="False" ClipCellContentOnResize="False" EnableRealTimeResize="False" ResizeGridOnColumnResize="True"/>

</ClientSettings>

<ExportSettings>

</ExportSettings>

</telerik:RadGrid> </div>

</telerik:RadPageView>

<telerik:RadPageView ID="pvVR" runat="server" Height="100%">

<div style="padding:7px; height:100%;">

<telerik:RadGrid id="rgDataVR"

runat="server"

AutoGenerateColumns="False"

Skin="Office2007"

AllowSorting="False"

AllowPaging="False"

Height="100%"

ShowFooter="False"

>

<MasterTableView

DataKeyNames="Id"

ClientDataKeyNames="Id"

Width="100%"

TableLayout="Fixed"

>

<Columns>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="Group" DataField="GroupName" />

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="C(#)" DataField="VRClosureRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Current Closure Raw Numbers"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="C(%)" DataField="VRClosurePctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Current Closure %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="60(#)" DataField="PlacedWithinGoalRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Placed within 60 days"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="60(%)" DataField="PlacedWithinGoalPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Placed within 60 days %"/>

<telerik:GridBoundColumn ItemStyle-Width="100px" HeaderStyle-Width="100px" HeaderText="WA(#)" DataField="WorkAssessmentPlacementRawNumberString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Current Work Assessment VR"/>

<telerik:GridBoundColumn ItemStyle-Width="55px" HeaderStyle-Width="55px" HeaderText="WA(%)" DataField="WorkAssessmentPlacementPctString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Current Work Assessment %"/>

<telerik:GridBoundColumn ItemStyle-Width="60px" HeaderStyle-Width="60px" HeaderText="WAPT(μ)" DataField="WorkAssessmentTimeframe_AvgString" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderTooltip="Work Assessment Speed Average"/>

</Columns>

<CommandItemTemplate>

</CommandItemTemplate>

</MasterTableView>

<ItemStyle BorderStyle="None" />

<GroupingSettings GroupByFieldsSeparator="" CaseSensitive="False" />

<ClientSettings AllowExpandCollapse="False">

<ClientEvents OnFilterMenuShowing="" />

<Selecting AllowRowSelect="False" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100%" FrozenColumnsCount="1" />

<Resizing AllowColumnResize="False" ClipCellContentOnResize="False" EnableRealTimeResize="False" ResizeGridOnColumnResize="True"/>

</ClientSettings>

<ExportSettings>

</ExportSettings>

</telerik:RadGrid> </div>

</telerik:RadPageView>

</telerik:RadMultiPage>

answered on 27 Dec 2010, 01:18 PM

RadControlsWebSite2.zip

Hello Albert,

I prepared a sample project using most of your code but I could not replicate the issue. Could you please take a look at it and let me know if I am missing anything essential?

The only changes that I made on purpose are:
-Changed the ID of the grid in the second javascript if-statement because it was not correct and was erroring out
-Skipped the ItemStyle-Width settings because they are not recommended to use, especially when you have scrolling with static headers and frozen columns
-Set width and height in pixels to some of the controls, so I could have them rendered in a way that would facilitate testing the page (plus it is recommended that at least one of RadGrid's containers has dimensions set in pixels).

All the best,
Tsvetina
the Telerik team

answered on 13 Jan 2011, 07:22 PM

I will need to look into this further. Maybe it has something to do with the fact that the grids are ajaxified. Can you alter your example to include a button which ajaxifies the first grid and another button which ajaxifies the second grid? Clicking the buttons rebinds the grid. Also, can you tell me what version of the contorls you are using in your example?

As for the the column widths and container sizes... I develop desktop-like web applications, so the grid must resize with the container, and it would be highly unfeasable to have all grid columns be the same width when they contain very different kinds of data. I can appreciate how making all the columns the same width, and fixing the height or width of the grid makes things easier from a browser rendering and compliance point of view, and would therefore be recommended, but these functionlaities are a requirement in pretty much any web application I have built. Anyhow, I tested your example with setting the column widths and container width/height to 100% and it still seems to work... so again, I am wondering if my issue has to do with ajaxification of the grids.

answered on 17 Jan 2011, 10:21 AM

ajax-RadControlsWebSite2.rar

Hi Albert,

I modified the sample as per your requirements and the frozen column still functions. I am attaching the new version for you to see. The version of RadControls used is the latest official release: Q3 2010 SP1.

There is no problem setting the widths of your columns as you wish them to be, the only thing is that you should use the HeaderStyle-Width, instead of ItemStyle-Width property.

Greetings,
Tsvetina
the Telerik team