Using Gijgo Grid With ASP.NET MVC

Link to download Source code.

What is Gijgo?

Gijgo is a set of free open source JavaScript controls distributed under MIT License. All the widgets are high performance, built on top of the jQuery JavaScript library with built-in support for Bootstrap, Material Design, and Font Awesome. They are designed to save you time and scale with your development process.



Using jqGrid with ASP.NET MVC

If you have heard about jqGrid and you want to use it, have a look at a detailed article of it. I am sure you will love it.

• Using jqGrid With ASP.NET MVC

Prerequisites for application

1. Visual Studio 2012 / 2013 / 2015 / 2017
2. Entity Framework 5 and above
3. SQL Server 2008

Let’s start with the database part first.

Database Part

I have created a database with the name “Northwind” which has “Customers” table.



Next, we are going to create an ASP.NET MVC5 Web application.

Creating ASP.NET MVC5 Web Application

Open New Visual Studio 2015 IDE.



After opening IDE, next, we are going to create MVC project. For doing that, just click File - New - Project.



After choosing a project, a new dialog will pop up with the name “New Project”. In that, we are going to choose Visual C# Project Templates - Web - ASP.NET Web Application. Then, we are going to name the project as “DemoGijgo”.



After naming the project, click on OK button to create the project. A new dialog will pop up for choosing templates for creating “ASP.NET Web Application;”. In that template, we are going to create an MVC application. That's why we are going to choose “MVC template” and next, click on OK button to create the project.

After clicking on OK button, it will start to create a project.

Project Structure



After creating project, create Model.

Creating Customer Model

We are going to add Customer Model to the Models folder.

[Table("Customers")]
 public class Customers
 {
     [Key]
     public int? CustomerID { get; set; }

     [Required(ErrorMessage = "Required CompanyName")]
     public string CompanyName { get; set; }
     [Required(ErrorMessage = "Required ContactName")]
     public string ContactName { get; set; }
     [Required(ErrorMessage = "Required ContactTitle")]
     public string ContactTitle { get; set; }
     public string Address { get; set; }

     [Required(ErrorMessage = "Required City")]
     public string City { get; set; }
     public string Region { get; set; }

     [Required(ErrorMessage = "Required PostalCode")]
     public string PostalCode { get; set; }

     [Required(ErrorMessage = "Required Country")]
     public string Country { get; set; }

     [Required(ErrorMessage = "Required Phone")]
     public string Phone { get; set; }
     public string Fax { get; set; }
 }

After adding model, we are going to use Entity framework for accessing the database. For that, we need to set up DbContext class.

Note - What is DbContext?

DbContext is an important part of Entity Framework. It is a bridge between your domain or entity classes and the database. DbContext is the primary class that is responsible for interacting with the data as an object.

Referenced from,

http://www.entityframeworktutorial.net/EntityFramework4.3/dbcontext-vs-objectcontext.aspx

Setting up DbContext Class

In this part, we are first going to create a class with name “DatabaseContext” and this class will be inheriting from “DbContext” class.

We are going to create this class in Models folder.



Note

“DBConnection” is Connection string name.

Note: - What is DBSet?

DBSet class represents an entity set that is used for creating, read, update, and delete operations. A generic version of DBSet (DbSet<TEntity>) can be used when the type of entity is not known at build time.

After adding “DatabaseContext” class, next, we are going to inherit this class with “DbContext” class.

After inheriting the class, in the constructor, we are going to create a connection. For doing that, we need to pass the connection string named as “DbContext” class. We are passing a connection string named as DBConnection.

After passing the connection string, we are going to declare DbSet in “DbContext” class which will help us to perform create, read, update, and delete operations.

Code Snippet

using System.Data.Entity;

namespace DemoGijgo.Models
{
    public class DatabaseContext : DbContext
    {
        public DatabaseContext() : base("DBConnection")
        {

        }
        public DbSet<Customers> Customers { get; set; }
    }
}

Connection string in Web.config file

<connectionStrings>
   <addname="DBConnection"
   connectionString="Data Source=####; initial catalog=Northwind; user id=sa; password=Pass####;"
   providerName="System.Data.SqlClient" />
</connectionStrings>

Next, we are going to add a controller.

Adding DemoController

In this part, we are going to add a new controller with name “Demo”.



Next, after adding Controller, we are going to get a Default Action method with name Index,  we are going add this View for displaying Grid, along with that we need to add another Action Method for handling Ajax Get Request for Getting Data and binding it to Grid.

