Display Column Selector Client Side

[John]

I'm curious if it's possible to display the column selector menu via Javascript? I'd like to add button that a user can click and select the column's he wants to view, without me having to explain that he shoudl right-click on the header, and select the columns menu.

Is this possible?

Thanks
John

[Richard]

John:

Perhaps you should consider a different approach that uses a multi-select RadComboBox or DropList to allow users to select column names, and then, on the click event of a button, set the columns visibility.

Take a look at the Grid/Grid Filtered by Combo online demo. You could populate the combo box with a list of all columns and make it multi-select.

I'd suggest also referencing the Grid/Grid Cell Selection online demo for assistance with this. You can modify the JavaScript associated with the Select/Deselect column buttons at top right in order to set each column's "Visible" property to "True" or "False".
 
Finally, you can reference the Grid/Column/Row Resize/Reorder online demo which populates two drop down lists of available columns and then uses a button click event to reorder them.

Hope this helps!

[John]

I can see how to do it, just load all the columns, tick the visible one etc. One question, can this (
show/hide of columns) be done via client side javascript?

[Richard]

John:

You can reference this forum thread that contains a sample project, provided by Telerik admin, that demonstrates hiding a column using JavaScript: Client-Side Column Hiding & Data-binding

Here's the relevant code:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

    <script type="text/javascript">
    <!--

        function hideColumn()
        {
            $find('<%=RadGrid1.ClientID %>').get_masterTableView().hideColumn(3);
        }
    -->
    </script>

</telerik:RadCodeBlock>

<!-- content start -->
<input type="button" value="Hide third column!" onclick="hideColumn()" />

[John]

Managed to get it to work using your suggestion. Loaded the columns into a RadListbox (during ColumnCreated event), then on client side I hide / show using JavaScript. Worked like a charm.

Thanks for your help
John

[Richard]

John:

Glad you were able to accomplish your requirement. If you have a moment, you should post the basics of your solution with code snippets to help others.

Cheers!

[John]

Ok, here's how did it.

I've placed the RadListbox in a RadToolTip so that the column selection doesn't ruin the main page flow. The tooltip will only be shown once the link/button is clicked.

<telerik:RadToolTip runat="server" ID="tipColumnHolder"

               EnableShadow="true"

               Position="BottomCenter"

               RelativeTo="Element"

               ShowEvent="OnClick"

               Sticky="true"

               TargetControlID="TriggerLinkOrButtonControlsID"

               ShowCallout="true" >

 

                   <telerik:RadListBox

                       ID="lstColumns"

                       OnClientItemChecked="showHideColumn"

                       runat="server"

                       CheckBoxes="true"

                       EmptyMessage="No Columns"

                       EnableMarkMatches="false"

                       AllowReorder="false"

                       >

                       <HeaderTemplate>

                           <div class="ExportColumnHeader">Select Columns</div>

                       </HeaderTemplate>

                   </telerik:RadListBox>

           </telerik:RadToolTip>

Then I load the columns during the RadGrid's ColumnCreated event.

Private Sub gridMain_ColumnCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles gridMain.ColumnCreated
        If Not Me.IsPostBack And TypeOf (e.Column) Is GridBoundColumn Then
            Dim ColItem As New RadListBoxItem()
            ColItem.Value = e.Column.UniqueName
            ColItem.Text = " " & e.Column.UniqueName
            Me.lstColumns.Items.Add(ColItem)
        End If
End Sub
Then finally the javascript that gets it all to work.

<script type="text/javascript">
        function showHideColumn(sender, eventArgs) {

            var item = eventArgs.get_item();
            var name = item.get_value();

            var radGrid = $find('<%=Me.gridMain.ClientID%>');
            var table = radGrid.get_masterTableView();
            var column = table.getColumnByUniqueName(name.trim());
            var index = column.get_element().cellIndex

            if (!item.get_checked())
                table.hideColumn(index);
            else
                table.showColumn(index);

        }
    </script>

That's it. The reason I'm loading columns in the ColumnCreated event is because 
I'm using auto generated columns and so I won't know the columns until the grid itself
is loading.

Hope this helps some weary traveller some day.

John

[Andres]

Thanks a lot, John.
This is exactly what i was looking for.

Also, if you want that your functionality coexists with grid's HeaderContextMenu, you need to check columns visibiity before show tooltip.
<telerik:RadToolTip OnClientBeforeShow="loadColumnsVisibility" />

 function loadColumnsVisibility(sender, eventArgs) {
        var radList = $find('<%=lstColumns.ClientID %>');
        var radGrid = $find('<%=RadGrid1.ClientID %>');
        var table = radGrid.get_masterTableView();
        for (var i = 0; i < radList.get_items().get_count(); i++) {
            var item = radList.getItem(i);
            var column = table.getColumnByUniqueName(item.get_value());
            item.set_checked(column.get_visible())
        }
    }