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

Introduction

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>

@Styles.Render("~/w2ui/css")

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
<script>
$(document).ready(function () {

  $('#indexGrid').w2grid({     
    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

</script>
}

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.

Reference

• w2ui homepage
• Part 1 - Implement w2ui in asp.net mvc - basic setting
• Part 3 - w2ui.grid with remote data source
• Part 4 - How I show photo in w2ui grid