Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Custom MVC form with Telerik Kendo grid data coming from another source

Vote:
 

Hi ,

I need to include a custom mvc form with telerik kendo grid into an Existing Episerver project. The kendo grid data is coming from another database and it has all the functinality sorting,filtering, pop windows that gets populated by ajax request when a link is clicked etc..I would like this view to be integrated in Episerver so that i can use the layout page in the _viewstart.cshtml.I need your help to suggest me in the right direction on how to implement  this.

thank you

#151011
Jul 06, 2016 16:59
Vote:
 

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)?

#151019
Jul 06, 2016 20:37
Vote:
 

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.

#151021
Jul 06, 2016 23:50
Vote:
 

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

#151024
Jul 07, 2016 9:24
Vote:
 

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 :
  • ProductService.cs
 
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();
        }
    }
}
#151044
Jul 07, 2016 21:09
Vote:
 

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.

#151050
Edited, Jul 08, 2016 13:09
Vote:
 

Hi Daniel,

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

#151215
Jul 13, 2016 14:34
Vote:
 

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

#173751
Jan 08, 2017 19:08
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.