Chrome and Rad Grid Rendering issue

10 posts, 0 answers
  1. Jelly Master
    Jelly Master avatar
    39 posts
    Member since:
    Oct 2010

    Posted 29 Feb 2012 Link to this post

    Hi Just wondering if someone can help.

    I have a strange issue with Chrome and the way it seems to render my rad grid.
    Zibrant Test Site

    In firefox 10.0.2, IE 7,8,9 the grid renders correctly but in Chrome it seems to create a grid with a massive width on it and also messes up the grouping panel section as well.  below is the grid.

     
    <telerik:RadGrid ID="radGrid" runat="server" AutoGenerateColumns="False" OnNeedDataSource="radGrid_NeedDataSource"
           AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" ShowFooter="True"
           ShowGroupPanel="True" ShowStatusBar="True" CellSpacing="0" OnColumnCreating="radGrid_ColumnCreating"
           OnItemCommand="radGrid_ItemCommand" EnableLinqExpressions="false" Width="900px" >
           <ExportSettings IgnorePaging="True" ExportOnlyData="true" OpenInNewWindow="true"
               FileName="Event List" HideStructureColumns="true">
           </ExportSettings>
            
           <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" AllowKeyboardNavigation="True">
               <Scrolling AllowScroll="false" EnableVirtualScrollPaging="True" />
               <Animation AllowColumnReorderAnimation="True" AllowColumnRevertAnimation="True" />
               <ClientEvents OnRowDblClick="RowDblClick" />
           </ClientSettings>
           <MasterTableView NoDetailRecordsText="No Events Currently Listed" NoMasterRecordsText="No Events Currently Listed"
               CommandItemDisplay="None" AllowMultiColumnSorting="True" EditMode="PopUp">
               <CommandItemSettings ExportToPdfText="Export to PDF" ShowAddNewRecordButton="False"
                   ShowExportToExcelButton="True" ShowExportToCsvButton="True" ShowExportToPdfButton="True"
                   ShowExportToWordButton="True" />
               <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
               </RowIndicatorColumn>
               <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
               </ExpandCollapseColumn>
               <Columns>
                    
               </Columns>
               <EditFormSettings EditFormType="WebUserControl" UserControlName="~/Controls/EventEmailer.ascx"
                   PopUpSettings-Modal="true" PopUpSettings-Height="500" PopUpSettings-Width="900" CaptionDataField="TitleOfEvent">
                   <EditColumn FilterControlAltText="Filter EditCommandColumn column" UniqueName="EditCommandColumn1">
                   </EditColumn>
               </EditFormSettings>
           </MasterTableView>
           <FilterMenu EnableImageSprites="False" EnableRoundedCorners="True">
           </FilterMenu>
       </telerik:RadGrid>

    The columns are added at run time as I am using the google like filtering feature as demo'd on the site.

    They are added like this:
    if (!IsPostBack)
               {
                   //clear items.
                   radGrid.MasterTableView.Columns.Clear();
                   //add events
                   EventList = LoadEvents(CurrentStyle);
     
     
                   CustomFilteringDropDown title = new CustomFilteringDropDown();
                   radGrid.MasterTableView.Columns.Add(title);
                   AddGridColumns(ref title, "HtmlEncodeTitle", "Title", string.Empty, "portaltablelink", true, "TitleOfEvent", 400);
     
                   CustomFilteringDropDown startDate = new CustomFilteringDropDown();
                   radGrid.MasterTableView.Columns.Add(startDate);
                   AddGridColumns(ref startDate, "startDate", "Start", "ddd, dd MMM yy", string.Empty, false, "startDate", 100);
     
                   CustomFilteringDropDown endDate = new CustomFilteringDropDown();
                   radGrid.MasterTableView.Columns.Add(endDate);
                   AddGridColumns(ref endDate, "endDate", "End", "ddd, dd MMM yy", string.Empty, false, "endDate", 100);
     
                   CustomFilteringDropDown town = new CustomFilteringDropDown();
                   radGrid.MasterTableView.Columns.Add(town);
                   AddGridColumns(ref town, "Town", "Town", string.Empty, string.Empty, true, "Town", 150);
     
                   CustomFilteringDropDown country = new CustomFilteringDropDown();
                   radGrid.MasterTableView.Columns.Add(country);
                   AddGridColumns(ref country, "Country", "Country", string.Empty, string.Empty, true, "Country", 150);
     
                   GridEditCommandColumn editColumn = new GridEditCommandColumn();
                   radGrid.MasterTableView.Columns.Add(editColumn);
                   editColumn.UniqueName = "EditCommandColumn";
                    
                   editColumn.ButtonType = GridButtonColumnType.ImageButton;
                   editColumn.EditImageUrl = "~/Styles/ClientDefault/Images/ContactUs/email_dialog_icon.png";
                   editColumn.EditText = "Email Delegates this link";
     
     
     
     
     
     
               }

    private void AddGridColumns(ref CustomFilteringDropDown item, string dataField, string headerText, string dataFormat, string cssClass, bool enableFilter, string groupByClause, int width)
           {
     
               item.DataField = dataField;
               item.UniqueName = dataField;
     
               item.HtmlEncode = false;
               item.Groupable = true;
               item.GroupByExpression = string.Format("{0} Group By {1}", groupByClause, groupByClause);
               item.AllowSorting = true;
               item.AllowFiltering = enableFilter;
               item.SortExpression = dataField;
               item.HeaderText = headerText;
               item.DataFormatString = "{0:" + dataFormat + "}";
               item.ItemStyle.CssClass = cssClass;
               item.HeaderStyle.Width = Unit.Pixel(width);
               item.FilterControlWidth = Unit.Pixel(width);
     
     
     
           }

    If anyone can shed any light on why this is happening it would be great.


  2. Jelly Master
    Jelly Master avatar
    39 posts
    Member since:
    Oct 2010

    Posted 01 Mar 2012 Link to this post

    Well update.

    Turns out that it was a style issue with the custom filter control being added. It seems that adding a style element of width:100% to the control was causing it to ignore all other styles. setting this to the table cell width has corrected the issue.

    Please can a mod close this down.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gabriel
    Gabriel avatar
    33 posts
    Member since:
    Apr 2011

    Posted 16 Oct 2012 Link to this post

    Hello David,

    Could you tell me the specific property you changed and the value you provided.

    I'm having this same issue but I can't find how to correct it.

    In advance, many thanks.
  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 19 Oct 2012 Link to this post

    Hi Gabriel,

    To resolve the issue in Chrome you should fix the width of the filter's input by setting the property FilterControlWidth to pixel value.

    I hope this helps.

    All the best,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Gabriel
    Gabriel avatar
    33 posts
    Member since:
    Apr 2011

    Posted 19 Oct 2012 Link to this post

    Thank you Galin! Problem Solved!
  7. Simon
    Simon avatar
    4 posts
    Member since:
    Sep 2012

    Posted 26 Oct 2012 Link to this post

    Hi,

    I've been trying to do this programmatically because my columns are autogenerated and I can't predict the number and type of columns. Any clue why this code wouldn't work ?

    Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles ResultGrid.ItemDataBound
        If TypeOf e.Item Is GridDataItem Then
            For Each col As GridColumn In ResultGrid.MasterTableView.AutoGeneratedColumns
                If col.ColumnType = "GridDateTimeColumn" Then
                    col.FilterControlWidth = New System.Web.UI.WebControls.Unit(100, UnitType.Pixel)
                End If
            Next
        End If
    End Sub
  8. Galin
    Admin
    Galin avatar
    526 posts

    Posted 30 Oct 2012 Link to this post

    Hi Simon,

    You should do this onColumnCreated event and set the width on e.Column.FilterControlWidth, e.g.

    If e.Column.ColumnType = "GridDateTimeColumn" Then
        e.Column.FilterControlWidth = New System.Web.UI.WebControls.Unit(100, UnitType.Pixel)
    End If


    I hope hope helps.


    Kind regards,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Simon
    Simon avatar
    4 posts
    Member since:
    Sep 2012

    Posted 30 Oct 2012 Link to this post

    Thank you,

    This worked perfectely !
  10. Justin
    Justin avatar
    4 posts
    Member since:
    Sep 2012

    Posted 01 Nov 2012 Link to this post

    I followed the suggested method of setting the "FilterControlWidth" of the columns, in IE9 and FireFox the column widths appear as I have indicated.  However, in Chrome/Safari my custom column widths are not observed and the widths of each column are the default width, causing the RadGrid to be much wider than needed/desired.  Please have a look at my code and tell me if I am simply doing something wrong, the last three columns are the ones with custom widths.-Thank You
       <telerik:RadGrid ID="rgChairReport" runat="server" AllowFilteringByColumn="True"
           AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CellSpacing="0"
           GridLines="None" BorderStyle="None" Style="z-index: 1; left: 0px; top: -15px;
           position: relative; width: 1241px; max-width: 1241;" OnNeedDataSource="rgChairReport_NeedDataSource"
           OnItemCommand="rgChairReport_ItemCommand" PageSize="6"
           OnPageIndexChanged="rgChairReport_PageIndexChanged">
           <GroupingSettings CaseSensitive="false" />
           <MasterTableView CommandItemDisplay="Top" Width="1241px" AllowFilteringByColumn="true"
               BorderStyle="Solid" BorderColor="Gray" BorderWidth="1px" PageSize="5">
               <CommandItemSettings ShowExportToExcelButton="true" ShowExportToPdfButton="true"
                   ShowAddNewRecordButton="false" ShowRefreshButton="false" />
               <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
               </RowIndicatorColumn>
               <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
               </ExpandCollapseColumn>
               <Columns>
                   <telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter CaseId column"
                       HeaderText="ID" ShowFilterIcon="False" UniqueName="CaseId" DataField="CaseId">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter Committee column"
                       HeaderText="Committee" ShowFilterIcon="False" UniqueName="Committee" DataField="Committee">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter Facility column"
                       HeaderText="Facility" ShowFilterIcon="False" UniqueName="Facility" DataField="Facility">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter DOS column"
                       HeaderText="DOS" ShowFilterIcon="False" UniqueName="DOS" DataField="DateOfService"
                       HeaderStyle-Width="65px" FilterControlWidth="65px" DataFormatString="{0:MM/dd/yyyy}">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter Age column"
                       HeaderStyle-Width="25px" FilterControlWidth="25px" HeaderText="Age" ShowFilterIcon="False"
                       UniqueName="Age" DataField="PADOS">
                   </telerik:GridBoundColumn>
    </Columns>
               <EditFormSettings>
                   <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                   </EditColumn>
               </EditFormSettings>
           </MasterTableView>
           <FilterMenu EnableImageSprites="False">
           </FilterMenu>
       </telerik:RadGrid>

  11. Galin
    Admin
    Galin avatar
    526 posts

    Posted 06 Nov 2012 Link to this post

    Hello Justin,

    I have tested the provided markup and it works as expected, even in Chrome. Are you using custom CSS or something else, which I need to replicate the issue?

    Kind regards,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017