Update kendo grid columns dynamically in ASP MVC

[Avinash]

I have a kendo grid where user can select list of columns from grid and save the selection by giving name (i.e view name). Each saved selection (view name) will show up as drop-down above grid so that user can change grid columns whenever they want. In current implementation, whenever user selects view name from one drop-down value to other, im calling action method to select that view name as current view name. Then page reloads to invoke Index' action method to retrieve current view names columns values. I am using visible attribute in grid to show and hide columns in grid.
Now i was wondering if i can update the grid columns without reloading the page when user change the view name from the dropdown. I know kendo has ColumnMenu which helps to choose and hide columns without reloading the page, however i couldn't figure out a way to save/reload user selection done in Columns section. 

It would be nice if the user could hide/show columns using 'ColumnMenu' and also be able to save the state in view  name and show the view name in the dropdown. I saw this example http://demos.telerik.com/kendo-ui/grid/persist-state to persist the state of the grid however as there is limitation with not being able to save toolbar information, i couldn't use this solution.

Any suggestion how i can resolve this issue?

ViewModel:

namespace MvcApplicatioin.Models
{
    public class EmployeeViewModel
    {
        public EmployeeColumns EmployeeColumns               { get; set; }
        public IEnumerable<SelectListItem> EmployeeViewNames { get; set; }
        public long EmployeeSelectedViewId                   { get; set; }
    }

    public class EmployeeResponse
    {
        public int Id           { get; set; }
        public string FirstName { get; set; }
        public string LastName  { get; set; }
    }

    public class EmployeeColumns
    {
        public bool Id        { get; set; }
        public bool FirstName { get; set; }
        public bool LastName  { get; set; }
    }
}

Controller:

public class EmployeeController : Controller
{
        // GET: Employee
        public ActionResult Index()
        {
            var service = new EmployeeService();
            EmployeeViewModel model = new EmployeeViewModel();
            long currentViewId;

            //setup views and column preferences
            EmployeeColumns employeeColumns = service.GetCurrentEmployeeColumnsPreferences();
            model.EmployeeColumns = employeeColumns;
            model.EmployeeViewNames = service.GetAllEmployeeViewNames(out currentViewId);
            model.EmployeeSelectedViewId = currentViewId;

            return View(model);
        }
 }

View:

@using Kendo.Mvc.UI

@{
    ViewBag.Title = "Employee Info:";
}

<h3 style="margin-bottom: 10px;">Employee Info</h3>

<input id="btnSearch" type="button" value="Search" class="btn_Search" />

<div class="row">
    <div class="col-sm-12">
        @(Html.Kendo().Grid<MvcApplicatioin.Models.EmployeeResponse>()
            .Name("GridEmployee")
            .Columns(columns =>
            {
                columns.Bound(e => e.Id).Width("170px").Visible(Model.EmployeeColumns.Id);
                columns.Bound(e => e.FirstName).Width("190px").Visible(Model.EmployeeColumns.FirstName);
                columns.Bound(e => e.LastName).Width("170px").Visible(Model.EmployeeColumns.LastName);
            })
            .ToolBar(tools =>
            {
                tools.Template(@<text>
                    <div class="col-lg-4 col-md-5 col-sm-5 col-xs-7 pull-right" style="padding-right: 0;">
                        <div class="form-group" style="margin-bottom: 0;">
                            @Html.Label("Grid View:", new { @class = "col-sm-3 col-xs-4 control-label view" })
                            <div class="col-sm-7 col-xs-6" style="padding-left: 0;">
                                @Html.DropDownList("lstEmployeeViewNames", new SelectList(Model.EmployeeViewNames, "Value", "Text", Model.EmployeeSelectedViewId), "- Select View Name -", new { @class = "form-control", @style = "height: auto;" })
                            </div>
                        </div>
                    </div>
                </text>);
            })
            .Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }).ButtonCount(4))
            .AutoBind(false)
            .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .ServerOperation(false)
                        .Read(read => read.Action("SearchEmployee", "Employee")))
        )
    </div>
</div><!--//row-->

<script type="text/javascript">
    $('#btnSearch').click(function (e) {
        e.preventDefault(); //This prevent the submit button onclick from submitting by itself

        $('#GridEmployee').data('kendoGrid').dataSource.read();
    });

    //Change event for Dropdown placed inside the Grid's Toolbar - To Change the view
    $("#lstEmployeeViewNames").change(function (e) {
        var selectedViewId = $('select#lstEmployeeViewNames option:selected').val();

        if (selectedViewId == null || selectedViewId == '') {
            alert("Please select the view name from the dropdown first !!");
            return;
        }

        $.post("/Employee/SetEmployeeColumnsCurrentPreferences", { viewId: selectedViewId }, function (data) {
            window.top.location.reload();
        });
    });
</script>

 

 

[Avinash]

Another attachment missed in original post.

[Vasil]

Hi Avinash,

If you want avoid reloading, then you could show or hide columns using the ShowColumn and HideColumn JavaScript methods. Initially all columns should be visible, then you can hide those which should not be visible depending on the values in your dropdown.

Regards,
Vasil
Telerik

[Avinash]

Vasil,

I did tried ShowColumn/Hidecolumn but the performance is really bad when there are more # of columns. I have about 50 columns and i can easily see delay while showing/hiding columns. Also after hiding the columns, the column doesn't realign in the grid even after using refresh method of the grid.

Thanks.

 

[Vasil]

Hello Avinash,

50 columns should not cause performance issue unless there are thousands of rows. The alignment problem could be cause by JavaScript error in your page, that prevents some scripts for executing. Could you try to replicate the issue in our dojo and share it with us for further debugging.

Regards,
Vasil
Telerik

[Avinash]

Vasil,


I am using showcolumn/hidecolumn functions. Do you know why columns get shrinked after running hideColumn and using showColumn. In Default View.jpg the column extends to use all width of grid. However in 'After Hidecolumn.jpg' you can see the column don't extend to use all the width of grid.


Any way to fix this?


Thanks.

[Vasil]

Hello Avinash,

It looks as your columns have fixed width in pixels. So they stay the same width and empty spaces occurs after the last.
If you set width for all columns in percents, then when you hide some of them, the rest will take up the whole remaining space.
For example:

{ field: "FirstName", width: "33%",},
{ field: "LastName", width: "33%" },
{ field: "City", width: "34%" }

Then if you hide City column, the 2 columns will take the whole space as if they had 50% width.

Regards,
Vasil
Telerik

[Avinash]

Vasil,

I have about 33 columns and i gave 3% for each columns. It worked when there were only few columns. See 'Few Columns' image in attachment. However it didn't look good when i had all columns. See 'All Columns' image in attachment.

Any suggestion?

Thanks.

[Avinash]

Vasil,

I have about 33 columns and i gave 3% for each columns. It worked when there were only few columns. See 'Few Columns' image in attachment. However it didn't look good when i had all columns. See 'All Columns' image in attachment.

Any suggestion?

Thanks.

[Vasil]

Hi Avinash,

In case you have many columns and you need the horizontal scroll, you should set their width in pixels as you did in the first example. However they will stay the same if some are hided. And in case the width of visible columns is smaller than the width of the grid, you will still see space after the last column.

There is no universal way to resolve this. Either the columns have fixed with or they are taking the whole width.

Regards,
Vasil
Telerik