[Solved] Scollable Grid Changes Column Widths

[david]

Hi,

I used this: 

<Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="500px" />

and now my grid width changes in odd ways and it is so wide it has horizontal scoll bars.  I read this artticle and I think I'm doing it correctly: http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/Client/Scrolling/DefaultCS.aspx

<telerik:RadGrid id="RadGrid1" runat="server" datasourceid="SqlDataSource1" gridlines="None"

skin="Office2007"

OnItemCommand = "RadGrid1_ItemCommand"

OnItemCreated="RadGrid1_ItemCreated"

Width="800px"

AllowSorting="True" ShowFooter="True" EnableAJAX="True">

<

ClientSettings EnableRowHoverStyle="True" >

<

Selecting AllowRowSelect="True" />

<

ClientEvents OnRowClick="Dummy"></ClientEvents>

<Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="500px" />

</

ClientSettings>

<

pagerstyle mode="NumericPages" position="TopAndBottom" />

<

MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowAutomaticDeletes="true" DataKeyNames="CourseIDX" CommandItemDisplay="Top" ClientDataKeyNames="CourseIDX">

<

Columns>

<

telerik:GridBoundColumn DataField="CourseIDX" UniqueName="CourseIDX" HeaderText="CourseIDX" Display="False"></telerik:GridBoundColumn>

<

telerik:GridBoundColumn DataField="CourseID" UniqueName="CourseID" HeaderText="CourseID" Display="false"></telerik:GridBoundColumn>

<

telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" Display="True" > <ItemStyle Width="300px" HorizontalAlign="Left"/></telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Preview" UniqueName="Preview">

<ItemTemplate>

<asp:HyperLink ID="Preview" runat="server"

ImageUrl="~/images/nav/search.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Course Properties" UniqueName="EditCourse">

<ItemTemplate>

<asp:HyperLink ID="EditCourse" runat="server"

ImageUrl="~/radcontrols/grid/skins/edit.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Tree" UniqueName="EditTree">

<ItemTemplate>

<asp:HyperLink ID="EditTree" runat="server"

ImageUrl="~/images/fileimages/3domain.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Sheet" UniqueName="EditSheet">

<ItemTemplate>

<asp:HyperLink ID="EditSheet" runat="server"

ImageUrl="~/images/fileimages/resx.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Points" UniqueName="Points">

<ItemTemplate>

<asp:HyperLink ID="Points" runat="server"

ImageUrl="~/images/fileimages/resx.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" HeaderText="Student Status"

ImageUrl="~/radcontrols/grid/skins/windows/update.gif"

CommandName="SStatus" UniqueName="SStatus" >

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridButtonColumn>

 

<

telerik:GridButtonColumn UniqueName="column" HeaderText="Delete" ConfirmText="Confirm Delete of Course!!!" Text="Delete" CommandName="Delete" ButtonType="ImageButton">

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridButtonColumn>

</Columns>

 

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<

EditFormSettings>

<

EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"></EditColumn>

</

EditFormSettings>

<CommandItemTemplate>

<asp:LinkButton ID="LinkButton4" runat="server" CommandName="Rebind"><img style="border:0px" alt="" src="/RadControls/Grid/Skins/Windows/Refresh.gif" /> Refresh</asp:LinkButton> &nbsp;

&nbsp;

&nbsp;

<asp:Image ID="Image1" runat="server"

ImageUrl="~/RadControls/Grid/Skins/Windows/AddRecord.gif"/>

<a href="/Instructor/ICWNewCourse.aspx" target="_blank">New Course</a>

</CommandItemTemplate>

</

MasterTableView>

<ExportSettings>

<Pdf PageBottomMargin="" PageFooterMargin="" PageHeaderMargin="" PageHeight="11in"

PageLeftMargin="" PageRightMargin="" PageTopMargin="" PageWidth="8.5in" />

<

Excel Format="Html"></Excel>

<

Csv RowDelimiter="NewLine" ColumnDelimiter="Comma"></Csv>

</ExportSettings>

</

telerik:RadGrid>

[Shinu]

Hi David,

To restrict the horizontal bar from being rendered, verify that:

    * the width for the MasterTableView is set to 99% if auto-generated columns are used.
    * the total width of the declaratively set columns is smaller than the width of the grid itself.


Thanks
Shinu

[david]

I had to make the grid about 2X the width of my defined columns to eliminate the behaviour.  Now the horizontal scollbars are gone but the content of the first row (only) is shifted right about 30px , all the rows below are properly aligned.

<%

@ Page Language="C#" Theme ="EdwayAdmin" MasterPageFile="~/Administration/AdminMasterPage.master" AutoEventWireup="true" CodeFile="Admin-Course-Master.aspx.cs" Inherits="Administration_Admin_CourseM" %>

