Click here to Skip to main content
14,135,592 members
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 18 Dec 2018
Licenced CPOL

Part 2: Implementing w2ui in ASP.NET MVC – w2ui Grid

, 21 Jan 2019
Rate this:
Please Sign up or sign in to vote.
How to implement w2ui in ASP.NET MVC - w2ui grid


In my first post, I have shown how to configure w2ui in your ASP.NET project. If you familiar with ASP.NET MVC project, the View commonly comes with Index, Create, Edit and Details pages.

Index page is where I regularly use w2ui grid replacing the standard HTML table. With w2ui grid, you don’t have to worry about search, sort and pagination anymore. Thanks to the writer, Vitamila who has put a lot of his effort to make this library so easy to use.

In this post, I will show you how I implement w2ui grid in my ASP.NET project.

Note – I will not explain in depth of w2ui as you can get more details from the w2ui official page.

W2UI Grid

If you refer to the documentation, it gives us two examples on how to load data to w2ui grid, i.e., local and remote data source.

Example 1 – Local Data Source

In my earlier attempt using w2ui, I implemented it following the local data source example. This is how I did it.

Step 1 – Add the Model and Reference to w2ui CSS in Index Page

@model IEnumerable<w2uiproject.Models.TaskReport>


Notes: Please refer to the earlier post to see how I add w2ui to my project.

Step 2 – Add div Tag Where You Want to Put the w2ui Grid

<div id="indexGrid" style="width: 100%; height: 400px; overflow: hidden;"></div>
  • Here, we declare the div to have 400px height with full width of the container
  • Overflow : hidden – show scroll bar if the grid height goes beyond 400px

Step 3 – Add Reference to w2ui JavaScript and Create the JavaScript

Example (use your keyboard arrow keys to scroll the code):

@section Scripts {
@Scripts.Render("~/w2ui/js")   // this is required
$(document).ready(function () {

    name: 'indexGrid',
    header: 'List of order',
    show: {      // config grid toolbar, header and footer
      toolbar: true,
      header: true,
      footer: true,
      toolbarAdd: false,
      toolbarDelete: false,
      toolbarEdit: false
    columns: [   // define grid columns
      { field: 'rec1', caption: 'Task', sortable: true, size: '20%' },
      { field: 'rec2', caption: 'Task Date', sortable: true, size: '15%', render: 'date' },
      { field: 'rec3', caption: 'Start Time', sortable: true, size: '10%' },
      { field: 'rec4', caption: 'End Time', sortable: true, size: '10%' },
      { field: 'rec5', caption: 'Duration', size: '10%' },
        field: 'rec6', caption: 'Status', sortable: true, size: '12%',
        render: function (record) { 
           var html;
           if (record.status == 1) {
             html = '<p style="background: blue; color: white;" >Completed<\p>';
           else if (record.status == 2) {
             html = '<p style="background: red; color: white;" >Error<\p>';
           else if (record.status == 3) {
             html = '<p style="background: yellow; color: white;" >Warning<\p>';
           else if (record.status == 4) {
             html = '<p style="background: gray; color: white;" >Cancel<\p>';
           else {
             html = '<p>In Progress<\p>';

           return html;

    searches: [   // define search options
      { field: 'rec1', caption: 'Task', type: 'int' },
      { field: 'rec2', caption: 'Task Date', type: 'date' },
      { field: 'rec6', caption: 'Status', type: 'list', 
        options: { items: ['Complete', 'Error', 'Warning', 'Cancel', 'In Progress'] } },

    records: [    // define record items - from model send from controller
      @foreach (var item in Model)
         DateTime dStart = Convert.ToDateTime(@item.StartTime);
         DateTime dEnd = Convert.ToDateTime(@item.EndTime);
         int d1 = 0;

         if (@item.Status == 1)
            d1 = dEnd.Subtract(dStart).Seconds;

         @: { recid: '@item.Id', rec1: '@item.TaskName', rec2: '@dStart', 
         rec3: '@dStart.ToString("HH:mm")', rec4: '@dEnd.ToString("HH:mm")', 
         rec5: '@d1 sec', status: '@item.Status' }, 
    ], // records

  });  // #indexGrid
});    // doc ready


Notes about the example :

  • The w2ui grid is using local data source as we send all records once when loading the page.
  • w2ui did not have to fetch any data from the server during sorting or searching.
  • In the above example, I also show how to:
    • render Date (rec2) and Time (rec3, rec4)
    • show calculated data in rec5
    • show different cell color base on status at rec6
  • Please refer to w2ui page for details on how to configure and display records.
  • At the minimum, you should understand about these properties or methods:
    • Shows
    • Columns
    • Searches
    • Records
  • You should familiarize yourself with demo and documentation provided in w2ui page.
  • If you are still confused, try to view this youtube video where I show how I do it in my ASP.NET project.

Example 2 – Remote Data Source

For example on remote data source, I will continue in my next post.




This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
Malaysia Malaysia
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionIs w2ui dead Pin
Dewey23-Jan-19 7:24
memberDewey23-Jan-19 7:24 
Or is it just mature at this point.

I notice that there hasn't been activity in over a year.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190518.1 | Last Updated 22 Jan 2019
Article Copyright 2018 by bapak71
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid