Grid Column Width problem in firefox

9 posts, 0 answers
  1. sushant
    sushant avatar
    18 posts
    Member since:
    Oct 2008

    Posted 17 Nov 2008 Link to this post

    Hi All,

    I am using radGrid and I have set width of a grid to 100% I also set mastertable width to 100% when I set useStaticHeader property to true my grid column does not stretch to grid width,this problem comes only in firefox but in IE its fine,please tell me solution as early as possible as I have spent 2-3 days to search this solution
  2. Dimo
    Admin
    Dimo avatar
    8458 posts

    Posted 17 Nov 2008 Link to this post

    Hello Sushant,

    Please explain in more detail what exactly the problem is, provide a screenshot and your RadGrid declaration.

    Best wishes,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. sushant
    sushant avatar
    18 posts
    Member since:
    Oct 2008

    Posted 17 Nov 2008 Link to this post

    Hello Dimo,

    Here is my grid declaration

    <telerik:RadGrid ID="radGridAttributes" DataSourceID="SqlAttGrid" Skin="DwtDemo"
              EnableEmbeddedSkins="False" GridLines="None" AllowPaging="True" AllowSorting="True"
              Width="100%" AutoGenerateColumns="False" PageSize='<%# pageCount  %>' runat="server"
              OnDeleteCommand="radGridAttributes_DeleteCommand" OnInsertCommand="radGridAttributes_InsertCommand"
              OnUpdateCommand="radGridAttributes_UpdateCommand" OnItemDataBound="radGridAttributes_ItemDataBound"
              OnItemCreated="radGridAttributes_ItemCreated" OnItemCommand="radGridAttributes_ItemCommand"
              OnCancelCommand="radGridAttribute_CancelCommand">
               <PagerStyle FirstPageImageUrl="PagingFirst.gif" LastPageImageUrl="PagingLast.gif"
                                      NextPageImageUrl="PagingNext.gif" PrevPageImageUrl="PagingPrev.gif" Mode="NextPrevAndNumeric"
                                      PagerTextFormat="Displaying Items {2} to {3} of {5}." />
              <MasterTableView CommandItemDisplay="Top" PageSize='<%# pageCount  %>' EditFormSettings-EditColumn-EditImageUrl="../images/grid/Edit.gif"
              CommandItemSettings-RefreshText="" CommandItemSettings-AddNewRecordText="Add New" DataKeyNames="AttributeID"  EditMode="PopUp" GridLines="None" Width="100%" >
               <CommandItemSettings />
               <RowIndicatorColumn>
                <HeaderStyle Width="20px" />
               </RowIndicatorColumn>
               <ExpandCollapseColumn>
                <HeaderStyle Width="20px" />
               </ExpandCollapseColumn>
               <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                </telerik:GridEditCommandColumn>
                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmDialogType="RadWindow"
                 ConfirmText="Do you really want to delete this record?" ConfirmTitle="Delete" Text="Delete" UniqueName="DeleteColumn" />
                <telerik:GridBoundColumn UniqueName="AttributeID" SortExpression="AttributeID" HeaderText="AttributeID"
                 ReadOnly="true" Visible="false" DataField="AttributeID" />
                <telerik:GridBoundColumn UniqueName="EntityID" SortExpression="EntityID" HeaderText="Entity ID"
                 ReadOnly="true" Visible="false" DataField="EntityID" />
                <telerik:GridBoundColumn UniqueName="ColumnName" SortExpression="ColumnName" HeaderText="Column Name"
                 DataField="ColumnName" />
                <telerik:GridBoundColumn UniqueName="FriendlyName" SortExpression="FriendlyName"
                 HeaderStyle-Wrap="false" HeaderText="Friendly Name" DataField="FriendlyName" />
                <telerik:GridCheckBoxColumn DataField="IsEditable" HeaderText="Is Editable" DataType="System.Boolean"
                 UniqueName="IsEditable" HeaderStyle-Wrap="true" HeaderStyle-HorizontalAlign="Center"
                 ItemStyle-HorizontalAlign="Center">
                </telerik:GridCheckBoxColumn>
                <telerik:GridCheckBoxColumn DataField="IsVisibleOnForm" HeaderText="Is Visible On Form"
                 DataType="System.Boolean" UniqueName="IsVisibleOnForm" HeaderStyle-Wrap="true"
                 HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                </telerik:GridCheckBoxColumn>
                <telerik:GridCheckBoxColumn DataField="IsVisibleOnGrid" HeaderText="Is Visible On Grid"
                 DataType="System.Boolean" UniqueName="IsVisibleOnGrid" HeaderStyle-Wrap="true"
                 HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                </telerik:GridCheckBoxColumn>
                <telerik:GridCheckBoxColumn DataField="IsAudited" HeaderText="Is Audited" DataType="System.Boolean"
                 UniqueName="IsAudited" HeaderStyle-Wrap="true" HeaderStyle-HorizontalAlign="Center"
                 ItemStyle-HorizontalAlign="Center">
                </telerik:GridCheckBoxColumn>
                <telerik:GridCheckBoxColumn DataField="IsApprovalRequired" HeaderText="Is Approval Required"
                 DataType="System.Boolean" UniqueName="IsApprovalRequired" HeaderStyle-Wrap="true"
                 HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                </telerik:GridCheckBoxColumn>
                <telerik:GridCheckBoxColumn DataField="IsEntityTitle" HeaderText="Is Entity Title"
                 DataType="System.Boolean" UniqueName="IsEntityTitle" HeaderStyle-Wrap="true" HeaderStyle-HorizontalAlign="Center"
                 ItemStyle-HorizontalAlign="Center">
                </telerik:GridCheckBoxColumn>
                <telerik:GridBoundColumn UniqueName="GridDisplayOrder" SortExpression="GridDisplayOrder"
                 HeaderText="Grid Display Order" DataField="GridDisplayOrder" HeaderStyle-Wrap="true"
                 HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
                <telerik:GridBoundColumn UniqueName="FormDisplayOrder" SortExpression="FormDisplayOrder"
                 HeaderText="Form Display Order" DataField="FormDisplayOrder" HeaderStyle-Wrap="true"
                 HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
                <telerik:GridTemplateColumn HeaderText="Reference">
                 <HeaderTemplate>
                  <asp:Label ID="Label2" runat="server" Text="Reference"></asp:Label>
                 </HeaderTemplate>
                 <ItemTemplate>
                  <asp:Label ID="lblFKEntityName" runat="server" Text='<%# Eval("FKEntityName") %>'></asp:Label>
                 </ItemTemplate>
                 <EditItemTemplate>
                  <telerik:RadComboBox ID="radGridComboEntity" AppendDataBoundItems="true" runat="server"
                   Skin="DwtDemo" EnableEmbeddedSkins="false">
                   <Items>
                    <telerik:RadComboBoxItem Style="text-align: center;" Text="--Select--" Value="0" />
                   </Items>
                  </telerik:RadComboBox>
                 </EditItemTemplate>
                 <HeaderStyle Wrap="false" />
                </telerik:GridTemplateColumn>
               </Columns>
               <EditFormSettings FormCaptionStyle-Font-Bold="true"      FormStyle-BorderWidth="1" FormStyle-BorderColor="DarkSlateGray"  FormCaptionStyle-ForeColor="Purple" CaptionFormatString="Attribute" EditColumn-ButtonType="PushButton"
               EditColumn-CancelImageUrl="../Employee/Cancel.gif" EditColumn-InsertImageUrl="../Employee/Update.gif"
               EditColumn-UpdateImageUrl="../Employee/Update.gif">
               <EditColumn HeaderText="Attribute" UniqueName="EditCommandColumn1">
               </EditColumn>
               <FormStyle BorderStyle="Solid" />
               <FormMainTableStyle CellPadding="10" CellSpacing="10" HorizontalAlign="Center" />
               </EditFormSettings>
                     <PagerStyle FirstPageImageUrl="PagingFirst.gif" LastPageImageUrl="PagingLast.gif"
                                    NextPageImageUrl="PagingNext.gif" PrevPageImageUrl="PagingPrev.gif" Mode="NextPrevAndNumeric" />
              </MasterTableView>
              <ClientSettings>
               <Scrolling AllowScroll="True" EnableVirtualScrollPaging="False" UseStaticHeaders="true" ScrollHeight="380px"  />
              </ClientSettings>
              <FilterMenu EnableTheming="True" Skin="DwtDemo">
               <CollapseAnimation Duration="200" Type="OutQuint" />
              </FilterMenu>
              <EditItemStyle BackColor="#e2e2e2" BorderColor="#E2E2E2" />
             </telerik:RadGrid>

     

     

    Look my grid declaration though I have set width of grid and mastertableview width 100% my columns does not stretch to grid width some space remains blank on right side,this problem comes only in Firefox,And this problem comes only when I set useStaticHeader property to true.

    I am not able to show you screenshot bcz there is no functionality of attachment


    Please provide solution as my project deadline is very near

    Thanks in Advance


    Ragrds,

    Sam T

  4. Benjamin
    Benjamin avatar
    21 posts
    Member since:
    Apr 2008

    Posted 18 Nov 2008 Link to this post

    You have to include the other ASP code for the container holding your grid: <table>, <body>, <form>, etc.. These are most likely at fault for reducing your grid's width.

    As a small note, use the 'Format Code Block' button on the toolbar when you're replying. Its the button next to the spell checker and will help us read through your code easier.
  5. sushant
    sushant avatar
    18 posts
    Member since:
    Oct 2008

    Posted 18 Nov 2008 Link to this post

    Hello Dimo,

    I am sending you preview link to see my problem in deatils,I am sending you login credentials

    link is http://38.99.180.111:300/
    loginname:admin
    password:admin

    select admin from dropdown


    After login please select attribute tab,on attribute page select document  from select entity dropdown

     

    See the right side blank space in grid,also check add new record pop up it becomes transperant

     

    This problem only comes in forefox and when I set useStaticHeader property to true.

     

    Please help me as soon as possible as my project deadline is very near.

    Please let me know if you face any problem

     

     

    Regards,

     

    Sam T

  6. Dimo
    Admin
    Dimo avatar
    8458 posts

    Posted 18 Nov 2008 Link to this post

    Hi Sushant,

    Thank you for providing access to your application.

    The empty gap issue is related to RadGrid's auto table layout functionality and Firefox - unfortunately, we encountered some serious difficulties implementing this feature and it is not fully supported in this browser.

    What you can do is to set TableLayout="Fixed" for the MasterTableView and remove the MasterTableView width. In this case the table will expand to 100% automatically. When you do this, all columns will become equally wide, so in addition, you can also set column widths (in percent or in pixels) using HeaderStyle-Width.

    Let us know if you need more information.


    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. sushant
    sushant avatar
    18 posts
    Member since:
    Oct 2008

    Posted 18 Nov 2008 Link to this post

    Hello Dimo,

    Thanks for your reply,but when I set table layout  fixed all the columns overlap with each other,You can check all the tabs,As I am creating grid dynamically my columns are not fix so I cannot fix the column width.

    My second problem is when I try to add new record my pop up goes behind the grid,this problem comes only in firefox and when I set
    useStaticHeader property to true.

    My third problem is when my application remains idle and after some time when I click tab or edit button I get javascript error and my application stuck and  when I click logout button I get error as state information is currupted or lost

    I have redirected  page to login page in page init event when session expires.

    Dimo please send me reply as early as possible bcz I need to give demo to client tonight

     

    Regards,

     

    Sam T

  8. Dimo
    Admin
    Dimo avatar
    8458 posts

    Posted 19 Nov 2008 Link to this post

    Hello Sam,

    Here are some suggestions on your issues:

    1) (column width and overlapping)

    When RadGrid scrolling is enabled and no width is specified for the columns or the MasterTableView, by default RadGrid accommodates all columns so that they are all visible in the control's available space. In order to change this, you can do one of the following:

    1a) Set some large Width for the MasterTableView, e.g.

    <MasterTableView Width="2000px" />

    1b) Set some width for all columns, e.g.

    <MasterTableView>
        <HeaderStyle Width="100px" />
    </MasterTableView>

    1c) Set some widths for each column programmatically.


    2) (popup edit form positioning)

    I cannot reproduce this problem neither in your application, nor in a test page of mine. Am I missing something?


    3) (javascript error)

    Please consult the attached example, which demonstrates how to resolve session-related javascript errors.


    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. Mina
    Mina avatar
    9 posts
    Member since:
    Oct 2015

    Posted 19 Aug 2019 Link to this post

    Use below in grid dataBound:

    var gridFunctions = {
    gridScrollable: function (t,e) {

    for (i = 0; i <= $("#" + t.wrapper.context.id + " col").length; i++) {
    var w = $($("#" + t.wrapper.context.id + " col")[i]).width();
    if (w > 0) {
    $($("#" + t.wrapper.context.id + " thead th")[i]).width(w+"px");
    $($("#" + t.wrapper.context.id + " tbody tr:nth-child(1) td")[i]).width(w + "px");


    }

    }
    }

     

    function selectedSTU_dataBound(e) { gridFunctions.gridScrollable(this,e); }

Back to Top