Grid Column Width problem in firefox

[sushant]

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

[Dimo]

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.

[sushant]

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

[Benjamin]

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.

[sushant]

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

[Dimo]

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.

[sushant]

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

[Dimo]

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.

[Mina]

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); }