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

radgrid grouping set column width wrong on ie10

1 Answer 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shir
Top achievements
Rank 1
Shir asked on 10 Jul 2014, 02:07 PM
hello telerik,

I have radgrid with number of columns. there is an option to not display all the column on page load. In case of setting display=none to part of them, the grouping operation misses up the column's width. This is not happening if all the columns are displaying and it's happening only in ie10.
 the optional columns are: UserNameColumn,OUNameColumn, PendingUserApprovalColumn, SelectionColumn, MenuColumn

this this the Grid: 
<bks:BksGrid  runat="server" ID="gridUsersCertifications" AutoGenerateColumns="false" OnItemCreated="gridUsersCertifications_OnItemCreated" OnItemDataBound="gridUsersCertifications_OnItemDataBound" OnPreRender="gridUsersCertifications_PreRender" ShowGroupPanel="true" OnNeedDataSource="gridUsersCertifications_OnNeedDataSource" ExtraHeight="55"  AllowMultiRowSelection="true">
    <MasterTableView AllowSorting="false" GroupLoadMode="Client" TableLayout="Fixed" DataKeyNames="UserCertificationID,BE_OriginatedIN,AcquiringStatusID" ClientDataKeyNames="UserCertificationID,BE_OriginatedIN,AcquiringStatusID"  >
     
        <Columns>
            <telerik:GridClientSelectColumn UniqueName="SelectionColumn" ItemStyle-Width="35px" ></telerik:GridClientSelectColumn>
            <telerik:GridTemplateColumn Groupable="false" UniqueName="MenuColumn" ItemStyle-Width="30px">
                <ItemTemplate>
                    <img src="/Images/Edit.png" alt="" onclick="javascript:OpenMenu(event,'<%#Eval("UserCertificationID") %>','<%#Eval("AcquiredCertificationStatusID") %>','<%#Eval("AcquiringStatusID") %>','<%#Eval("AllowUpdateByUser") %>')"/>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn UniqueName="IDColumn" Display="false" DataField="UserCertificationID"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="UserIDColumn" DataField="UserID" Display="false"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="UserNameColumn" DataField="UserName" HeaderText="CERTIFICATION_USER_NAME"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="OUIDColumn" DataField="BE_OriginatedIN" Display="false"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="OUNameColumn" HeaderText="CERTIFICATION_OU" SortExpression="ParentName" GroupByExpression="ParentName Group By ParentName" >
                <ItemTemplate>
                    <span class="spanFullPath">
                        <bks:BksLabel runat="server" ID="lblOuName" Text='<%#Eval("ParentName") %>'></bks:BksLabel>
                    </span>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="CertificationIDColumn" DataField="CertificationID" Display="false"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="MDTypeName" DataField="MDTypeName" HeaderText="CERTIFICATION_TYPE_NAME" ></telerik:GridBoundColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="MDTypeID" DataField="MDTypeID" Display="false" ></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="CertificationNameColumn" DataField="CertificationName" HeaderText="CERTIFICATION_NAME"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="StatusColumn" HeaderText="CERTIFICATION_STATUS" SortExpression="CertificationStatus" GroupByExpression="CertificationStatus Group By CertificationStatus">
                <ItemTemplate>
                    <span class="spanStatus"><img runat="server" id="imgStatus" alt="" src="" /></span>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="CalculatedExpirationDateColumn" DataField="CalculatedExpirationDateFormat" HeaderText="CALCULATED_CERTIFICATION_EXPIRATION_DATE"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="OriginalExpirationDateColumn" DataField="OriginalExpirationDateFormat" HeaderText="ORIGINAL_CERTIFICATION_EXPIRATION_DATE"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="PlannedStartDateColumn" DataField="PlannedStartDateFormat" HeaderText="CERTIFICATION_PLANNED_START_DATE"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="PlannedAcquiringDateColumn" DataField="PlannedAcquiringDateFormat" HeaderText="CERTIFICATION_PLANNED_ACQUIRING_DATE"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn Groupable="false" UniqueName="acquiringStatusColumn" HeaderText="CERTIFICATION_ACQUIRING_STATUS" >
                <ItemTemplate>
                    <span class="spanApprovalProcess">
                        <bks:BksLabel runat="server" ID="lblacquiringStatus" Text='<%#Eval("AcquiringStatus") %>'></bks:BksLabel>
                    </span>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="AcquiringMethodColumn"  DataField="acquiringMethod" HeaderText="CERTIFICATION_ACQUIRING_RENEWAL_METHOD"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn Groupable="false" UniqueName="InitialAcquirementDateColumn" DataField="InitialAcquirementDateFormat" HeaderText="CERTIFICATION_INITIAL_ACQUIREMENT_DATE"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="PendingUserApprovalColumn" Visible="false" HeaderText="CERTIFICATION_PENDING_FOR_USER_APPROVAL" >
                <ItemTemplate>
                    <img runat="server" id="imgPendingUserApproval" alt="" src="/Certifications/Images/PendingApproval.png" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
 
    <ClientSettings AllowGroupExpandCollapse="True" AllowDragToGroup="True" >
        <ClientEvents OnRowMouseOver="GridRowMouseOver" OnRowSelecting="GridUsersCertifications_OnRowSelecting" />
    </ClientSettings>
 
    <GroupingSettings ShowUnGroupButton="true" />
 
    <CommandButtons>
         <bks:BksButton ID="btnUpdateCertification" runat="server" Text="UPDATE_CERTIFICATIONS" OnClientClick="UpdateMultiCertifications()" />
    </CommandButtons>
 
</bks:BksGrid>


thanks in advance,  Shir.

1 Answer, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 15 Jul 2014, 08:40 AM
Hello Shir,

In order to resolve the issue please use the following workaround until our developers fix it. It is logged and will be reviewed as soon as possible.

JavaScript:

function pageLoad() {
    var $ = $telerik.$;
    var grid = $find("<%=gridUsersCertifications.ClientID%>"),
        mtv = grid.get_masterTableView(),
        columns = mtv.get_columns(),
        visibleColumnsCount = 0,
            i;
    if (mtv._groupLevelsCount < 1){
        return;
    }
 
    for (i = 0; i < columns.length; i++) {
        if(columns[i].get_visible()){
            visibleColumnsCount++
        }
    }
 
    $('.rgGroupCol + td').attr('colSpan', visibleColumnsCount)
}


Regards,
Venelin
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Shir
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Share this question
or