Kendo add new record to filtered table | C# Online Compiler

Kendo add new record to filtered table by John Kirwin

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Dynamic;
using Kendo.DynamicLinq;
using System.ComponentModel.DataAnnotations;

namespace JoeysProofOfConcept
{
	public class ClientGroupCustomPropertyViewModel
	{
		[Key]
		public int Id
		{
			get;
			set;
		}

		[Display(Name = @"Name", Prompt = @"Enter Property Name")]
		[Required]
		public string Name
		{
			get;
			set;
		}

		[Required]
		[Display(Name = @"Field Type", Prompt = @"Enter Field Type")]
		public string FieldType
		{
			get;
			set;
		}

		[Required]
		[Display(Name = @"Value", Prompt = @"Enter Value")]
		public string Value
		{
			get;
			set;
		}

		[Required]
		[Display(Name = @"Required", Prompt = @"Check if Required")]
		public bool IsRequired
		{
			get;
			set;
		}
	}

	public static class QueryableExtensions
	{
		/// <summary>
				        /// Applies data processing (paging, sorting and filtering) over IQueryable using Dynamic Linq.
				        /// </summary>
				        /// <typeparam name = "T">The type of the IQueryable</typeparam>
				        /// <param name = "queryable">The IQueryable which should be processed.</param>
				        /// <param name = "take">Specifies how many items to take. Configurable via the pageSize setting of the Kendo DataSource.</param>
				        /// <param name = "skip">Specifies how many items to skip.</param>
				        /// <param name = "sort">Specifies the current sort order.</param>
				        /// <param name = "filter">Specifies the current filter.</param>
				        /// <returns>A DataSourceResult object populated from the processed IQueryable.</returns>
		public static DataSourceResult ToDataSourceResult<T>(this IQueryable<T> queryable, int take, int skip, IEnumerable<Sort> sort, Filter filter)
		{
			// Filter the data first
			queryable = Filter(queryable, filter);
			// Calculate the total number of records (needed for paging)
			var total = queryable.Count();
			// Sort the data
			queryable = Sort(queryable, sort);
			// Finally page the data
			queryable = Page(queryable, take, skip);
			return new DataSourceResult
			{
			Data = queryable.ToList(), Total = total
			}

			;
		}

		private static IQueryable<T> Filter<T>(IQueryable<T> queryable, Filter filter)
		{
			if (filter != null && filter.Logic != null)
			{
				// Collect a flat list of all filters
				var filters = filter.All();
				// Get all filter values as array (needed by the Where method of Dynamic Linq)
				var values = filters.Select(f => f.Value).ToArray();
				// Create a predicate expression e.g. Field1 = @0 And Field2 > @1
				string predicate = filter.ToExpression(filters);
				// Use the Where method of Dynamic Linq to filter the data
				queryable = queryable.Where(predicate, values);
			}

			return queryable;
		}

		private static IQueryable<T> Sort<T>(IQueryable<T> queryable, IEnumerable<Sort> sort)
		{
			if (sort != null && sort.Any())
			{
				// Create ordering expression e.g. Field1 asc, Field2 desc
				var ordering = String.Join(",", sort.Select(s => s.ToExpression()));
				// Use the OrderBy method of Dynamic Linq to sort the data
				return queryable.OrderBy(ordering);
			}

			return queryable;
		}

		private static IQueryable<T> Page<T>(IQueryable<T> queryable, int take, int skip)
		{
			return queryable.Skip(skip).Take(take);
		}
	}
}

Model

