[Solved] Changing Grid Width Displays Hidden Columns

[Tracy]

Hi,

I am using the following code to allow the user to change the width of the grid.  The code works great the problem is, if the user has chosen to hide any columns (display=false) the columns are re-displayed when the width is changed.

Is there any way I can keep the columns hidden?

function SetGridWidth(GridClientId, WidthClientId) {

var radGrid = $find(GridClientId);

var grdWidth = document.getElementById(WidthClientId);

if (grdWidth.value > 2000) {

grdWidth.value = 2000;

} if (radGrid) {

radGrid.get_element().style.width = grdWidth.value + "px";

radGrid.repaint();

}

}

Thank You
Tracy

[Princy]

Hi Tracy,

Please try the below code snippet,it accepts the column's uniquename to be hidden in a textbox,and on the buttton click ,the column is hidden.I have used a RadSlider for setting width for the radgrid.The code works fine at my end.If this doesn't help,please provide your full code.

ASPX:

<telerik:RadSlider ID="RadSlider1" runat="server" ItemType="Tick" Width="400px" Height="40px"
    SmallChange="10" LargeChange="50" MinimumValue="100" MaximumValue="400" Value="200"
    TrackPosition="BottomRight" OnClientValueChange="applyHeight" LiveDrag="false" />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClientClick="ClientClick();" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function ClientClick()
       {
            var txt = document.getElementById("TextBox1");    //Access the textbox
            var value = txt.value;
            var radGrid = $find('<%= RadGrid1.ClientID %>');
            var table = radGrid.get_masterTableView();
            var column = table.getColumnByUniqueName(value);
            table.hideColumn(column.get_element().cellIndex);
       }

        function applyHeight(sender, args) {
            var grid;
            // set height to the whole RadGrid control
            grid = $find("<%= RadGrid1.ClientID %>");
            grid.get_element().style.width = args.get_newValue() + "px";
            grid.repaint();

    </script>
</telerik:RadCodeBlock>

    <telerik:RadGrid ID="RadGrid1" AllowSorting="true" runat="server" Height="200px"
        AutoGenerateColumns="false" DataSourceID="SqlDataSource1" >
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID" />
                <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        </ClientSettings>
        <MasterTableView TableLayout="Fixed" />
    </telerik:RadGrid>

Thanks,
Princy

[Tracy]

Hi Princy,

Thanks for your response.  The difference between your scenario and mine is that I don't know specifically which columns are displayed or hidden.  I am using the context header menu to allow the user to show or hide the columns at their discretion, therefore any column could be hidden or displayed.
For example,
Assuming I have 5 columns in a grid and the user has chose to hide columns 2 and 3, when the grid is resized all 5 columns are being displayed.  I need a way to re-hide the columns the user had chosen to hide.

Thanks for your help.
Tracy

[Princy]

Hi Tracy,

Can you please provide your full code snippet so that I may replicate the issue.It's hard to identify what is causing such an issue,without the code.

Thanks,
Princy

[Tracy]

Hi Princy,

I figured out my problem,  I was assigning the wrong value to width of the grid.

Thanks for you help.
Tracy