Trying to Hide Columns Client Side

3 posts, 1 answers
  1. Chris
    Chris avatar
    23 posts
    Member since:
    Mar 2012

    Posted 02 Mar 2018 Link to this post

    I have a RadCheckBox on my page header:
         <telerik:RadCheckBox ID="rckMeasurables" Text="Show Measurables?" class="Sunset" OnClientCheckedChanged="check_changed" runat="server" />

    if the checkbox is checked it should show half a dozen columns on a RadGrid

            <telerik:RadCodeBlock ID="rcBlock" runat="server">
                <script type="text/javascript">
                    function check_changed()
                    {
                        var rckMeasurables = $find("<%= rckMeasurables.ClientID %>");
                        var theGrid = $find('<%= rgDraftProspects.ClientID %>');
                        var theView = theGrid.get_masterTableView();
                        var theColumns = theView.get_columns();
                        for (var i = 10; i < 18; i++)
                        {
                            // javascript to hide or show columns
                        }

                    }
                </script>
            </telerik:RadCodeBlock>

    theGrid is null!

    the Ajax Manager:

            <telerik:RadAjaxManager ID="raManager" runat="server" >
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rgDraftProspects">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgDraftProspects" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="rckMeasurables">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgDraftProspects" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

     

    help!  what am I missing?  the script finds the checkbox but the grid is null
                 

  2. Answer
    Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 06 Mar 2018 Link to this post

    Hello Chris,

    Your code looks fine. I incorporated it in an aspx page and wasn't able to find anything wrong. 

    Here is the solution:
    Default.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="_Default" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" />
            <telerik:RadAjaxManager ID="raManager" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rgDraftProspects">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgDraftProspects" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="rckMeasurables">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgDraftProspects" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
     
                    <telerik:RadCodeBlock ID="rcBlock" runat="server">
                <script type="text/javascript">
                    function check_changed()
                    {
                        var rckMeasurables = $find("<%= rckMeasurables.ClientID %>");
                        var theGrid = $find('<%= rgDraftProspects.ClientID %>');
                        var theView = theGrid.get_masterTableView();
                        theView.hideColumn(0); //check this method in https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridtableview-object/methods/hidecolumn
     
     
                        /*var theColumns = theView.get_columns();
                        for (var i = 10; i < 18; i++)
                        {
                            // javascript to hide or show columns
                            debugger;
                        }*/
     
                    }
                </script>
            </telerik:RadCodeBlock>
            <telerik:RadCheckBox ID="rckMeasurables" Text="Show Measurables?" class="Sunset" OnClientCheckedChanged="check_changed" runat="server" />
            <telerik:RadGrid ID="rgDraftProspects" runat="server"></telerik:RadGrid>
     
        </form>
    </body>
    </html>


    Default.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.Script.Serialization;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
     
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            rgDraftProspects.DataSource = GridDataSource();
            rgDraftProspects.DataBind();
        }
     
        protected DataTable GridDataSource()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Column 1", typeof(String));
            dt.Columns.Add("Column 2", typeof(String));
            dt.Columns.Add("Column 3", typeof(String));
     
            DataRow row = dt.NewRow();
            row[0] = "1";
            row[1] = "article name";
            row[2] = "article contents go here";
            dt.Rows.Add(row);
     
            return dt;
        }
    }



    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Chris
    Chris avatar
    23 posts
    Member since:
    Mar 2012

    Posted 07 Mar 2018 in reply to Rumen Link to this post

    it was fine!  I made 2 changes: moved the checkbox closer to the grid in the html and used the showColumns / hideColumns client functions - works fine now
Back to Top