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

Column visibility selection

3 Answers 425 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Siddharth
Top achievements
Rank 1
Siddharth asked on 06 Oct 2008, 07:22 AM
Hi,

Referring to sample from thread

http://www.telerik.com/community/code-library/submission/b311D-tkhat.aspx

1. Can i have Checked symbol or check box on the columns that are selected?

2. Instead of Showing column by index can i show column by UniqueName of Column as i have reorder Columns as true in grid.

3. Can i have some columns as hidden initially and if user wants them then he can select the column to show them?

Can you please post an updated example for the same. This is little urgent.

Thanking you in Advance.

3 Answers, 1 is accepted

Sort by
0
Siddharth
Top achievements
Rank 1
answered on 06 Oct 2008, 09:12 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.

Thanks in advance.
0
Siddharth
Top achievements
Rank 1
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.
0
Pavel
Telerik team
answered on 09 Oct 2008, 06:38 AM
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.
Tags
Grid
Asked by
Siddharth
Top achievements
Rank 1
Answers by
Siddharth
Top achievements
Rank 1
Pavel
Telerik team
Share this question
or