<%

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

<

asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<

form id="form1" runat="server">

<

script type="text/javascript">

function

Points(rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var cid = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = cid.innerHTML ;

var url = "Admin-Course-EditPoints.aspx?CourseID="+CourseID;

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=1000,height=800');

return false;

}

function Preview(id, rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var cid = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = cid.innerHTML ;

var cidx = mtv.getCellByColumnUniqueName(row, "CourseIDX")

var CourseIDX = cidx.innerHTML ;

var url = "Admin-Course-Preview.aspx?CourseID="+CourseID+"&SectionID=1&LectureID=1&PC=A&F=Start";

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=1000,height=800');

return false;

}

function ShowEditTree(rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var cid = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = cid.innerHTML ;

var cidx = mtv.getCellByColumnUniqueName(row, "CourseIDX")

var CourseIDX = cidx.innerHTML ;

var url = "/Administration/Admin-Lecture-Tree.aspx?CourseID="+CourseID + "&CourseIDX=" + CourseIDX;

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=1000,height=800');

return false;

}

function ShowEdtSheet(rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var tf = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = tf.innerHTML ;

var url = "/Administration/Admin-Lecture-Sheet.aspx?CourseID="+CourseID + "&SectionID=1";

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=1000,height=800');

return false;

}

function EditCourse(rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var cid = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = cid.innerHTML ;

var cidx = mtv.getCellByColumnUniqueName(row, "CourseIDX")

var CourseIDX = cidx.innerHTML ;

var url = "/Administration/Admin-Course-Update.aspx?CourseIDX="+CourseIDX + "&CourseID=" + CourseID; //course ID for FileUpload

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=800,height=800');

return false;

}

</

script>

<

asp:ScriptManager ID="ScriptManager1" runat="server">

</

asp:ScriptManager>

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">

<asp:ListItem Selected="True" Value="Y">Active</asp:ListItem>

<asp:ListItem Value="N">Inactive</asp:ListItem>

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:edwaydbConnectionString %>"

SelectCommand="SELECT CourseID, CourseIDX, Name FROM [Courses] Where CourseActive=@Active order by Name"

DeleteCommand="DELETE FROM [Courses] WHERE [CourseIDX] = @CourseIDX"

>

<selectparameters>

<asp:controlparameter ControlID="DropDownList1" DefaultValue="Y" Name="Active"

PropertyName="SelectedValue" />

</selectparameters>

<DeleteParameters>

<asp:parameter Name="CourseIDX" Type="Int16" />

</DeleteParameters>

</asp:SqlDataSource>

<asp:Label ID="lblCourseID" runat="server" Text=""></asp:Label>

<br />

<telerik:RadGrid id="RadGrid1" runat="server" datasourceid="SqlDataSource1" gridlines="None"

skin="Office2007"

OnItemCommand = "RadGrid1_ItemCommand"

OnItemCreated="RadGrid1_ItemCreated"

Width="900px"

AllowSorting="True" ShowFooter="True" EnableAJAX="True">

<

ClientSettings EnableRowHoverStyle="True" >

<

Selecting AllowRowSelect="True" />

<

ClientEvents OnRowClick="Dummy"></ClientEvents>

<

Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="600px" />

</

ClientSettings>

<

pagerstyle mode="NumericPages" position="TopAndBottom" />

<

MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowAutomaticDeletes="true" DataKeyNames="CourseIDX" CommandItemDisplay="Top" ClientDataKeyNames="CourseIDX">

<

Columns>

<

telerik:GridBoundColumn DataField="CourseIDX" UniqueName="CourseIDX" HeaderText="CourseIDX" Display="False"></telerik:GridBoundColumn>

<

telerik:GridBoundColumn DataField="CourseID" UniqueName="CourseID" HeaderText="CourseID" Display="false"></telerik:GridBoundColumn>

<

telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" Display="True" >

<

ItemStyle Width="100px" HorizontalAlign="Left"/></telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Preview" UniqueName="Preview">

<ItemTemplate>

<asp:HyperLink ID="Preview" runat="server"

ImageUrl="~/images/nav/search.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Course Properties" UniqueName="EditCourse">

<ItemTemplate>

<asp:HyperLink ID="EditCourse" runat="server"

ImageUrl="~/radcontrols/grid/skins/edit.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Tree" UniqueName="EditTree">

<ItemTemplate>

<asp:HyperLink ID="EditTree" runat="server"

ImageUrl="~/images/fileimages/FileTreeView.gif" ></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Sheet" UniqueName="EditSheet">

<ItemTemplate>

<asp:HyperLink ID="EditSheet" runat="server"

ImageUrl="~/images/fileimages/ascx.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Points" UniqueName="Points">

<ItemTemplate>

