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

Is there a way to make the last column in a grid as wide as the remaining space

1 Answer 219 Views

Grid

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

Tim asked on 12 Nov 2011, 03:49 PM

Hi

A co-worker of mine has changed some of our grids so the columns size to fit the data.

However this leaves some area of the grid blank when the available width is large.

Is there any way to have the last column snp to fit the remaining width.

This is particularly unsightly, in my opinion, when there are alternating colors on the grid rows.

Here is the grid definition.

<telerik:RadGrid ID="radGridPolicy" runat="server"

AllowFilteringByColumn="true"

AllowMultiRowSelection="true"

AllowPaging="true"

AllowSorting="true"

AlternatingItemStyle-Wrap="false"

AutoGenerateColumns="false"

ClientSettings-AllowColumnsReorder="true"

ClientSettings-AllowKeyboardNavigation="false"

ClientSettings-EnablePostBackOnRowClick="true"

ClientSettings-ReorderColumnsOnClient="true"

ClientSettings-Resizing-AllowColumnResize="true"

ClientSettings-Resizing-AllowResizeToFit="true"

ClientSettings-Resizing-EnableRealTimeResize="true"

ClientSettings-Resizing-ResizeGridOnColumnResize="true"

ClientSettings-Scrolling-AllowScroll="true"

ClientSettings-Scrolling-UseStaticHeaders="true"

ClientSettings-Selecting-AllowRowSelect="true"

ClientSettings-Selecting-EnableDragToSelectRows="true"

FilterMenu-EnableImageSprites="false"

HeaderContextMenu-CssClass="GridContextMenu GridContextMenu_Default"

HeaderStyle-Font-Bold="true"

HeaderStyle-Wrap="false"

Height="100%"

ItemStyle-Wrap="false"

OnItemCommand="radGridPolicy_ItemCommand"

OnItemCreated="radGridPolicy_ItemCreated"

OnItemDataBound="radGridPolicy_ItemDataBound"

OnNeedDataSource="radGridPolicy_NeedDataSource"

PagerStyle-Mode="NextPrevAndNumeric"

PageSize="40">

<telerik:GridClientSelectColumn HeaderStyle-Width="30px" />

<telerik:GridBoundColumn DataField="TenantId"

Display="False"

HeaderText="TenantID"

UniqueName="TenantID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PolicyId"

Display="False"

HeaderText="PolicyID"

UniqueName="PolicyID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PolicyType"

Display="False"

HeaderText="PolicyType"

UniqueName="PolicyType">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PolicySubType"

Display="False"

HeaderText="PolicySubType"

UniqueName="PolicySubType">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SupportedClients"

Display="False"

HeaderText="ClientType"

UniqueName="ClientType">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Enabled" HeaderStyle-HorizontalAlign="Center"

FilterControlAltText="Filter State column" HeaderText="State" ItemStyle-HorizontalAlign="Center"

SortExpression="PolicyState" UniqueName="PolicyState" >

<telerik:RadComboBox ID="FilterPolicyByState" runat="server" Width="40px" DropDownWidth="250px"

SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("PolicyState").CurrentFilterValue %>'

OnClientLoad="OnPolicyStateLoad" OnClientSelectedIndexChanged="OnPolicyStateIndexChanged" >

<Items>

<telerik:RadComboBoxItem Text="" Value="-1" Selected="True" />

<telerik:RadComboBoxItem Text="Published" Value="1" ImageUrl="~/Images/toolApprove.png" ToolTip="Published" />

<telerik:RadComboBoxItem Text="Unpublished" Value="0" ImageUrl="~/Images/toolUnapprove.png" ToolTip="Unpublished" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlockPolicyState" runat="server">

function OnPolicyStateLoad(sender)

{

var inputArea = sender.get_inputDomElement();

var selVal = sender.get_selectedIndex();

//debugger;

if (selVal != 0)

{

inputArea.style.background =

"url(" + sender.get_items().getItem(selVal).get_imageUrl() + ") no-repeat ";

}

sender.set_text(

"");

}

function OnPolicyStateIndexChanged(sender, args)

