CODEWITHSUNDEEP
c#asp.netasp.net-mvc-3teleriktelerik-grid
meds
meds

Reputation: 22916

Choosing which column(s) to display in a telerik grid?

I have an MVC telerik grid which displays multiple columns. What I'd like to do is give users the option to mix and match which columns they get to see, for example if the grid can display 10 columns the interface could give the user 3 columns to see data, and they would have to choose what each of the 3 grids would display.

I'm thinking it has something to do with the .Columns command so would it be possible to make that modifiable by users through a GUI?

Upvotes: 0

Views: 3867

Answers (1)

carlbergenhem
carlbergenhem

Reputation: 1989

You have a couple of options when it comes to allowing the users to see a specific view of the data that your Grid is supposed to represent. While having a different Grid declaration for each user is one approach, the easiest would probably be to just show or hide the column of the same Grid.

This can be done out-of-the-box by utilizing the built-in column chooser that comes with the Grid component, as can be seen in this demo. Right-clicking on any of the headers provides the user with a simple interface to select what columns to display.

Alternatively you could take use of the hideColumn/showColumn client-side API calls, which can either take the field name that the column is bound to or the index as a parameter. A quick example (although it only hides the column you define):

<input type="text" id="columnHider"/>
<br />
<button type="button" id="columnButton">Click</button>

@model IEnumerable<Customer>

@(Html.Telerik().Grid(Model)
        .Name("TelerikGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.CustomerID);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.ContactName);
            columns.Bound(c => c.Address);
            columns.Bound(c => c.City);
        })
        .Pageable(pageSettings => pageSettings.Enabled(true).PageSize(10))
        .ColumnContextMenu()
)

<script type="text/javascript">
    $(document).ready(function () {
        $("#columnButton").click(function () {
            var grid = $("#TelerikGrid").data("tGrid");
            var columnString = $("#columnHider").val();
            grid.hideColumn(columnString);
        });
    });
</script>

This allows you to define your own interface for hiding/showing columns.

Upvotes: 3

Related Questions