Generic Grid in MVC4

0
votes

I have five pages in my application created in ASP.Net MVC 4.0 using .aspx engine. I have to use Kendo Grid in all the five pages. But I want to avoid duplicating the Kendo Grid code in five pages. Because in future there may be 10-15 pages or more will be added. So that time instead of duplicating the code, needs to create a generic Kendo Grid template. ie, I should create only one partial class, but the below details will be changing for five different pages.

  1. Generic Grid should be able to bind to different models. ie, Model change in all five pages ( Ex: ProductModel, SalesModel, InvoiceModel etc )
  2. Number of columns will differ for each model ( Ex: ProductModel (5 columns), SalesModel (4 Columns), InvoiceModel (3 Columns))
  3. In each page, Some of the columns are sortable and some are not sortable. I should be able to specify.
  4. When Click on Edit and Delete buttons I should populate different dialog boxes based on page and I should pass different parameters ( Ex: When Click on Edit button of ProductModel, ProductCode should pass as parameter and that Edit product dialog should display, similarly for other pages)
  5. In each page, when user click on paging and sorting buttons there are search parameters which should be maintained and pass those parameters ( Ex: Search parameters will also vary for each page. In Read function of Grid I should be able to pass different number and type of parameters for different pages.
  6. The edit and delete function names will be different for different pages. (Ex: Product Page will have edit function name as EditProduct, similary for other page EditInvoice etc )

By considering the above requirements, Is it possible to create a Generic Kendo Grid. If so can you please help with different techniques / guide / sample code snippet / project.

Thanks.

2
asp.net-mvc-4kendo-uikendo-gridkendo-asp.net-mvc
Any update on this please – VVR147493

2 Answers

2
votes

Make your customized grid helper like this one.

    public static Kendo.Mvc.UI.Fluent.GridBuilder<T>
    GridEx<T>(this HtmlHelper helper
               , <other parameters that you like e.g. IList for column and field definition>
             ) where T : class
    {
        return helper.Kendo().Grid<T>()
            .Name(<your parameter>)
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(
                model =>
                {
                    model.Id("CustomerID");
                    // optional foreach
                }
        )
        // param1 or string controllerName= helper.ViewBag.controllerName
        .Create(create => create.Action("_Create", controllerName)) 
        .Read(read => read.Action("_Read", controllerName))
        .Update(update => update.Action("_Update", controllerName))
        .Destroy(destroy => destroy.Action("_Delete", controllerName))
        )
        .Columns(columns =>
        {
            // you can also access helper.ViewBag to get extra data
            foreach (var col in new[] { "CustomerID", "CustomerName" })
            {
                columns.Bound(col);
            }
            columns.Command(commands =>
            {
                commands.Edit();
                commands.Destroy();
            }).Title("Commands").Width(200);
        })
        .ToolBar(toolBar => toolBar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Sortable();
    }

Use this helper as @( Html.GridEx<CustomerViewModel>().Pageable() ) in your view.

For more customization you can see these two links as well 1 & 2

0
votes

Conceptually, it may be possible. One idea that comes to mind is to code your own HTML Helper class to return a new Kendo UI Grid based on the above requirements. In my mind though, something like this is much easier to do using the JavaScript implementation rather than ASP.NET MVC wrappers.

Update:

I am not going to pretend I understand MVC wrappers enough to provide a code example, but, I do understand the JavaScript implementation a lot better.

HTML

<body>
  <div id="grid1"></div>
  <br/>
  <div id="grid2"></div>
</body>

JavaScript

(function() {
  'use strict';

  var peopleData = [
    { name: 'Bob', age: 37, gender: 'M' },
    { name: 'Sue', age: 26, gender: 'F' },
    { name: 'Joe', age: 42, gender: 'M' }
  ];
  var peopleCols = [
    { field: 'name', title: 'Name', template: '<em>#=name#</em>' },
    { field: 'age', title: 'Age' },
    { field: 'gender', title: 'Gender' }
  ];
  var peopleOptions = {
    dataSource: peopleData,
    columns: peopleCols,
    selectable: 'row'
  };

  var officeData = [
    { dept: 'Human Resoures', office: '123' },
    { dept: 'Accounting', office: '321' },
    { dept: 'Legal', office: '231' }
  ];
  var officeCols = [
    { field: 'dept', title: 'Dept.', template: '<strong>#=dept#</strong>' },
    { field: 'office', title: 'Office#' }
  ];
  var officeOptions = {
    dataSource: officeData,
    columns: officeCols,
    sortable: true
  };

  var grid1 = createGrid('#grid1', peopleOptions),
      grid2 = createGrid('#grid2', officeOptions);

  // you can then use these vars to bind additional events or access its API
  grid1.removeRow('tr:eq(1)');

  function createGrid(selector, options) {
    return $(selector).kendoGrid(options).data('kendoGrid');
  }
})();

The concept is the same though. Define a function that accepts grid options, create the grid based off of those options, and return a reference to the grid. Here is a working JSBin example of the code above.