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")
<script>
$(document).ready(function () {
$('#indexGrid').w2grid({
name: 'indexGrid',
header: 'List of order',
show: {
toolbar: true,
header: true,
footer: true,
toolbarAdd: false,
toolbarDelete: false,
toolbarEdit: false
},
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: [
{ 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: [
@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' },
}
],
});
});
</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