Getting Grid to resize with browser window size nicely

[Pride]

I am helping a guy with an asp.net project using rad controls.  It's pretty much a database administration site.  So there are a bunch of RadGrids displaying the data.  The problem is there is horizontal scrolling necessary, and I think that looks terrible.  I would rather the columns get narrower, based on some set of minimum sizes, and word wrap as necessary.  I found I could sort of do this like this:

Form[action="JobPosting.aspx"] colgroup col:nth-child(1)
          {

              width: 50px  !important;
          }​
Form[action="JobPosting.aspx"] colgroup col:nth-child(2)
          {

              width: 100px  !important;
          }

Here is the full asp code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="JobPosting.aspx.cs" Inherits="ASPNETCMS.JobPosting.JobPosting" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>



<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


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

            <script type="text/javascript">
            function RowDblClick(sender, eventArgs)
            {
              sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
            }
            </script>

        </telerik:RadCodeBlock>


    <telerik:RadGrid Width="90%" Height="400px" ID="RadGrid1" runat="server"
        AllowAutomaticInserts="True"
       GridLines="None" Skin="Hay" AllowFilteringByColumn="True"
        AllowPaging="True" DataSourceID="LinqDataSource1"
        onselectedindexchanged="RadGrid1_SelectedIndexChanged"
        AutoGenerateColumns="False"
        oninsertcommand="RadGrid1_InsertCommand"
         OnDeleteCommand="RadGrid1_DeleteCommand"
        onitemcommand="RadGrid1_ItemCommand">
          <ClientSettings>
                <Selecting AllowRowSelect="True" />
                <ClientEvents OnRowDblClick="RowDblClick" />
                <Resizing EnableRealTimeResize="true" />
<Scrolling AllowScroll="True" UseStaticHeaders="false"></Scrolling>
            </ClientSettings>
<MasterTableView  CommandItemDisplay="Top"
            DataSourceID="LinqDataSource1" PageSize="25" EditMode="EditForms"   >
             <Columns>
                 <telerik:GridButtonColumn CommandName="Select" Text="Select"
                     UniqueName="column1" ItemStyle-Wrap="true">
                 </telerik:GridButtonColumn>
                 <telerik:GridBoundColumn DataField="jobID" DataType="System.Int32"
                     HeaderText="jobID" SortExpression="jobID" UniqueName="jobID"
                     Visible="False" Resizable="true" ItemStyle-Wrap="true" >
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="jobTitle" HeaderText="Title"
                     SortExpression="jobTitle" UniqueName="jobTitle"  ItemStyle-Wrap="true">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="jobLocation" HeaderText="Location"
                     SortExpression="jobLocation" UniqueName="jobLocation" Visible="False">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="jobType" HeaderText="job Type"
                     SortExpression="jobType" UniqueName="jobType">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="jobContactEmail" HeaderText="jobContactEmail"
                     SortExpression="jobContactEmail" UniqueName="jobContactEmail"
                     Visible="False">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="jobContactAddress"
                     HeaderText="jobContactAddress" SortExpression="jobContactAddress"
                     UniqueName="jobContactAddress" Visible="False">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="jobDescription"
                     HeaderText="jobDescription" SortExpression="jobDescription"
                     UniqueName="jobDescription" Visible="False">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="jobStatus"
                     HeaderText="job Status" SortExpression="jobStatus" UniqueName="jobStatus">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="opening_date" HeaderText="opening date"
                     SortExpression="opening_date" UniqueName="opening_date" Visible="False"
                     DataType="System.DateTime">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="closing_date" HeaderText="closing date"
                     SortExpression="closing_date" UniqueName="closing_date"
                     DataType="System.DateTime">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="start_date" HeaderText="start_date"
                     SortExpression="start_date" UniqueName="start_date" Visible="False"
                     DataType="System.DateTime">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="end_date" HeaderText="end date"
                     SortExpression="end_date" UniqueName="end_date" DataType="System.DateTime">
                 </telerik:GridBoundColumn>
                 <telerik:GridBoundColumn DataField="openUntilFilled"
                     HeaderText="openUntilFilled" SortExpression="openUntilFilled"
                     UniqueName="openUntilFilled" Visible="False">
                 </telerik:GridBoundColumn>
                 <telerik:GridButtonColumn CommandName="Delete" Text="Delete"
                     UniqueName="column"   ButtonType="ImageButton" ImageUrl="~/images/trash_can.png">
                 </telerik:GridButtonColumn>
             </Columns>
             <EditFormSettings EditFormType="WebUserControl" PopUpSettings-ScrollBars="Both"    UserControlName="JobPostingDetail.ascx"   >
                <%--  <PopUpSettings ScrollBars="Auto" Width="800px" Height="600" /> --%><EditColumn UniqueName="EditCommandColumn1"></EditColumn>

<PopUpSettings ScrollBars="Both"></PopUpSettings>
             </EditFormSettings>

<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>


    <PagerStyle Mode="Slider" />

</MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="True" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
    </telerik:RadGrid>


    <asp:LinqDataSource ID="LinqDataSource1" runat="server"
        ContextTypeName="ASPNETCMS.JobPosting.JobsDBDataContext" EnableDelete="True"
        EnableUpdate="True" TableName="tblJobListings" OrderBy="end_date desc">
    </asp:LinqDataSource>
</asp:Content>

 The problem is this seems inconsistent.  Also, the top rows (sort row) and titles don't size accordingly. I have been trying to accomplish this with just modifiying the css and html.  I don't have the actual radcontrols on my computer.  I guess I can try to modify the css for the title and sort row, but in three places it seems redundant, and wrong.

Is there a easy way to do this?

Here is a link of the skewed columns

screenshot

Edit:
There defiantly has to be a pretty simple way to do this.  Using this code:

Form[action="JobPosting.aspx"] #ctl00_ContentPlaceHolder1_RadGrid1_ctl00 colgroup col:nth-child(1)
          {
         background-color:Yellow;
              width: 50px  ;
          }​
Form[action="JobPosting.aspx"] #ctl00_ContentPlaceHolder1_RadGrid1_ctl00  colgroup col:nth-child(2)
          {
         background-color:Blue  !important;
              width: 50px ;
          }
      Form[action="JobPosting.aspx"] #ctl00_ContentPlaceHolder1_RadGrid1_ctl00  colgroup col:nth-child(3)
          {
              background-color:Red;
              width: 10px;
          }
     Form[action="JobPosting.aspx" ] #ctl00_ContentPlaceHolder1_RadGrid1_ctl00  colgroup col:nth-child(4)
          {
               background-color:Orange;
              width: 10px !important;
          }
    Form[action="JobPosting.aspx" ] #ctl00_ContentPlaceHolder1_RadGrid1_ctl00  colgroup col:nth-child(5)
          {  background-color:Purple;

              width: 10px !important;
          }
    Form[action="JobPosting.aspx" ] #ctl00_ContentPlaceHolder1_RadGrid1_ctl00  colgroup col:nth-child(6)
          {  background-color:Black;

              width: 10px !important;
          }
     Form[action="JobPosting.aspx" ] #ctl00_ContentPlaceHolder1_RadGrid1_ctl00  colgroup col:nth-child(7)
          {  background-color:White;

              width: 10px !important;
          }

I get the second screenshot here  screenshot2

The second column isn't being touched.  I don't see why.  


Edit #2:
Ok, So setting the width in the asp control for the grid column's work.  That makes it act like a min-width.  Now the titles and sort row widths are not the same as the regular column widths.  

[Pavlina]

Hi,

You can refer to the code library below to see how you can resize grid depending the browser window side:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx

All the best,
Pavlina
the Telerik team