Part 2 : Implementing w2ui in ASP.Net MVC – w2ui grid

Hi again.

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 come 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 posting 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 it more details from w2ui official page.

W2UI grid

If your refer to the documentation, it give 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 have implement it follow local data source example. This 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 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 shows 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 minimum you should understand about these properties or method
    • Shows
    • Columns
    • Searches
    • Records
  • You should familiar your self with demo and documentation provided in w2ui page
  • If you still confuse, try 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 posting.

 

 

 

2 Replies to “Part 2 : Implementing w2ui in ASP.Net MVC – w2ui grid”

Leave a Reply

Your email address will not be published. Required fields are marked *