Skip to main content

Storing and restoring Kendo Grid state from Database

There is no any built in way to store entire grid state into database and restore back again with all filters, groups, aggregates, page and page size.

At first, I was trying to restore only filters by looking through DataSourceRequest. DataSourceRequest is kind of communication medium between client and server for the operation we do on grid. All the request comes via DataSourceRequest. In previous approach, I was trying to store IFileDescriptor interface which come with class FileDescriptor by looping through filters and serializing into string for saving into database but this IFileDescriptor can also contain CompositeFilterDescriptor which can be nested in nested object which are very tricky to handle.

So, I had decompiled entire Kendo.MVC library and found out that all Kendo MVC controls are derived from “JsonObject”. It is there own implementation with ”Serialize” abstract function and “ToJson” function. In controls they are overriding “Serialize” method which depicts the object found on JavaScript for Kendo control. The “ToJson” function is returning “IDictionary<string,object>”. This is all we need. We can transform “IDictionary<string,object>” from “ToJson” and store into database and on initialization of grid on client side we can put these values directly on Kendo Grid.

Please note that serialization/direct storing could have been done directly on JavaScript level but there is no event associated to filters and might be same with other as well.

Let's start by defining Kendo MVC Grid control but we will not populate grid data right away while rendering. We got to initialize settings first (grid state from DB) and then populate data and restore grid state through “DataSource”. To stop grid data population Kendo MVC helper has “AutoBind()” function which can be set as “AutoBind(false)” .
Here is the entire grid sample:

 @(Html.Kendo().Grid<ViewModel>()  
 .Name("GridSample")  
 .Columns(columns =>  
 {  
      columns.Bound(vm => vm.LastName);  
      columns.Bound( vm => vm.FirstName);  
      columns.Bound( vm => vm.MiddleName);  
      columns.Bound( vm => vm.Id).Title("Id #");  
 })  
 .AutoBind(false)  
 .DataSource(datasource => datasource  
      .Ajax()  
      .Read(read => read.Action("GetAllData", "SampleGrid", new { area = "" })  
                     )  
      .PageSize(20)  
 )  
 .Reorderable(reorder => reorder.Columns(true))  
 .Pageable()  
 .Filterable()  
 .Sortable()  
 .ColumnMenu()  
 .Scrollable()  
 .Selectable(selectable => selectable.Mode(GridSelectionMode.Single)))  
 // JavaScript call  
 <script type=”text/javascript”>  
 RestoreGridSetting("GridSample")  
 </script>

After setting up grid we need to initialize grid with data stored into DB through JavaScript.

 function RestoreGridSetting (gridId) {  
      if (gridId === undefined || gridId === null) {  
           return;  
      }  
      // Select row  
      var grid = $('#' + gridId).data('kendoGrid');  
      if (grid === undefined) {  
           return;  
      }  
      // Initialize columns  
      $.get('/api/userprofilegrid/' + gridId.toLowerCase(), function (data) {  
           if (data === undefined || data === null) {  
                return;  
           }  
           // Set values from result of WebAPI call  
           grid.dataSource.filter(JSON.parse(data.Filters));  
           grid.dataSource.sort(JSON.parse(data.Sorts));  
           grid.dataSource.group(JSON.parse(data.Groups));  
           grid.dataSource.aggregate(JSON.parse(data.Aggregates));  
      });  
 }