Adding Action Method GetCustomer

This Action Method will return a Json object that is required for binding data to gird.

Adding GetCustomers Action Method which will take few parameters as input for handling (sorting, Paging, and searching in the grid).

public JsonResult GetCustomers(int? page, int? limit, string sortBy, string direction, string companyName, string contactName, string country)
        {
            List<Customers> records;
            int total;
            // step 1
            using (DatabaseContext context = new DatabaseContext())
            {
                // step 2
                var query = (from tempcustomer in context.Customers
                             select tempcustomer);

                // step 3 applying where clause to linq query if companyName is not empty
                if (!string.IsNullOrWhiteSpace(companyName))
                {
                    query = query.Where(q => q.CompanyName.Contains(companyName));
                }

                // step 4 applying where clause to linq query if contactName is not empty
                if (!string.IsNullOrWhiteSpace(contactName))
                {
                    query = query.Where(q => q.ContactName != null && q.ContactName.Contains(contactName));
                }
                // step 5 applying where clause to linq query if country is not empty
                if (!string.IsNullOrWhiteSpace(country))
                {
                    query = query.Where(q => q.Country != null && q.Country.Contains(country));
                }

                // step 6 applying sorting asc to (companyname,contactname,country,city)

                if (!string.IsNullOrEmpty(sortBy) && !string.IsNullOrEmpty(direction))
                {
                    if (direction.Trim().ToLower() == "asc")
                    {
                        switch (sortBy.Trim().ToLower())
                        {
                            case "companyname":
                                query = query.OrderBy(q => q.CompanyName);
                                break;
                            case "contactname":
                                query = query.OrderBy(q => q.ContactName);
                                break;
                            case "country":
                                query = query.OrderBy(q => q.Country);
                                break;
                            case "city":
                                query = query.OrderBy(q => q.City);
                                break;
                        }
                    }
                    else
                    {
                        // step 7 applying sorting desc (companyname,contactname,country,city)

                        switch (sortBy.Trim().ToLower())
                        {
                            case "companyname":
                                query = query.OrderByDescending(q => q.CompanyName);
                                break;
                            case "contactname":
                                query = query.OrderByDescending(q => q.ContactName);
                                break;
                            case "country":
                                query = query.OrderByDescending(q => q.Country);
                                break;
                            case "city":
                                query = query.OrderByDescending(q => q.City);
                                break;
                        }
                    }
                }
                else
                {
                    query = query.OrderBy(q => q.CustomerID);
                }

                // step 8 Total rows count
                total = query.Count();
                // step 9 Paging
                if (page.HasValue && limit.HasValue)
                {
                    int start = (page.Value - 1) * limit.Value;
                    records = query.Skip(start).Take(limit.Value).ToList();
                }
                else
                {
                    records = query.ToList();
                }
            }
            // step 10 returing json object
            return this.Json(new { records, total }, JsonRequestBehavior.AllowGet);
        }

Understanding Code Snippet in steps.

1. In the first step, we create Instance of DatabaseContext for accessing Database.
2. In the second step, we write Linq query for getting customer
3. In the third step, the company name parameter which we going to receive from the grid when someone is going to search data with company name, after receiving, first, we are going to check is company name not empty after that we are going to apply where clause to Linq query of the company name.
4. In the fourth step we are going apply a similar check on the contactName parameter and if it is not empty than we are going to apply where clause to Linq query of contactName.
5. In fifth step we are going to apply the similar check to the country parameter and if it is not empty than we are going apply where clause to Linq query of the country.
6. In the sixth step, we are going to apply sorting in ascending order for particular columns (company name, contact name, country, city) if someone has a requirement to add some more columns then they can add.
7. In the seventh step, we are going to apply sorting in descending order for particular columns (company name, contact name, country, city) if someone has a requirement to add some more columns then they can add.
8. In the eighth step, we are going calculate a total number of rows.
9. In ninth step, we are going to apply paging logic
10. In final step, we are going to return Json object which contains (customer records and total count of customers)

After adding and Understanding GetCustomer Action Method next we are going to add View for Index Action Method which was default created while creating Controller.

Adding Index View to Index Action Method

In this part, we are going to add Index View.



Project structure after adding Index view.



Adding Script and CSS reference of Gijgo Grid to Index View

