ASP.NET MVC Fancygrid part2

by

Hi,

again with 2 tutorial ASP.NET MVC FancyGird.

After we create our data in Part 1,

Now will create new Controller Call it

StudentController.

The most important one is, what I highlight it (Yellow).

First one is declared our Interface,

  private readonly IStudent repositoryStudent;

building contractor.

 public StudentController(IStudent repoStudent)
        {
            repositoryStudent = repoStudent;
        }

 

This one our main job :)

 public JsonResult StudentJSON() {
            //    Student model = new Student();
           List<Student> model = new List <Student>();
            model = repositoryStudent.GetStudent;
            return Json(model, JsonRequestBehavior.AllowGet);
        }
 

From StudentJSON method will send Data to Our FancyGrid using AJAX.

Next step, Add View Just right click on DataTablesJQuery() and add Empty View.

So, if you visit FancyGrid website and check how to use it from the documentation page.

Previews Photo Show you what you need to add, its just 2 lines.

//FancyGrid
<link href="http://code.fancygrid.com/fancy.min.css" rel="stylesheet">
<script src="http://code.fancygrid.com/fancy.min.js"></script>

Past them in your page.

same next photo

Full View Page Code:


<link href="http://code.fancygrid.com/fancy.min.css" rel="stylesheet">
<style>
    .image-staff img {
        margin-top: -15px;
        border-radius: 2px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
</style>
<h2>DataTables JQuery</h2>

 <div id="container"></div>

 @section Scripts{
<script src="http://code.fancygrid.com/fancy.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {       
        $.ajax({
            type:"GET",
            url: "StudentJSON",
            dataType: "json",
            success: function (result) {                              
                new FancyGrid({
                    title: 'Student',
                    renderTo: 'container',
                    width: 750,
                    height: 450,
                    data: result,
                    defaults: {
                        editable: true,
                        resizable: true,
                        sortable: true,
                        filter: {
                            header: true,
                            emptyText: 'Search'
                        }
                    },
                    paging: true,

                    columns: [{
                        index: 'ID',
                        title: 'ID',
                        type: 'string'
                    }, {
                            type: 'string',
                            index: 'FirstName',
                            title: 'FirstName'
                        }
                        , {
                        type: 'string',
                        index: 'LastName',
                        title: 'LastName'
                    }, {
                            type: 'string',
                            index: 'City',
                            title: 'City'}, {
                            type: 'image',
                            index: 'image',
                            title: 'Photo',
                            cls: 'image-staff',
                            width: 100,
                            flex: 1 }]
                });
            },
            error: function () {
                alert("Error loading data! Please try again.");
            }
        });
    });
</script>
    }

 

OK, don't be scare, you will say it's not too many lines.

After you see the result.

So, let's talk about the HTML code first,

We added the javascript file and style file.

After that we create new

<div id="container"></div>

AJAX code responsible to execute StudentJSON() method and get the result to send it to FancyGrid.

 new FancyGrid({
    renderTo: 'container',
    width: 500,
    height: 400,
    data: result,
    columns: [{}]

}

Just you need on more thing,

Columns,you need yo write column Name ,Index and which data type.

in our example was number,image and string.

last column was image datatype becouse we sent image.

columns: [{
                        index: 'ID',
                        title: 'ID',
                        type: 'string'
                    }, {
                            type: 'string',
                            index: 'FirstName',
                            title: 'FirstName'
                        }
                        , {
                        type: 'string',
                        index: 'LastName',
                        title: 'LastName'
                    }, {
                            type: 'string',
                            index: 'City',
                            title: 'City'}, 
                                  
                           {type: 'image',
                            index: 'image',
                            title: 'Photo',
                            cls: 'image-staff',
                            width: 100}]

 

The result after running your project,

 

there are too many features in this tool, I just highlight in yellow paging, filtering, sorting and add image ;) 

if you back to the code you can see paging: true, this 2 words to enable paging.

to enable sorting, filtering, resizable and editable to all columns just add this piece of code.

defaults: {
                        editable: true,
                        resizable: true,
                        sortable: true,
                        filter: {
                            header: true,
                            emptyText: 'Search'
                        }
                    },

 

For more information and more and more features, you can visit https://www.fancygrid.com website 

or if you like to watch it on Youtube, How to use FancyGrid with ASP.NET MVC and SQL Server

just visit my Channel

ASP.NET MVC Fancygrid part1

by

Hi,

In this article will write about Grid, there are too many Grid tools you can find.

but what exactly we want from Grid to display, features and how to code it or work with it from coding side.

Sure everybody tries to find the useful tool and easy with coding.

So, I found one easy to work with from coding side and too many features, help your page to be good and easy.

FancyGrid, I found it on Twitter.

 

When I checked the website, I was shocked.

Why ? I will not tell you that 

let's try together to dig up in it, with ASp.NET MVC Application.

First Step, Create new ASP.NET MVC Application.

Follow the Photos.

 

Choose MVC,

 

So, Now we need data to send it to our HTML page and display it on FancyGrid.

First, we need to create new Class in Models folder and call it Student.

 

Next Step, Create Folder Call it Services will put inside it,

a new class (IStudent class).

 

 

After Create our Interface, we need to create Repository Folder with StudentRepository class.

In StudentRepository Class, I have fake data just to show you how it will be in our HTML page.

sure you can Use data from your SQL Server database, using Entry Framework.

part2