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

Column visibility selection

7 Answers 115 Views
Grid
This is a migrated thread and some comments may be shown as answers.
cprieto
Top achievements
Rank 1
cprieto asked on 25 Jul 2008, 07:43 AM
Hello,

I've been looking a simple way of obtain something similar to this http://www.extjs.com/deploy/dev/examples/grid/array-grid.html and get a column menu to select which columns to display and the column ordering.

Will Telerik WebGrid support this in the next future? is any way to implement it in a simple way with the actual webgrid control?

Thanks a lot for your answer!

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 25 Jul 2008, 10:03 AM
Hi Kementeus,

One work arround will be to show the ContextMenu on clicking the ColumnHeader. Add one CheckBoxList in the ContextMenu and populate it with the column name. Hide the columns from client side on clicking the CheckBox.

Thanks
Shinu
0
cprieto
Top achievements
Rank 1
answered on 25 Jul 2008, 04:24 PM
Does somebody knows if this feature would be available "in the box" in the near future? someplace where could I post it as a feature wishlist?
0
Accepted
Sebastian
Telerik team
answered on 28 Jul 2008, 06:07 AM
Hello kementeus,

We will definitely consider exposing context menu on a per-column basis for the upcoming version of RadGrid for ASP.NET AJAX. At this point you may consider implementing such functionality using RadContextMenu explicitly as demonstrated in the project from this code library thread:

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

I updated your Telerik points for the valuable feedback.

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Siddharth
Top achievements
Rank 1
answered on 07 Oct 2008, 05:59 AM
The Visibility of column made visible from client side is not displayed once there is a post back like column sorting.

Any suggestions on this would be appreciated.
0
Sebastian
Telerik team
answered on 07 Oct 2008, 07:08 AM
Hi Siddharth,

Can you replicate the abnormality in the project from the code library thread I linked? I tried to reproduce the erroneous behavior but unfortunately to no avail. Also verify that you are using the latest release 2008.2.1001 of RadControls for ASP.NET AJAX in your project.

Regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Siddharth
Top achievements
Rank 1
answered on 07 Oct 2008, 07:12 AM
Hi,

Can you use the code below to replicate this scenario

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;
    }

}
0
Pavel
Telerik team
answered on 09 Oct 2008, 06:42 AM
Hello Siddharth,

I have responded to your inquiry in the other thread you have opened on the same subject here:
http://www.telerik.com/community/forums/thread/b311D-bgkmmg.aspx

Kind regards,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
cprieto
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
cprieto
Top achievements
Rank 1
Sebastian
Telerik team
Siddharth
Top achievements
Rank 1
Pavel
Telerik team
Share this question
or