​x
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Dynamic;
using Kendo.DynamicLinq;
using System.ComponentModel.DataAnnotations;
​
namespace JoeysProofOfConcept
{
    public class ClientGroupCustomPropertyViewModel
    {
        [Key]
        public int Id
        {
            get;
            set;
        }
​
        [Display(Name = @"Name", Prompt = @"Enter Property Name")]
        [Required]
        public string Name
        {
            get;
            set;
        }
​
        [Required]
        [Display(Name = @"Field Type", Prompt = @"Enter Field Type")]
        public string FieldType
        {
            get;
            set;
        }
​
        [Required]
        [Display(Name = @"Value", Prompt = @"Enter Value")]
        public string Value
        {
            get;
            set;
        }
​
        [Required]
        [Display(Name = @"Required", Prompt = @"Check if Required")]
        public bool IsRequired
        {
            get;
            set;
        }
    }
​
    public static class QueryableExtensions
    {
        /// <summary>
                        /// Applies data processing (paging, sorting and filtering) over IQueryable using Dynamic Linq.
                        /// </summary>
                        /// <typeparam name = "T">The type of the IQueryable</typeparam>
                        /// <param name = "queryable">The IQueryable which should be processed.</param>
                        /// <param name = "take">Specifies how many items to take. Configurable via the pageSize setting of the Kendo DataSource.</param>
                        /// <param name = "skip">Specifies how many items to skip.</param>
                        /// <param name = "sort">Specifies the current sort order.</param>
                        /// <param name = "filter">Specifies the current filter.</param>
                        /// <returns>A DataSourceResult object populated from the processed IQueryable.</returns>
        public static DataSourceResult ToDataSourceResult<T>(this IQueryable<T> queryable, int take, int skip, IEnumerable<Sort> sort, Filter filter)
        {
            // Filter the data first
            queryable = Filter(queryable, filter);
            // Calculate the total number of records (needed for paging)
            var total = queryable.Count();
            // Sort the data
            queryable = Sort(queryable, sort);
            // Finally page the data
            queryable = Page(queryable, take, skip);
            return new DataSourceResult
            {
            Data = queryable.ToList(), Total = total
            }
​
            ;
        }
​
        private static IQueryable<T> Filter<T>(IQueryable<T> queryable, Filter filter)
        {
            if (filter != null && filter.Logic != null)
            {
                // Collect a flat list of all filters
                var filters = filter.All();
                // Get all filter values as array (needed by the Where method of Dynamic Linq)
                var values = filters.Select(f => f.Value).ToArray();
                // Create a predicate expression e.g. Field1 = @0 And Field2 > @1
                string predicate = filter.ToExpression(filters);
                // Use the Where method of Dynamic Linq to filter the data
                queryable = queryable.Where(predicate, values);
            }
​
            return queryable;
        }
​
        private static IQueryable<T> Sort<T>(IQueryable<T> queryable, IEnumerable<Sort> sort)
        {
            if (sort != null && sort.Any())
            {
                // Create ordering expression e.g. Field1 asc, Field2 desc
                var ordering = String.Join(",", sort.Select(s => s.ToExpression()));
                // Use the OrderBy method of Dynamic Linq to sort the data
                return queryable.OrderBy(ordering);
            }
​
            return queryable;
        }
​
        private static IQueryable<T> Page<T>(IQueryable<T> queryable, int take, int skip)
        {
            return queryable.Skip(skip).Take(take);
        }
    }
}

