Kendo Grid - Creating personalized view of records

[Matt]

We are thinking to use Kendo grid to allow end users creating personalized view of dashboard wherein we have 20 different columns pertaining to order e.g. OrderTitle, OrderDescription, OrderAmount, DateCreated, DateAuthorized and so on. We have created database view to feed data to KendoDatasource. 
  
WE plan to develop Admin screen that allows and saving to DB(MyViewSettings)
1. choose what columns they want to see on their report(ColumnVisibility checkbox in kendo grid)
2. specify filter criteria(FilterMenu in Kendo grid)
3. specify Group by columns(GroupByHeader in Kendo grid)

How do we save Kendo grid settings when user hits - Save View and load grid based on above settings when they view grid.

Can you provide suitable sample that demonstrates how we can achieve this?

[Vladimir Iliev]

Hi Matt,

 
Persisting current Grid setting is not supported out-of-the-box and it will require custom code. There are several ways to do that and which one you would choose depends entirely on you and on the exact setup that you have. For example you can use the grid and it's dataSource client-side API to get the current grid settings and save/load them from the dataBase. For convenience I created small jsBin example of saving current Grid settings to a cookie which you can use as a baseline to achieve the desired behavior. 

Kind Regards,
Vladimir Iliev
the Telerik team

[Matt]

Thanks for the sample.

Since we have sensitive financial figures visible to only certain individuals, current setup is to use CSHTML approach(Hide that column from server side). We are using DataSourceRequest for server side sorting, paging and filtering.

 Is there any way we put our own custom button "Save View", implement SaveViewAction in Controller, interrogate GridSettings on server side and Examining C# equivalent of Datasource to determine sort, filter, group and pagesize?

[Vladimir Iliev]

Hi Matt,

 
Basically you can include such custom command which to get current sort, filter, page and hidden columns settings using the grid and it's dataSource API and send them to the controller action where they will be saved to the DB. Then when the page with the grid is requested you can pass the settings to the View and apply them to the grid configuration before it's sent to the client side. 

• Save settings (example for saving hidden columns):

  <button onclick="saveSettings()">SaveSettings</button>
  
  <script>
      function saveSettings(e) {
          var grid = $("#Grid").data("kendoGrid");
          var dataSource = grid.dataSource;
  
          $.ajax({
              url: "/Home/UpdateGridSettngs",
              data: {
                  //get the current hidden columns and send them to the server
  
                  //example
                  //sorts = dataSource.sort(),
                  //filters =  dataSource.filter(), ...
                  HiddenColumns: ["OrderDescription", "OrderDate"]
              }
          })
      }
  </script>

• Accept the settings on the controller and save them to the DB:

  public ActionResult UpdateGridSettngs(List<string> hiddenColumns)
  {
  
      GridSettings newSettings = new GridSettings() {
          HiddenColumns = hiddenColumns
      };
  
      GridSettingsRepository.UpdateSettings(newSettings);
  
      return Json("", JsonRequestBehavior.AllowGet);
  }

    
• When the Grid page is requested get the settings from the DB and pass them to the View:

  public ActionResult Index()
  {
      var gridSettings = GridSettingsRepository.GetSettings();
  
      return View(gridSettings);
  }

• Hide columns in the Grid based on the ViewModel:    

  @model ForeignKeyColumnDemo.Models.GridSettings
  
  @(Html.Kendo().Grid<ForeignKeyColumnDemo.Models.Order>()
      .Name("Grid")
      .Columns(columns => {
          columns.Bound(p => p.OrderID);
  
          //hide column based on settings from the ViewModel
          if (Model.HiddenColumns == null || !Model.HiddenColumns.Contains("OrderDescription"))
          {
              columns.Bound(p => p.OrderDescription);
          }
  
          //hide column based on settings from the ViewModel
          if (Model.HiddenColumns == null || !Model.HiddenColumns.Contains("OrderDate"))
          {
              columns.Bound(p => p.OrderDate).Format("{0:d}");
          }

         

Kind regards,
Vladimir Iliev
the Telerik team

[Matt]

We implemented sort, filter and visibility. However,  "Column ReOrdering" is still pending. How can we reload grid columns display order based on cookie settings?

[Matt]

Can you extend your sample to show how we can reload grid columns in an order saved as part of settings using Kendo Column ReOrdering feature?

[Vladimir Iliev]

Hi Matt,

 
As I mention in my previous replies this functionality is not supported out-of-the-box and it will require custom solution, however I already provided such example which you can use as a baseline to achieve the desired behavior. 

Kind Regards,
Vladimir Iliev
Telerik

[n/a]

Guys, is there a better way (now that it's 2019) to serialize the grid view based on the users layouts?

[Alex Hajigeorgieva]

Hi, Oliver,

We have a demo that demonstrates using the local storage here:

https://demos.telerik.com/kendo-ui/grid/persist-state

Have a look and let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik