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

Column visibility selection

3 Answers 498 Views

Grid

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

3 Answers, 1 is accepted

answered on 06 Oct 2008, 09:12 AM

answered on 06 Oct 2008, 09:16 AM

Hi,

I was able to achieve point 2 and 3 and i am attaching sample for the same.
I am facing two problems in attached sample.

1. When a hidden column is made visible for first time then footer is not of correct size.
Steps to reproduce using Sample:
a. Run Application
b. Right Click on header and click Show Columns -> Subject.
c. Footer width is not 100%

2. When two columns are made visible and then sorted the columns dont get displayed.
Steps to reproduce using Sample:
a. Run Application
b. Right Click on header and click Show Columns -> Subject.
c. Right Click on Subject header and click hide Column
d. Right Click on Score header and click hide Column
e. Right Click on header and click Show Columns -> Subject.
f. Right Click on header and click Show Columns -> Score
g. try to sort on Subject column then only column which was not hidden previously is seen.

Can you please look into this issue ASAP.

Aspx PAge:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridSample.aspx.cs" Inherits="GridSample" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:radcodeblock id="RadCodeBlock1" runat="server">

        <script type="text/javascript">
                 var activeTable;
                 var colIndex;

                 function ColumnContextMenu(sender, eventArgs)
                 {
                    activeTable = sender.get_masterTableView();
                    colIndex = GetRealCellIndex(sender.get_masterTableView(), eventArgs.get_gridColumn().get_element());
                 }
                 function GetRealCellIndex(tableView, cell)
                 {
                     for(var i = 0; i < tableView.get_columns().length; i++)
                     {
                         if(tableView.get_columns()[i].get_element()== cell)
                         {
                             return i;
                         }
                     }
                 }
                 ///
                 function GetCellIndex(uniqueName)
                 {
                     for(var i = 0; i < activeTable.get_columns().length; i++)
                     {
                         if(activeTable.get_columns()[i].get_uniqueName()== uniqueName)
                         {
                             return i;
                         }
                     }
                 }
                 ///
                 function ClientItemClicked(sender, eventArgs)
                 {
                    switch(eventArgs.get_item().get_text())
                    {
                        case "Subject":
                           activeTable.showColumn(GetCellIndex("Subject1"));
                           //activeTable.getColumnByUniqueName("Subject1").set_visible(true);
                          break;
                        case "Roll Number":
                          activeTable.showColumn(1);
                          break;
                        case "Score":
                           activeTable.showColumn(2);
                          break;
                        case "Showl All Columns":
                           RestoreColumns();
                          break;
                        case "Hide column":
                          activeTable.hideColumn(colIndex);
                          break;
                        default:
                         break;
                    }

                 }
                 function RestoreColumns()
                 {
                    var grid = $find("<%=RadGrid1.ClientID %>");

                    for(i = 0; i < grid.get_masterTableView().get_columns().length; i++)
                    {
                      grid.get_masterTableView().showColumn(i);
                    }
                 }
        </script> </telerik:radcodeblock>
    <div>
    </div>
    <telerik:radgrid id="RadGrid1" runat="server" autogeneratecolumns="False" gridlines="None"
        allowfilteringbycolumn="True" allowpaging="True" allowsorting="True" onneeddatasource="RadGrid1_NeedDataSource">
        <MasterTableView AllowFilteringByColumn="true">
            <RowIndicatorColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn DataField="Subject1" HeaderText="Subject" SortExpression="Subject1"
                    UniqueName="Subject1" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="false" Display="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="RollNumber" HeaderText="Roll Number" SortExpression="RollNumber"
                    UniqueName="RollNumber" CurrentFilterFunction="GreaterThan" AutoPostBackOnFilter="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Score" HeaderText="Score" SortExpression="Score"
                    UniqueName="Score" CurrentFilterFunction="EqualTo" AutoPostBackOnFilter="false">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
            <Resizing AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True" />
            <ClientEvents OnColumnContextMenu="ColumnContextMenu" />
        </ClientSettings>
    </telerik:radgrid>
    <telerik:radcontextmenu id="RadMenu1" runat="server" skin="Outlook" onclientitemclicked="ClientItemClicked">
        <Items>
            <telerik:RadMenuItem Text="Show column">
                <Items>
                    <telerik:RadMenuItem Text="Subject" />
                    <telerik:RadMenuItem Text="Roll Number" />
                    <telerik:RadMenuItem Text="Score" />
                    <telerik:RadMenuItem Text="Showl All Columns" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Hide column" />
        </Items>
        <Targets>
            <telerik:ContextMenuTagNameTarget TagName="thead" />
        </Targets>
    </telerik:radcontextmenu>
    </form>
</body>
</html>

Code Behind:
using System;

public partial class GridSample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    private void BindData()
    {

        //RadGrid1.DataBind();
    }

    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        Marks m = new Marks(1, "sad", 221);
        RadGrid1.DataSource = m.GetMarks();
    }
}

Marks Class:

using System.Collections.Generic;

/// <summary>
/// Summary description for Marks
/// </summary>
public class Marks
{
    private int rollNumber;

    public int RollNumber
    {
        get { return rollNumber; }
        set { rollNumber = value; }
    }
    private string Subject;

    public string Subject1
    {
        get { return Subject; }
        set { Subject = value; }
    }
    private int score;

    public int Score
    {
        get { return score; }
        set { score = value; }
    }

    public Marks(int rNo, string Sub, int sc)
    {
        rollNumber = rNo;
        Subject = Sub;
        score = sc;
    }

    public List<Marks> GetMarks()
    {
        List<Marks> lstMarks = new List<Marks>();
        for (int i = 1; i < 100; i++)
        {
            for (int j = 1; j < 4; j++)
            {
                lstMarks.Add(new Marks(i, "Subject " + i.ToString(), i * j));
            }
        }
        return lstMarks;
    }

}

Thanks in advance.

answered on 09 Oct 2008, 06:38 AM

ShowHideRadGridColumnsWithRadMenuAsContextMenu_Web_UI.zip

Hello Siddharth,

I have updated the sample to address the first problem and included a custom build of the controls which resolves the hiding of the columns after postback. Give it a try and let us know if you need further assistance.

Regards,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.