Display Column Selector Client Side

8 posts, 1 answers
  1. John
    John avatar
    10 posts
    Member since:
    Jan 2012

    Posted 19 Apr 2012 Link to this post

    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
  2. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 23 Apr 2012 Link to this post

    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!
  3. John
    John avatar
    10 posts
    Member since:
    Jan 2012

    Posted 24 Apr 2012 Link to this post

    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?
  4. Answer
    Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 24 Apr 2012 Link to this post

    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()" />
  5. John
    John avatar
    10 posts
    Member since:
    Jan 2012

    Posted 25 Apr 2012 Link to this post

    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
  6. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 25 Apr 2012 Link to this post

    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!
  7. John
    John avatar
    10 posts
    Member since:
    Jan 2012

    Posted 25 Apr 2012 Link to this post

    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
  8. Andres
    Andres avatar
    7 posts
    Member since:
    Dec 2016

    Posted 26 Feb 2018 Link to this post

    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())
            }
        }
Back to Top