<asp:HyperLink ID="Points" runat="server"

ImageUrl="~/images/fileimages/tasks.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" HeaderText="Student Status"

ImageUrl="~/radcontrols/grid/skins/windows/update.gif"

CommandName="SStatus" UniqueName="SStatus" >

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridButtonColumn>

 

<

telerik:GridButtonColumn UniqueName="column" HeaderText="Delete"

ConfirmText="Confirm Delete of Course!!!" Text="Delete" CommandName="Delete"

ButtonType="ImageButton" ConfirmDialogType="RadWindow">

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridButtonColumn>

</Columns>

 

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<

EditFormSettings>

<

EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"></EditColumn>

<

PopUpSettings ScrollBars="None"></PopUpSettings>

</

EditFormSettings>

<CommandItemTemplate>

<asp:LinkButton ID="LinkButton4" runat="server" CommandName="Rebind"><img style="border:0px" alt="" src="/RadControls/Grid/Skins/Windows/Refresh.gif" /> Refresh</asp:LinkButton> &nbsp;

&nbsp;

&nbsp;

<asp:Image ID="Image1" runat="server"

ImageUrl="~/RadControls/Grid/Skins/Windows/AddRecord.gif"/>

<a href="/Instructor/ICWNewCourse.aspx" target="_blank">New Course</a>

</CommandItemTemplate>

</

MasterTableView>

<ExportSettings>

<Pdf PageBottomMargin="" PageFooterMargin="" PageHeaderMargin="" PageHeight="11in"

PageLeftMargin="" PageRightMargin="" PageTopMargin="" PageWidth="8.5in" />

<

Excel Format="Html"></Excel>

<

Csv RowDelimiter="NewLine" ColumnDelimiter="Comma"></Csv>

</ExportSettings>

</

telerik:RadGrid>

 

</form>

</

asp:Content>

[david]

I had to make the grid about 2X the width of my defined columns to eliminate the behaviour.  Now the horizontal scollbars are gone but the content of the first row (only) is shifted right about 30px , all the rows below are properly aligned.

<%

@ Page Language="C#" Theme ="EdwayAdmin" MasterPageFile="~/Administration/AdminMasterPage.master" AutoEventWireup="true" CodeFile="Admin-Course-Master.aspx.cs" Inherits="Administration_Admin_CourseM" %>

<%

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

<

asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<

form id="form1" runat="server">

<

script type="text/javascript">

function

Points(rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var cid = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = cid.innerHTML ;

var url = "Admin-Course-EditPoints.aspx?CourseID="+CourseID;

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=1000,height=800');

return false;

}

function Preview(id, rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var cid = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = cid.innerHTML ;

var cidx = mtv.getCellByColumnUniqueName(row, "CourseIDX")

var CourseIDX = cidx.innerHTML ;

var url = "Admin-Course-Preview.aspx?CourseID="+CourseID+"&SectionID=1&LectureID=1&PC=A&F=Start";

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=1000,height=800');

return false;

}

function ShowEditTree(rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var cid = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = cid.innerHTML ;

var cidx = mtv.getCellByColumnUniqueName(row, "CourseIDX")

var CourseIDX = cidx.innerHTML ;

var url = "/Administration/Admin-Lecture-Tree.aspx?CourseID="+CourseID + "&CourseIDX=" + CourseIDX;

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=1000,height=800');

return false;

}

function ShowEdtSheet(rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var tf = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = tf.innerHTML ;

var url = "/Administration/Admin-Lecture-Sheet.aspx?CourseID="+CourseID + "&SectionID=1";

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=1000,height=800');

return false;

}

function EditCourse(rowIndex)

{

var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());

var selectedRows = mtv.get_selectedItems();

var row = selectedRows[0];

var cid = mtv.getCellByColumnUniqueName(row, "CourseID")

var CourseID = cid.innerHTML ;

var cidx = mtv.getCellByColumnUniqueName(row, "CourseIDX")

var CourseIDX = cidx.innerHTML ;

var url = "/Administration/Admin-Course-Update.aspx?CourseIDX="+CourseIDX + "&CourseID=" + CourseID; //course ID for FileUpload

day =

new Date();

iddt = day.getTime();

window.open(url , iddt ,

'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=800,height=800');

return false;

}

</

script>

<

asp:ScriptManager ID="ScriptManager1" runat="server">

</

asp:ScriptManager>

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">

<asp:ListItem Selected="True" Value="Y">Active</asp:ListItem>

<asp:ListItem Value="N">Inactive</asp:ListItem>

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:edwaydbConnectionString %>"

SelectCommand="SELECT CourseID, CourseIDX, Name FROM [Courses] Where CourseActive=@Active order by Name"

DeleteCommand="DELETE FROM [Courses] WHERE [CourseIDX] = @CourseIDX"

>

<selectparameters>

<asp:controlparameter ControlID="DropDownList1" DefaultValue="Y" Name="Active"

PropertyName="SelectedValue" />

</selectparameters>

<DeleteParameters>

<asp:parameter Name="CourseIDX" Type="Int16" />

</DeleteParameters>

</asp:SqlDataSource>

<asp:Label ID="lblCourseID" runat="server" Text=""></asp:Label>

<br />

<telerik:RadGrid id="RadGrid1" runat="server" datasourceid="SqlDataSource1" gridlines="None"

skin="Office2007"

OnItemCommand = "RadGrid1_ItemCommand"

OnItemCreated="RadGrid1_ItemCreated"

Width="900px"

AllowSorting="True" ShowFooter="True" EnableAJAX="True">

<

ClientSettings EnableRowHoverStyle="True" >

<

Selecting AllowRowSelect="True" />

<

ClientEvents OnRowClick="Dummy"></ClientEvents>

<

Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="600px" />

</

ClientSettings>

<

pagerstyle mode="NumericPages" position="TopAndBottom" />

<

MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowAutomaticDeletes="true" DataKeyNames="CourseIDX" CommandItemDisplay="Top" ClientDataKeyNames="CourseIDX">

<

Columns>

<

telerik:GridBoundColumn DataField="CourseIDX" UniqueName="CourseIDX" HeaderText="CourseIDX" Display="False"></telerik:GridBoundColumn>

<

telerik:GridBoundColumn DataField="CourseID" UniqueName="CourseID" HeaderText="CourseID" Display="false"></telerik:GridBoundColumn>

<

telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" Display="True" >

<

ItemStyle Width="100px" HorizontalAlign="Left"/></telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Preview" UniqueName="Preview">

<ItemTemplate>

<asp:HyperLink ID="Preview" runat="server"

ImageUrl="~/images/nav/search.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Course Properties" UniqueName="EditCourse">

<ItemTemplate>

<asp:HyperLink ID="EditCourse" runat="server"

ImageUrl="~/radcontrols/grid/skins/edit.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Tree" UniqueName="EditTree">

<ItemTemplate>

<asp:HyperLink ID="EditTree" runat="server"

ImageUrl="~/images/fileimages/FileTreeView.gif" ></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Sheet" UniqueName="EditSheet">

<ItemTemplate>

<asp:HyperLink ID="EditSheet" runat="server"

ImageUrl="~/images/fileimages/ascx.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Edit Points" UniqueName="Points">

<ItemTemplate>

<asp:HyperLink ID="Points" runat="server"

ImageUrl="~/images/fileimages/tasks.gif"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" HeaderText="Student Status"

ImageUrl="~/radcontrols/grid/skins/windows/update.gif"

CommandName="SStatus" UniqueName="SStatus" >

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridButtonColumn>

 

<

telerik:GridButtonColumn UniqueName="column" HeaderText="Delete"

ConfirmText="Confirm Delete of Course!!!" Text="Delete" CommandName="Delete"

ButtonType="ImageButton" ConfirmDialogType="RadWindow">

<ItemStyle Width="50px" HorizontalAlign="Center"/>

</telerik:GridButtonColumn>

</Columns>

 

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<

EditFormSettings>

<

EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"></EditColumn>

<

PopUpSettings ScrollBars="None"></PopUpSettings>

</

EditFormSettings>

<CommandItemTemplate>

<asp:LinkButton ID="LinkButton4" runat="server" CommandName="Rebind"><img style="border:0px" alt="" src="/RadControls/Grid/Skins/Windows/Refresh.gif" /> Refresh</asp:LinkButton> &nbsp;

&nbsp;

&nbsp;

<asp:Image ID="Image1" runat="server"

ImageUrl="~/RadControls/Grid/Skins/Windows/AddRecord.gif"/>

<a href="/Instructor/ICWNewCourse.aspx" target="_blank">New Course</a>

</CommandItemTemplate>

</

MasterTableView>

<ExportSettings>

<Pdf PageBottomMargin="" PageFooterMargin="" PageHeaderMargin="" PageHeight="11in"

PageLeftMargin="" PageRightMargin="" PageTopMargin="" PageWidth="8.5in" />

<

Excel Format="Html"></Excel>

<

Csv RowDelimiter="NewLine" ColumnDelimiter="Comma"></Csv>

</ExportSettings>

</

telerik:RadGrid>

 

</form>

</

asp:Content>

[Yavor]

Hello david,

Another option that you may consider is adding fixed width for the columns - I see that you have included a width setting for the items, and you can do the same for the headers. Also, you may set TableLayout to Fixed, for the control.

Kind regards,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[david]

that worked,

thank you