If the first request comes it will get information from WebApi and restore on grid via grid's datasource.
Now, let's look into action request which will be called from Grid control.

 .Read(read => read.Action("GetAllData", "SampleGrid", new { area = "" })

Everything will remain as it is (DataSourceRequest) just that we need to save data into database which would be resulted by WebAPI call from JavaScript. So, here is server side code for GetAllData.

 var gridDetail = // TODO: Get object from DB;  
 if (gridDetail == null)  
 {  
      return;  
 }  
 gridDetail.Aggregates = JsonConvert.SerializeObject(request.Aggregates.OfType<JsonObject>().ToJson());  
 gridDetail.Filters = JsonConvert.SerializeObject(request.Filters.OfType<JsonObject>().ToJson());  
 gridDetail.Groups = JsonConvert.SerializeObject(request.Groups.OfType<JsonObject>().ToJson());  
 gridDetail.PageSize = request.PageSize;  
 gridDetail.Sorts = JsonConvert.SerializeObject(request.Sorts.OfType<JsonObject>().ToJson());  
 //gridDetail.PageLocation = request.Page;  
 // TODO: Save object

The above function is using Newtonsoft.JSON library to parse data from “IDictionary<string,object>” which is generated form “ToJson” call.

To summarize all of them as steps
1. Create grid control by setting “Autobind” as false.
2. Through AJAX call get grid state model and set the value into grid's datasource.
3. On server side grid's action to retrieve data, save DataSourceRequest properties with the help of “ToJson” and "JsonCovert".


NOTE: In this article, I have not covered restoring hidden columns and column grid position. There are plenty of resource that can be followed to achieve it.
Labels:

Comments

Post a Comment

Popular posts from this blog

Handling JSON DateTime format on Asp.Net Core

This is a very simple trick to handle JSON date format on AspNet Core by global settings. This can be applicable for the older version as well. In a newer version by default, .Net depends upon Newtonsoft to process any JSON data. Newtonsoft depends upon Newtonsoft.Json.Converters.IsoDateTimeConverter class for processing date which in turns adds timezone for JSON data format. There is a global setting available for same that can be adjusted according to requirement. So, for example, we want to set default formatting to US format, we just need this code. services.AddMvc() .AddJsonOptions(options => { options.SerializerSettings.DateTimeZoneHandling = "MM/dd/yyyy HH:mm:ss"; });
1 comment
Read more

Elegantly dealing with TimeZones in MVC Core / WebApi

In any new application handling TimeZone/DateTime is mostly least priority and generally, if someone is concerned then it would be handled by using DateTime.UtcNow on codes while creating current dates and converting incoming Date to UTC to save on servers. Basically, the process is followed by saving DateTime to UTC format in a database and keep converting data to native format based on user region or single region in the application's presentation layer. The above is tedious work and have to be followed religiously. If any developer misses out the manual conversion, then that area of code/view would not work. With newer frameworks, there are flexible ways to deal/intercept incoming or outgoing calls to simplify conversion of TimeZones. These are steps/process to achieve it. 1. Central code for storing user's state about TimeZone. Also, central code for conversion logic based on TimeZones. 2. Dependency injection for the above class to ...
4 comments
Read more

A wrapper implementation for Kendo Grid usage

A wrapper implementation for any heavily used item is always a good practice. Whatever is not written by us and used at a lot of places should be wrapped within specific functionality to keep it future proof and easily changeable. This also encourages DRY principle to keep our common setting at a central place. Kendo UI items are enormous in configuration, one of an issue I find people keep repeating codes for Kendo Grid configuration. They have built very flexible system to have any configuration, but in most of the cases, we do not need all of those complicated configuration. We would try to see a simpler configuration of same. The actual core implementation is bit complex, but we do not have to bother about it once done since the focus is just on usage only. I recommend doing this practice for as simple as jQuery events, form handling or as simple as any notification system. This just won't make things simple but makes codes much more manageable, easy understand, read or open f...
Post a Comment
Read more

Global exception handling and custom logging in AspNet Core with MongoDB

In this, we would be looking into logging and global exception handling in the AspNet Core application with proper registration of logger and global exception handling. Custom logging The first step is to create a data model that we want to save into DB. Error log Data model These are few properties to do logging which could be extended or reduced based on need. public class ErrorLog { /// <summary> /// Gets or sets the Error log identifier. /// </summary> /// <value> /// The Error log identifier. /// </value> [BsonRepresentation(BsonType.ObjectId)] public ObjectId Id { get; set; /// <summary> /// Gets or sets the date. /// </summary> /// <value> /// The date. /// </value> public DateTime Date { get; set; } /// <summary> /// Gets or sets the thread. /// </summary> ...
1 comment
Read more

Making FluentValidation compatible with Swagger including Enum or fixed List support

FluentValidation is not directly compatible with Swagger API to validate models. But they do provide an interface through which we can compose Swagger validation manually. That means we look under FluentValidation validators and compose Swagger validator properties to make it compatible. More of all mapping by reading information from FluentValidation and setting it to Swagger Model Schema. These can be done on any custom validation from FluentValidation too just that proper schema property has to be available from Swagger. Custom validation from Enum/List values on FluentValidation using FluentValidation.Validators; using System.Collections.Generic; using System.Linq; using static System.String; /// <summary> /// Validator as per list of items. /// </summary> /// <seealso cref="PropertyValidator" /> public class FixedListValidator : PropertyValidator { /// <summary> /// Gets the valid items /// <...
1 comment
Read more

Using Redis distributed cache in dotnet core with helper extension methods

Redis cache is out process cache provider for a distributed environment. It is popular in Azure Cloud solution, but it also has a standalone application to operate upon in case of small enterprises application. How to install Redis Cache on a local machine? Redis can be used as a local cache server too on our local machines. At first install, Chocolatey https://chocolatey.org/ , to make installation of Redis easy. Also, the version under Chocolatey supports more commands and compatible with Official Cache package from Microsoft. After Chocolatey installation hit choco install redis-64 . Once the installation is done, we can start the server by running redis-server . Distributed Cache package and registration dotnet core provides IDistributedCache interface which can be overrided with our own implementation. That is one of the beauties of dotnet core, having DI implementation at heart of framework. There is already nuget package available to override IDistributedCache i...
3 comments
Read more

Channel, ChannelReader and ChannelWriter to manage data streams in multi-threading environment

I came across Channel class while working with SignalR which looks really interesting. By looking into NuGet packages ( https://www.nuget.org/packages/System.Threading.Channels ), it seems just 4 months old. The Channel class provides infrastructure to have multiple reads and write simuletensely through it's Reader and Writer properties. This is where it is handy in case of SignalR where data streaming needs to be done but is not just limited to that but wherever something needs to be read/write/combination of both in a multi-threading environment. In my case with SignalR, I had to stream stock data at a regular interval of time. public ChannelReader<StockData> StreamStock() { var channel = Channel.CreateUnbounded<StockData>(); _stockManager.OnStockData = stockData => { channel.Writer.TryWrite(stockData); }; return channel.Reader; } The SignalR keeps return type of ChannelReader<StockData> open so that whatev...
Post a Comment
Read more

Trim text in MVC Core through Model Binder

Trimming text can be done on client side codes, but I believe it is most suitable on MVC Model Binder since it would be at one place on infrastructure level which would be free from any manual intervention of developer. This would allow every post request to be processed and converted to a trimmed string. Let us start by creating Model binder using Microsoft.AspNetCore.Mvc.ModelBinding; using System; using System.Threading.Tasks; public class TrimmingModelBinder : IModelBinder { private readonly IModelBinder FallbackBinder; public TrimmingModelBinder(IModelBinder fallbackBinder) { FallbackBinder = fallbackBinder ?? throw new ArgumentNullException(nameof(fallbackBinder)); } public Task BindModelAsync(ModelBindingContext bindingContext) { if (bindingContext == null) { throw new ArgumentNullException(nameof(bindingContext)); } var valueProviderResult = bindingContext.ValueProvider.GetValue(bin...
2 comments
Read more

main method return value

Mainly we used to write "static void main" for entry point in console application. Placement of void denotes return type. In main function we could have "int" too but what does it really mean. "int main" signifies return type as integer. The return type of main function tells about execution status of application. Even if we have specified void as return type then it would be marked as successful program execution. If we mark int as return type then we are able to control the execution status. Now, what is the benefit of making main function as int. Windows OS saves result in  %ERRORLEVEL% environment variable of OS. If we create batch file and execute application through it then we will able to get status and based on result we can trigger something else through batch file. Let's suppose we have created program called TEST.EXE. Batch file script: @echo off REM Execute main program REM TEST.EXE @if  "%ERRORLEVEL%" == "0...
Post a Comment
Read more

Data seed for the application with EF, MongoDB or any other ORM.

Most of ORMs has moved to Code first approach where everything is derived/initialized from codes rather than DB side. In this situation, it is better to set data through codes only. We would be looking through simple technique where we would be Seeding data through Codes. I would be using UnitOfWork and Repository pattern for implementing Data Seeding technique. This can be applied to any data source MongoDB, EF, or any other ORM or DB. Things we would be doing. - Creating a base class for easy usage. - Interface for Seed function for any future enhancements. - Individual seed classes. - Configuration to call all seeds. - AspNet core configuration to Seed data through Seed configuration. Creating a base class for easy usage public abstract class BaseSeed<TModel> where TModel : class { protected readonly IMyProjectUnitOfWork MyProjectUnitOfWork; public BaseSeed(IMyProjectUnitOfWork MyProjectUnitOfWork) { ...
Post a Comment
Read more