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

Trying to Hide Columns Client Side

2 Answers 554 Views

CheckBox

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

Chris asked on 02 Mar 2018, 07:47 PM

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 Answers, 1 is accepted

Accepted

answered on 06 Mar 2018, 01:25 PM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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.