In this step, we are going to add Script and CSS reference to index view.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/gijgo/1.7.0/combined/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.gijgo.com/1.7.0/css/demo.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gijgo/1.7.0/combined/js/gijgo.min.js" type="text/javascript"></script>

Adding empty <table> element

After adding Scripts and Css next we need to add table element for reserve the place where the grid should be created.

<div class="gj-margin-top-10">
    <table id="grid"></table>
</div>

Next step we are going to show simple grid with Customers columns in it.

Creating Gijgo Grid

In this part, we are going to write a script to create Gijgo and to call Action Method “GetCustomers” to get data to bind to the grid.

Code Snippet

<script type="text/javascript">

    $(document).ready(function () {
        grid = $('#grid').grid({
            primaryKey: 'CustomerID',
            dataSource: '/Demo/GetCustomers',
            columns: [
                { field: 'CustomerID', hidden: true },
                { field: 'CompanyName', sortable: true },
                { field: 'ContactName', sortable: true },
                { field: 'ContactTitle', sortable: false },
                { field: 'Country', sortable: true },
                { field: 'City', sortable: true },
                { field: 'PostalCode', sortable: false },
                { field: 'Phone', sortable: false }

            ]
        });
    });

</script>

After setting up a script for creating Gijgo Grid next we are going to Save and Run the application to have the first look at grid how it looks.



Enabling Pager

To enable paging just we need to add a small property to the grid. In that, you can see limit property which we can set to display a number of records on the grid.

pager: { limit: 5 }

Code Snippet

<script type="text/javascript">

    $(document).ready(function () {
        grid = $('#grid').grid({
            primaryKey: 'CustomerID',
            dataSource: '/Demo/GetCustomers',
            columns: [
                { field: 'CustomerID', hidden: true },
                { field: 'CompanyName', sortable: true },
                { field: 'ContactName', sortable: true },
                { field: 'ContactTitle', sortable: false },
                { field: 'Country', sortable: true },
                { field: 'City', sortable: true },
                { field: 'PostalCode', sortable: false },
                { field: 'Phone', sortable: false }

            ],
            pager: { limit: 5 }
        });
    });

</script>

Snapshot of paging



Debugging view after I change paging dropdown from 10 to 20.

Debugging view


After adding paging next, we need to add creating a new customer, editing customer, deleting customer and also we need to create a search for this grid.

Adding new Customer

In this part, we are going to create a new customer, and  for doing that we need to create a dialog because when we are going to click on add new customer button a dialog will pop up and in that popup, we are going add details and click on save button to save details.

On the index, view we are going to add a button and a dialog box markup.

Markup for button

<div class="gj-float-right">
        <button id="btnAdd" type="button" class="gj-button-md">Add New Customer</button>
</div>

Markup for dialog

In this part you see that we have created a simple dialog using div tags and inside this tags we have added all textbox controls for taking input and this all controls name are similar to names of customer model, which helps in model binding.

Along with that, you can see two buttons in that; one for saving and the other for cancelling.

<div id="dialog" class="gj-display-none">
    <div data-role="body">
        <input type="hidden" id="CustomerID"/>
        <div class="">
            <input type="text" class="gj-textbox-md" id="CompanyName" placeholder="CompanyName...">
            <input type="text" class="gj-textbox-md" id="ContactName" placeholder="ContactName...">
            <input type="text" class="gj-textbox-md" id="ContactTitle" placeholder="ContactTitle...">
            <input type="text" class="gj-textbox-md" id="Address" placeholder="Address...">
            <input type="text" class="gj-textbox-md" id="City" placeholder="City...">
            <input type="text" class="gj-textbox-md" id="Region" placeholder="Region...">
            <input type="text" class="gj-textbox-md" id="PostalCode" placeholder="PostalCode...">
            <input type="text" class="gj-textbox-md" id="Country" placeholder="Country...">
            <input type="text" class="gj-textbox-md" id="Phone" placeholder="Phone...">
            <input type="text" class="gj-textbox-md" id="Fax" placeholder="Fax...">
        </div>
    </div>
    <div data-role="footer">
        <button type="button" id="btnSave" class="gj-button-md">Save</button>
        <button type="button" id="btnCancel" class="gj-button-md">Cancel</button>
    </div>
</div>

After adding markup, you can see how the dialog will look:

Snapshot of Add Customer Dialog



Now to display dialog we need to write some jQuery code.

In jQuery code first, we are going write code for Creating dialog.

Code Snippet