@model JoeysProofOfConcept.ClientGroupCustomPropertyViewModel
@{
	Layout = null;
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Joeys Kendo UI Grid Proof of Concept</title>

		<link href="https://da7xgjtj801h2.cloudfront.net/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
		<link href="https://da7xgjtj801h2.cloudfront.net/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

		<script src="https://da7xgjtj801h2.cloudfront.net/2012.3.1114/js/kendo.all.min.js"></script>
	</head>
	
	<body>
		<div id="grid"></div>
	</body>

	<script type="text/javascript">
	
	$(document).ready(function() {

	$("#grid").kendoGrid({
        height: 400,
        columns: [
            "Name",
            { field: "FieldType", width: "150px" },
            { field: "Value", width: "150px" },
            { field: "IsRequired", width: "100px" },
            { command: "destroy", title: "Delete", width: "110px" }
        ],
        editable: "popup", // enable editing
        pageable: true,
        sortable: true,
        filterable: true,
        toolbar: ["create", "save", "cancel"], // specify toolbar commands
        dataSource: {
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total",
                model: { // define the model of the data source. Required for validation and property types.
                    id: "Id",
                    fields: {
                        Id: { editable: false, nullable: true },
                        Name: { validation: { required: true } },
                        FieldType: { validation: { required: true } },
                        IsRequired: { type: "boolean" },
                        Value: { validation: { required: true } }
                    }
                }
            },
            batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
            transport: {
                create: {
                    url: "@Url.Action("Create", "Home")", //specify the URL which should create new records. This is the Create method of the HomeController.
                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                },
                read: {
                    url: "@Url.Action("Read", "Home")", //specify the URL which should return the records. This is the Read method of the HomeController.
                    contentType: "application/json",
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                update: {
                    url:"@Url.Action("Update", "Home")", //specify the URL which should update the records. This is the Update method of the HomeController.
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                destroy: {
                    url: "@Url.Action("Destroy", "Home")", //specify the URL which should destroy the records. This is the Destroy method of the HomeController.
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                parameterMap: function(data, operation) {
                    if (operation != "read") {
                        // post the products so the ASP.NET DefaultModelBinder will understand them:

                        // model[0].Name="name"
                        // model[0].Id =1
                        // model[1].Name="name"
                        // model[1].Id =1

                        var result = {};

                        for (var i = 0; i < data.models.length; i++) {
                            var results = data.models[i];

                            for (var member in results) {
                                result["model[" + i + "]." + member] = results[member];
                            }
                        }

                        return result;
                    } else {
                        return JSON.stringify(data);
                    }
                }
            }
        }
    });
});
</script>	
</html>

View

 
@model JoeysProofOfConcept.ClientGroupCustomPropertyViewModel
@{
    Layout = null;
}
​
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Joeys Kendo UI Grid Proof of Concept</title>
​
        <link href="https://da7xgjtj801h2.cloudfront.net/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="https://da7xgjtj801h2.cloudfront.net/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />
​
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
​
        <script src="https://da7xgjtj801h2.cloudfront.net/2012.3.1114/js/kendo.all.min.js"></script>
    </head>
    
    <body>
        <div id="grid"></div>
    </body>
​
    <script type="text/javascript">
    
    $(document).ready(function() {
​
    $("#grid").kendoGrid({
        height: 400,
        columns: [
            "Name",
            { field: "FieldType", width: "150px" },
            { field: "Value", width: "150px" },
            { field: "IsRequired", width: "100px" },
            { command: "destroy", title: "Delete", width: "110px" }
        ],
        editable: "popup", // enable editing
        pageable: true,
        sortable: true,
        filterable: true,
        toolbar: ["create", "save", "cancel"], // specify toolbar commands
        dataSource: {
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total",
                model: { // define the model of the data source. Required for validation and property types.
                    id: "Id",
                    fields: {
                        Id: { editable: false, nullable: true },
                        Name: { validation: { required: true } },
                        FieldType: { validation: { required: true } },
                        IsRequired: { type: "boolean" },
                        Value: { validation: { required: true } }
                    }
                }
            },
            batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
            transport: {
                create: {
                    url: "@Url.Action("Create", "Home")", //specify the URL which should create new records. This is the Create method of the HomeController.
                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                },
                read: {
                    url: "@Url.Action("Read", "Home")", //specify the URL which should return the records. This is the Read method of the HomeController.
                    contentType: "application/json",
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                update: {
                    url:"@Url.Action("Update", "Home")", //specify the URL which should update the records. This is the Update method of the HomeController.
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                destroy: {
                    url: "@Url.Action("Destroy", "Home")", //specify the URL which should destroy the records. This is the Destroy method of the HomeController.
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                parameterMap: function(data, operation) {
                    if (operation != "read") {
                        // post the products so the ASP.NET DefaultModelBinder will understand them:
​
                        // model[0].Name="name"
                        // model[0].Id =1
                        // model[1].Name="name"
                        // model[1].Id =1
​
                        var result = {};
​
                        for (var i = 0; i < data.models.length; i++) {
                            var results = data.models[i];
​
                            for (var member in results) {
                                result["model[" + i + "]." + member] = results[member];
                            }
                        }
​
                        return result;
                    } else {
                        return JSON.stringify(data);
                    }
                }
            }
        }
    });
});
</script>   
</html>
​

using System;
using System.Linq;
using System.Web.Mvc;
using System.Collections.Generic;
using Kendo.DynamicLinq;
using QueryableExtensions = Kendo.DynamicLinq.QueryableExtensions;

namespace JoeysProofOfConcept
{
	public class HomeController : Controller
	{
		public ActionResult Index()
		{
			return View();
		}

		/// <summary>
				        /// Creates new model by inserting the data posted by the Kendo Grid in the database.
				        /// </summary>
				        /// <param name = "model">The model created by the user.</param>
				        /// <returns>The inserted model so the Kendo Grid is aware of the database generated ProductID</returns>
		[HttpPost]
		public ActionResult Create(IEnumerable<ClientGroupCustomPropertyViewModel> model)
		{
			System.Console.WriteLine(model.Count());
			return Json(model.Select(p => new ClientGroupCustomPropertyViewModel
			{
			Id = p.Id, Name = p.Name, FieldType = p.FieldType, Value = p.Value, IsRequired = p.IsRequired
			}

			).ToList());
		}

		/// <summary>
				        /// Reads the available model to provide data for the Kendo Grid
				        /// </summary>
				        /// <returns>All available model as JSON</returns>
		[HttpPost]
		public ActionResult Read(int take, int skip, IEnumerable<Sort> sort, Kendo.DynamicLinq.Filter filter)
		{
			var result = new List<ClientGroupCustomPropertyViewModel>
			{
			new ClientGroupCustomPropertyViewModel
			{
			Id = 1, Name = "Some Name", FieldType = "Some Type", Value = "Some Value", IsRequired = true
			}
			}

			;
			return Json(QueryableExtensions.ToDataSourceResult(result.AsQueryable(), take, skip, sort, filter));
		}

		/// <summary>
				        /// Updates existing model by updating the database with the data posted by the Kendo Grid.
				        /// </summary>
				        /// <param name = "model">The model updated by the user</param>
		[HttpPost]
		public ActionResult Update(IEnumerable<ClientGroupCustomPropertyViewModel> model)
		{
			//Return emtpy result
			return Json(model);
		}

		/// <summary>
				        /// Destroys existing model by deleting them from the database.
				        /// </summary>
				        /// <param name = "model">The model deleted by the user</param>
		[HttpPost]
		public ActionResult Destroy(IEnumerable<ClientGroupCustomPropertyViewModel> model)
		{
			return Json(model);
		}
	}
}

Controller

 
using System;
using System.Linq;
using System.Web.Mvc;
using System.Collections.Generic;
using Kendo.DynamicLinq;
using QueryableExtensions = Kendo.DynamicLinq.QueryableExtensions;
​
namespace JoeysProofOfConcept
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
​
        /// <summary>
                        /// Creates new model by inserting the data posted by the Kendo Grid in the database.
                        /// </summary>
                        /// <param name = "model">The model created by the user.</param>
                        /// <returns>The inserted model so the Kendo Grid is aware of the database generated ProductID</returns>
        [HttpPost]
        public ActionResult Create(IEnumerable<ClientGroupCustomPropertyViewModel> model)
        {
            System.Console.WriteLine(model.Count());
            return Json(model.Select(p => new ClientGroupCustomPropertyViewModel
            {
            Id = p.Id, Name = p.Name, FieldType = p.FieldType, Value = p.Value, IsRequired = p.IsRequired
            }
​
            ).ToList());
        }
​
        /// <summary>
                        /// Reads the available model to provide data for the Kendo Grid
                        /// </summary>
                        /// <returns>All available model as JSON</returns>
        [HttpPost]
        public ActionResult Read(int take, int skip, IEnumerable<Sort> sort, Kendo.DynamicLinq.Filter filter)
        {
            var result = new List<ClientGroupCustomPropertyViewModel>
            {
            new ClientGroupCustomPropertyViewModel
            {
            Id = 1, Name = "Some Name", FieldType = "Some Type", Value = "Some Value", IsRequired = true
            }
            }
​
            ;
            return Json(QueryableExtensions.ToDataSourceResult(result.AsQueryable(), take, skip, sort, filter));
        }
​
        /// <summary>
                        /// Updates existing model by updating the database with the data posted by the Kendo Grid.
                        /// </summary>
                        /// <param name = "model">The model updated by the user</param>
        [HttpPost]
        public ActionResult Update(IEnumerable<ClientGroupCustomPropertyViewModel> model)
        {
            //Return emtpy result
            return Json(model);
        }
​
        /// <summary>
                        /// Destroys existing model by deleting them from the database.
                        /// </summary>
                        /// <param name = "model">The model deleted by the user</param>
        [HttpPost]
        public ActionResult Destroy(IEnumerable<ClientGroupCustomPropertyViewModel> model)
        {
            return Json(model);
        }
    }
}

View in Full Screen

View IL Code