Are you going to show this grid on an Episerver page or similar completely separate page that has no need of current page etc (pure MVC page)?

I want to show this grid on an episerver page if possible.I have the grid working in  a separate pure mvc project and now i want to integrate it with epi.

That should be fairly simple. Can you show some code sample of current solution for view and backend?

Hi Daniel, It is good to hear that the Kendo Grid can be included on an Episerver page. Just on the approach : The Grid will be on a page or is it going to be in a block.below is a code for the kendo Grid with View,controller and back end model. Thanks

View code :

   @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).ClientTemplate(
                    @"<div class='customer-photo'
                        style='background-image: url(../../content/web/Customers/#:data.CustomerID#.jpg);'></div>
                    <div class='customer-name'>#: ContactName #</div>")
              .Width(240);
            columns.Bound(c => c.ContactTitle);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.Country).Width(150);
        })
        .HtmlAttributes(new { style = "height: 550px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Customers_Read", "Grid"))
            .PageSize(20)
        )
    )

<style>
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>

Controller :

• IndexController.cs

using System.Collections.Generic;
using System.Data.Linq;
using System.Linq;
using System.Web.Mvc;
using Kendo.Mvc.Examples.Models;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;

namespace Kendo.Mvc.Examples.Controllers
{
    public partial class GridController : Controller
    {
        private ProductService productService;

        public GridController()
        {
            productService = new ProductService(new SampleEntities());
        }

        protected override void Dispose(bool disposing)
        {
            productService.Dispose();

            base.Dispose(disposing);
        }

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(productService.Read().ToDataSourceResult(request));
        }

        public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
        {
            return Json(GetOrders().ToDataSourceResult(request));
        }

        public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request)
        {
            return Json(GetCustomers().ToDataSourceResult(request));
        }

        private static IEnumerable<CustomerViewModel> GetCustomers()
        {
            var northwind = new SampleEntities();
            return northwind.Customers.Select(customer => new CustomerViewModel
            {
                CustomerID = customer.CustomerID,
                CompanyName = customer.CompanyName,
                ContactName = customer.ContactName,
                ContactTitle = customer.ContactTitle,
                Address = customer.Address,
                City = customer.City,
                Region = customer.Region,
                PostalCode = customer.PostalCode,
                Country = customer.Country,
                Phone = customer.Phone,
                Fax = customer.Fax,
                Bool = customer.Bool
            });
        }

        private static IEnumerable<OrderViewModel> GetOrders()
        {
            var northwind = new SampleEntities();

            return northwind.Orders.Select(order => new OrderViewModel
            {
                ContactName = order.Customer.ContactName,
                Freight = order.Freight,
                OrderDate = order.OrderDate,
                ShippedDate = order.ShippedDate,
                OrderID = order.OrderID,
                ShipAddress = order.ShipAddress,
                ShipCountry = order.ShipCountry,
                ShipName = order.ShipName,
                ShipCity = order.ShipCity,               
                EmployeeID = order.EmployeeID,
                CustomerID = order.CustomerID
            });
        }

        private static IEnumerable<EmployeeViewModel> GetEmployees()
        {
            var northwind = new SampleEntities();

            return northwind.Employees.Select(employee => new EmployeeViewModel
            {
                EmployeeID = employee.EmployeeID,
                FirstName = employee.FirstName,
                LastName = employee.LastName,
                Country = employee.Country,
                City = employee.City,
                Notes = employee.Notes,
                Title = employee.Title,
                Address = employee.Address,
                HomePhone = employee.HomePhone
            });
        }
    }

Backend :

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;

namespace Kendo.Mvc.Examples.Models
{
    public class ProductService : IDisposable
    {
        private SampleEntities entities;

        public ProductService(SampleEntities entities)
        {
            this.entities = entities;
        }

        public IEnumerable<ProductViewModel> Read()
        {
            return entities.Products.Select(product => new ProductViewModel
            {
                 ProductID = product.ProductID,
                 ProductName = product.ProductName,
                 UnitPrice = product.UnitPrice.HasValue ? product.UnitPrice.Value : default(decimal),
                 UnitsInStock = product.UnitsInStock.HasValue ? product.UnitsInStock.Value : default(short),
                 QuantityPerUnit = product.QuantityPerUnit,
                 Discontinued = product.Discontinued,
                 UnitsOnOrder = product.UnitsOnOrder.HasValue ? (int)product.UnitsOnOrder.Value : default(int),
                 CategoryID = product.CategoryID,
                 Category = new CategoryViewModel()
                 {
                     CategoryID = product.Category.CategoryID,
                     CategoryName = product.Category.CategoryName
                 },
                 LastSupply = DateTime.Today
            });
        }

        public void Create(ProductViewModel product)
        {
            var entity = new Product();

            entity.ProductName = product.ProductName;
            entity.UnitPrice = product.UnitPrice;
            entity.UnitsInStock = (short)product.UnitsInStock;
            entity.Discontinued = product.Discontinued;
            entity.CategoryID = product.CategoryID;

            if (entity.CategoryID == null)
            {
                entity.CategoryID = 1;
            }

            if (product.Category != null)
            {
                entity.CategoryID = product.Category.CategoryID;
            }

            entities.Products.Add(entity);
            entities.SaveChanges();

            product.ProductID = entity.ProductID;
        }

        public void Update(ProductViewModel product)
        {
            var entity = new Product();

            entity.ProductID = product.ProductID;
            entity.ProductName = product.ProductName;
            entity.UnitPrice = product.UnitPrice;
            entity.UnitsInStock = (short)product.UnitsInStock;
            entity.Discontinued = product.Discontinued;
            entity.CategoryID = product.CategoryID;

            if (product.Category != null)
            {
                entity.CategoryID = product.Category.CategoryID;
            }

            entities.Products.Attach(entity);
            entities.Entry(entity).State = EntityState.Modified;
            entities.SaveChanges();
        }

        public void Destroy(ProductViewModel product)
        {
            var entity = new Product();

            entity.ProductID = product.ProductID;

            entities.Products.Attach(entity);

            entities.Products.Remove(entity);

            var orderDetails = entities.Order_Details.Where(pd => pd.ProductID == entity.ProductID);

            foreach (var orderDetail in orderDetails)
            {
                entities.Order_Details.Remove(orderDetail);
            }

            entities.SaveChanges();
        }

        public void Dispose()
        {
            entities.Dispose();
        }
    }
}

I would start by creating a block for this that I can throw into some content area. In the view for the block I would throw in the cshtml above. I would start by keeping a separate controller for the Ajax request like the above so you can basically copy paste that as well. Product service class looks good as well. You can throw in an interface to it if you want support for dependency injection but that's optional. Merging the GridController into your block controller is optional as well. If you do you'll need to change the Ajax calls in cshtml though. Whether to do that or not depends on if you need the current page for anything during the Ajax calls. If you don't, I would have a standard MVC controller just like you have above.

Hi Daniel,

Thank you and I was able to include the telerik kendo grid in a block by applying your suggestion.

helllo Dando,

i am new in mvc world i am trying to add editable grid on my page but due to below line i am unable to implement it.

private SampleEntities entities;
 
and from where it is coming.

i am trying this from below link as well as the code u shared above.
http://demos.telerik.com/aspnet-mvc/grid/editing-inline

it will helpfull if u share a running complete example with source code that using editable grid using kendo ui.

thanks in advance