This is a migrated thread and some comments may be shown as answers.

Kendo Grid - Creating personalized view of records

8 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 15 May 2013, 08:21 AM
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?

8 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 17 May 2013, 06:52 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 17 May 2013, 07:22 AM
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?
0
Vladimir Iliev
Telerik team
answered on 21 May 2013, 08:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 29 May 2013, 11:02 AM
We implemented sort, filter and visibility. However,  "Column ReOrdering" is still pending. How can we reload grid columns display order based on cookie settings?
0
Matt
Top achievements
Rank 1
answered on 29 May 2013, 11:05 AM
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?
0
Vladimir Iliev
Telerik team
answered on 30 May 2013, 12:12 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
n/a
Top achievements
Rank 1
answered on 17 Jul 2019, 08:31 PM
Guys, is there a better way (now that it's 2019) to serialize the grid view based on the users layouts?
0
Alex Hajigeorgieva
Telerik team
answered on 19 Jul 2019, 02:36 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Matt
Top achievements
Rank 1
n/a
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or