dialog = $('#dialog').dialog({
     autoOpen: false,
     resizable: false,
     modal: true,
     width: 360
 });

After writing code for Creating dialog next on click of add button we need to display dialog along with fields in it.

For doing that we have written click event of add button and in that, we have cleared all textboxes on a load of dialog.

The name of dialog is 'Add Customer'

Code Snippet

$('#btnAdd').on('click',
    function () {
        $('#CustomerID').val('');
        $('#CompanyName').val('');
        $('#ContactName').val('');
        $('#ContactTitle').val('');
        $('#Country').val('');
        $('#City').val('');
        $('#PostalCode').val('');
        $('#Phone').val('');

        dialog.open('Add Customer');

    });

Complete Code Snippet after adding Dialog

<script type="text/javascript">
var grid, dialog;
        $(document).ready(function ()
        {
            grid = $('#grid').grid({
                primaryKey: 'CustomerID',
                dataSource: '/Demo/GetCustomers',
                columns: [
                    { field: 'CustomerID', hidden: true },
                    { field: 'CompanyName', sortable: true },
                    { field: 'ContactName', sortable: true },
                    { field: 'ContactTitle', sortable: false },
                    { field: 'Country', sortable: true },
                    { field: 'City', sortable: true },
                    { field: 'PostalCode', sortable: false },
                    { field: 'Phone', sortable: false }
                ],
                pager: { limit: 5 }
            });
        });

        dialog = $('#dialog').dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 360
        });

        $('#btnAdd').on('click',
            function () {
                $('#CustomerID').val('');
                $('#CompanyName').val('');
                $('#ContactName').val('');
                $('#ContactTitle').val('');
                $('#Country').val('');
                $('#City').val('');
                $('#PostalCode').val('');
                $('#Phone').val('');
                dialog.open('Add Customer');
            });

    </script>

Snapshot after adding Dialog



Now we have added dialog, so next let’s add another action method which will handle this post request.

Adding Save Action Method

In this part, we are going to create save action method which will take Customer Model as input. After doing that we need to check if ModelState is valid or not. If it is valid then we are going to save customer data into the database.

And if ModelState is invalid then we are going send an error message to view to display.

We are going to use  this action method for both Inserting and updating customers. For making it work we have added a check if CustomerID is present for a customer then we are going to update data not going to insert it, and if not present then we are going to insert a new customer.

Code Snippet

[HttpPost]
     public JsonResult Save(Customers record)
     {
         if (ModelState.IsValid)
         {
             using (DatabaseContext context = new DatabaseContext())
             {
                 if (record.CustomerID > 0)
                 {
                     context.Entry(record).State = EntityState.Modified;
                     context.SaveChanges();
                 }
                 else
                 {
                     context.Customers.Add(record);
                 }
                 context.SaveChanges();
             }
             return Json(new {result = true});
         }
         else
         {
             var errorList = (from item in ModelState
                 where item.Value.Errors.Any()
                 select item.Value.Errors[0].ErrorMessage).ToList();

             return Json(new { result = false, errorList = errorList });

         }
     }

Now after adding Save Action Method next, we are going to add Ajax function which will post data from form to action method.

Creating Save Ajax function

In this part we are going to get data from all textboxes and create a record object and then that object we are going send to Save Action Method, for calling Save action method we need to set URL for ajax function which will be “/Demo/Save” (controller/action method) and set method type to “POST”, if data is valid then grid will just reload else it will show error message.

Code Snippet

function Save() {
      var record =
      {
          CustomerID: $('#CustomerID').val(),
          CompanyName: $('#CompanyName').val(),
          ContactName: $('#ContactName').val(),
          ContactTitle: $('#ContactTitle').val(),
          Country: $('#Country').val(),
          City: $('#City').val(),
          PostalCode: $('#PostalCode').val(),
          Phone: $('#Phone').val()
      };

      $.ajax({ url: '/Demo/Save', data: { record: record }, method: 'POST' })
          .done(function (data)
          {
              if (data.result == false)
              {
                  var message = "";
                  for (var i = 0; i < data.errorList.length; i++)
                  {
                      message += data.errorList[i] + "\n";
                  }

                  alert(message);
              }
              else
              {
                  dialog.close();
                  grid.reload();
              }
          })
          .fail(function() {
              alert('Failed to save.');
              dialog.close();
          });
  }
'#btnSave').on('click', Save);

Now save application and run it once again to see how we can create a new customer.



Debugging View



View After adding Customer


After adding view next, we are going to Edit record.

Editing Customer record

For editing record first, we need to add edit button in grid.

It is simple to add a button; we just need to add simple markup in Grid which is shown below.

Code Snippet for adding Edit button

{width: 64,
tmpl: '<span class="material-icons gj-cursor-pointer">edit</span>',
align: 'center',
events: {'click': Edit}}

Code Snippet

$(document).ready(function () {
      grid = $('#grid').grid({
          primaryKey: 'CustomerID',
          dataSource: '/Demo/GetCustomers',
          columns: [
              { field: 'CustomerID', hidden: true },
              { field: 'CompanyName', sortable: true },
              { field: 'ContactName', sortable: true },
              { field: 'ContactTitle', sortable: false },
              { field: 'Country', sortable: true },
              { field: 'City', sortable: true },
              { field: 'PostalCode', sortable: false },
              { field: 'Phone', sortable: false },
              { width: 64, tmpl: '<span class="material-icons gj-cursor-pointer">edit</span>', align: 'center', events: { 'click': Edit } }

          ],
          pager: { limit: 5 }
      });

      $('#btnSave').on('click', Save);
  });

After adding edit button it won’t work unless we add Edit Event.

In this Edit event, we are going to show edit dialog with textboxes and row data bound in it which we have chosen to edit.

Code Snippet

function Edit(e)
{
        $('#CustomerID').val(e.data.record.CustomerID);
        $('#CompanyName').val(e.data.record.CompanyName);
        $('#ContactName').val(e.data.record.ContactName);
        $('#ContactTitle').val(e.data.record.ContactTitle);
        $('#Country').val(e.data.record.Country);
        $('#City').val(e.data.record.City);
        $('#PostalCode').val(e.data.record.PostalCode);
        $('#Address').val(e.data.record.Address);
        $('#Phone').val(e.data.record.Phone);
        $('#Fax').val(e.data.record.Fax);
        $('#Region').val(e.data.record.Region);
        dialog.open('Edit Customer');
 }

Now save application and run it once again to see Edit button and Edit Dialog.

Snapshot while displaying Edit dialog



Wait, wait we missed something --  our Dialog does not get canceled on click of Cancel button.

For closing dialog on cancel we just need to write a small function which is shown below.

Code Snippet

$('#btnCancel').on('click',
 function ()
 {
     dialog.close();
 });

Wow, it's working fine, now to update data we do not need to write code because we are going to call same action method which we have created for saving data.

In Save action method we have added a check to see if CustomerID is greater than zero if it is then we are going to update data.

Code Snippet

public JsonResult Save(Customers record)
        {
            if (ModelState.IsValid)
            {
                using (DatabaseContext context = new DatabaseContext())
                {
                    if (record.CustomerID > 0)
                    {
                        context.Entry(record).State = EntityState.Modified;
                        context.SaveChanges();
                    }
                    else
                    {
                        context.Customers.Add(record);
                    }
                    context.SaveChanges();
                }
                return Json(new { result = true });
            }
            else
            {
                var errorList = (from item in ModelState
                                 where item.Value.Errors.Any()
                                 select item.Value.Errors[0].ErrorMessage).ToList();

                return Json(new { result = false, errorList = errorList });
            }
        }

Now save the application and run it once again.

Snapshot while Editing Customer details



Debugging View



View After Editing /Updating Customer



After updating data next thing to do is Delete Customer.

Deleting Customer

For deleting customer, the first thing to do is to create Action Method which will handle delete request, and along with that, we need to pass CustomerID as a parameter, on the basis of which we are going to delete a customer.

Code Snippet

[HttpPost]
public JsonResult Delete(int id)
{
    using (DatabaseContext context = new DatabaseContext())
    {
        Customers entity = context.Customers.First(p => p.CustomerID == id);
        context.Customers.Remove(entity);
        context.SaveChanges();
    }
    return Json(new { result = true });
}

After adding Delete Action Method for Deleting record next we need to add a Delete button in grid.

It is simple to add a button we just need to add simple markup in Grid which is shown below.

Code Snippet for adding Edit button

{
   width: 64,
   tmpl: '<span class="material-icons gj-cursor-pointer">delete</span>',
   align: 'center',
events: {'click': Delete}
}

Code Snippet

var grid, dialog;
    $(document).ready(function () {
        grid = $('#grid').grid({
            primaryKey: 'CustomerID',
            dataSource: '/Demo/GetCustomers',
            columns: [
                { field: 'CustomerID', hidden: true },
                { field: 'CompanyName', sortable: true },
                { field: 'ContactName', sortable: true },
                { field: 'ContactTitle', sortable: false },
                { field: 'Country', sortable: true },
                { field: 'City', sortable: true },
                { field: 'PostalCode', sortable: false },
                { field: 'Phone', sortable: false },
                { width: 64, tmpl: '<span class="material-icons gj-cursor-pointer">edit</span>', align: 'center', events: { 'click': Edit } },
                { width: 64, tmpl: '<span class="material-icons gj-cursor-pointer">delete</span>', align: 'center', events: { 'click': Delete } }
            ],
            pager: { limit: 5 }
        });

        $('#btnSave').on('click', Save);
    });

After adding Delete button, it won’t work unless we add Delete Event.

In this Delete event we are going to first ask for confirmation after user accepts; to delete then we are going to call Delete Action Method with ajax post and with that we are going to pass CustomerID.

After we delete record finally we are going to reload grid.

Code Snippet

function Delete(e) {
        if (confirm('Are you sure you want to delete Customer?'))
        {
            $.ajax({url: '/Demo/Delete', data: { id: e.data.id }, method: 'POST' })
                .done(function () {
                    grid.reload();
                })
                .fail(function () {
                    alert('Failed to delete.');
                });
        }
    }

Confirmation Snapshot while deleting data



Debugging View of Delete Action Method



After completing with Delete functionally next we are finally going to work on Search.

Search

For adding search to this grid we need to add new text boxes and buttons to search and clear.

We are going to give three parameters to search (Company Name, Contact Name, Country).

Let’s start with adding markup, in this, you can easily find 3 textboxes and 2 buttons.

Code Snippet

<div class="gj-margin-top-10">
    <div class="gj-float-left">
        <form class="display-inline">
            <input id="txtcompanyName" type="text" placeholder="CompanyName..." class="gj-textbox-md gj-display-inline-block gj-width-200"/>
            <input id="txtcontactName" type="text" placeholder="ContactName..." class="gj-textbox-md gj-display-inline-block gj-width-200"/>
            <input id="txtcountry" type="text" placeholder="Country..." class="gj-textbox-md gj-display-inline-block gj-width-200"/>
            <button id="btnSearch" type="button" class="gj-button-md">Search</button>
            <button id="btnClear" type="button" class="gj-button-md">Clear</button>
        </form>
    </div>
    <div class="gj-float-right">
        <button id="btnAdd" type="button" class="gj-button-md">Add New Customer</button>
    </div>
</div>

Snapshot after adding Search to Gird



After adding textboxes and buttons next we are going to write javascript code for searching and clearing textboxes.

In this part, we do not require to add New Action Method we are going to use same Action Method GetCustomers which we are already using for the binding grid on load and also we take three parameters (Company Name, Contact Name, Country) as input which we require for search in that.

Code Snippet

public JsonResult GetCustomers(
int? page,
int? limit,
string sortBy,
string direction,
string companyName,
string contactName,
string country)

Now we are going to write a script for searching and clearing search parameter.

Code Snippet

In this part we are going to pass three parameters as input to action Method when user clicks on search button.

$('#btnSearch').on('click',
     function() {
         grid.reload({
             page: 1,
             companyName: $('#txtcompanyName').val(),
             contactName: $('#txtcontactName').val(),
             country: $('#txtcountry').val()
         });
     });

Next we are going to add code snippet for clearing search textboxes on click on Clear button.

$('#btnClear').on('click',
    function() {
    $('#txtcompanyName').val('');
    $('#txtcontactName').val('');
    $('#txtcountry').val('');
    grid.reload({ companyName: '', contactName: '', country: '' });
});

Now we have completed adding search, so let’s save the application and run it once again.

Snapshot of Search while searching with Company Name



Debugging View of Company Name Search



In the same way we can try a search for contact Name and Country.

Finally, if we click on the Clear button it will clear all textboxes of search.

Snapshot of Clearing Search



Advantages

In this grid, you can easily add search with textboxes and Dropdown which are not available on other grids.

Disadvantages

There is one functionally missing with this grid -- it does not have validation inbuilt you need to write it all while you are adding a new record or editing/updating record.

For More Details, Refer below link

http://gijgo.com/grid

Fnally we have completed Using Gijgo Grid with ASP.NET MVC in a step by step way. I hope you liked this article.