{

var masterTable = $find( "<%= radGridPolicy.ClientID %>" ).get_masterTableView();

var value = args.get_item().get_value();

var item = args.get_item();

//debugger;

if ( value != -1 )

{

masterTable.filter(

"PolicyState", value, Telerik.Web.UI.GridFilterFunction.EqualTo );

}

else

{

masterTable.filter(

"PolicyState", "", Telerik.Web.UI.GridFilterFunction.NoFilter );

sender.set_selectedIndex(0);

}

sender.set_text(

"");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PolicyType"

FilterControlAltText="Filter Type column" HeaderText="Type"

SortExpression="PolicyType" UniqueName="PolicyTypeImage" >

<telerik:RadComboBox ID="FilterPolicyByType" runat="server" Width="40px" DropDownWidth="200px"

SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("PolicyTypeImage").CurrentFilterValue %>'

OnClientLoad="OnPolicyTypeLoad" OnClientSelectedIndexChanged="OnPolicyTypeIndexChanged" >

<Items>

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlockPolicyType" runat="server">

function OnPolicyTypeLoad(sender)

{

var inputArea = sender.get_inputDomElement();

var selVal = sender.get_selectedIndex();

//debugger;

if (selVal != 0)

{

inputArea.style.background =

"url(" + sender.get_items().getItem(selVal).get_imageUrl() + ") no-repeat ";

}

sender.set_text(

"");

}

function OnPolicyTypeIndexChanged(sender, args)

{

var masterTable = $find("<%= radGridPolicy.ClientID %>").get_masterTableView();

var value = args.get_item().get_value();

var item = args.get_item();

//debugger;

if (value != -1)

{

masterTable.filter(

"PolicyTypeImage", value, Telerik.Web.UI.GridFilterFunction.EqualTo);

}

else

{

masterTable.filter(

"PolicyTypeImage", "", Telerik.Web.UI.GridFilterFunction.NoFilter);

sender.set_selectedIndex(0);

}

sender.set_text(

"");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SupportedClients"

FilterControlAltText="Filter Client Type column"

HeaderText="OS"

SortExpression="ClientType"

UniqueName="ClientTypeImage" DataType="System.Int32">

<telerik:RadComboBox ID="FilterPolicyByClientType" runat="server" Width="40px" DropDownWidth="250px"

SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ClientTypeImage").CurrentFilterValue %>'

OnClientLoad="OnPolicyClientTypeLoad" OnClientSelectedIndexChanged="OnPolicyClientTypeIndexChanged" ClientIDMode="Static">

<Items>

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlockPolicyClientType" runat="server">

function OnPolicyClientTypeLoad(sender)

{

var inputArea = sender.get_inputDomElement();

var selVal = sender.get_selectedIndex();

//debugger;

if (selVal != 0)

{

inputArea.style.background =

"url(" + sender.get_items().getItem(selVal).get_imageUrl() + ") no-repeat ";

}

sender.set_text(

"");

}

function OnPolicyClientTypeIndexChanged(sender, args)

{

var masterTable = $find("<%= radGridPolicy.ClientID %>").get_masterTableView();

var value = args.get_item().get_value();

var item = args.get_item();

//debugger;

if (value != 0)

{

masterTable.filter(

"ClientTypeImage", value, Telerik.Web.UI.GridFilterFunction.EqualTo);

}

else

{

masterTable.filter(

"ClientTypeImage", "", Telerik.Web.UI.GridFilterFunction.NoFilter);

sender.set_selectedIndex(0);

}

sender.set_text(

"");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Name" HeaderText="Policy"

DataFormatString="<nobr>{0}</nobr>"

FilterControlAltText="Filter Name column"

SortExpression="Name"

UniqueName="Name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Description" HeaderText="Note"

DataFormatString="<nobr>{0}</nobr>"

FilterControlAltText="Filter Description column"

SortExpression="Description"

UniqueName="Note">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="UpdateTime"

DataType="System.DateTime" DataFormatString="<nobr>{0}</nobr>"

FilterControlAltText="Filter last update column"

HeaderText="Last Modified"

SortExpression="LastUpdate"

UniqueName="LastUpdate">

<telerik:RadDateTimePicker ID="RadDateTimePicker1"

runat="server" DateInput-DisplayDateFormat="MMMM dd, yyyy hh:mm:ss">

</telerik:RadDateTimePicker>

</FilterTemplate>

</telerik:GridBoundColumn>

</Columns>

</EditFormSettings>

<grid:PolicyToolbar ID="PolicyGridToolbar" runat="server" ClientIDMode="Static" />

</CommandItemTemplate>

</MasterTableView>

</telerik:RadGrid>

I would like the LastUpdate column to stretch to fill all the available widht of the grid.

TIA

1 Answer, 1 is accepted

answered on 14 Nov 2011, 07:16 AM

Hello Tim,

In below example first column have fixed width and second column adjust their width regarding the available space.

<Columns>

<telerik:GridBoundColumn DataField="ID1" HeaderText="ID1" UniqueName="ID1">

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ID2" HeaderText="ID2" UniqueName="ID2">

</telerik:GridBoundColumn>

</Columns>

<Columns>

<telerik:GridBoundColumn DataField="ID1" HeaderText="ID1" UniqueName="ID1">

<ItemStyle Width="30%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ID2" HeaderText="ID2" UniqueName="ID2">

<ItemStyle Width="70%" />

</telerik:GridBoundColumn>

</Columns>

Thanks,
Jayesh Goyani