When working with large data in web applications, displaying data in a simple HTML table becomes difficult.



We need features like:

• Paging
• Sorting
• Filtering
• Endless scrolling
• Searching

To solve this problem, developers use Kendo UI Grid.

Kendo Grid is one of the most popular UI components used in ASP.NET MVC and jQuery applications.

In this article, you will learn:

• What Kendo Grid is
• Why we use it
• Important grid properties
• Endless scrolling
• Fetching 50-50 records
• Real examples with explanation

What is Kendo Grid?
Kendo Grid is a powerful table component provided by Progress Telerik.

It helps display data with advanced features using less code.

Why Use Kendo Grid?

• Professional UI
• Easy data handling
• Built-in paging & filtering
• Fast development

Step 1: Add Kendo UI Files
<link href="https://kendo.cdn.telerik.com/2024.1.130/styles/kendo.default-v2.min.css" rel="stylesheet" />

<script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>

Step 2: Create HTML Div
<div id="grid"></div>

Step 3: Create Grid
$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "/Home/GetStudents",
                dataType: "json"
            }
        },
        pageSize: 50
    },

    height: 550,

    pageable: true,

    sortable: true,

    filterable: true,

    scrollable: true,

    columns: [
        { field: "StudentId", title: "ID", width: 100 },
        { field: "StudentName", title: "Name" },
        { field: "City", title: "City" }
    ]
});

Output
Grid features:

• Paging
• Sorting
• Filtering
• Scrollable grid

Important Kendo Grid Properties Explained
pageable
pageable: true
Enables pagination

sortable
sortable: true
Allows column sorting

filterable
filterable: true
Adds filter option

scrollable
scrollable: true
Enables scrolling

groupable
groupable: true
Group data by column

selectable
selectable: true
Select row

resizable
resizable: true
Resize columns

reorderable
reorderable: true
Change column order

editable
editable: true

Enable editing
toolbar
toolbar: ["create"]
Add toolbar buttons

Endless Scrolling in Kendo Grid
What is Endless Scrolling?
Normally grid uses pagination.

But endless scrolling automatically loads more data while scrolling.

This improves user experience.
Example
scrollable: {
    endless: true
}

Full Example with Endless Scrolling
$("#grid").kendoGrid({

    dataSource: {
        transport: {
            read: {
                url: "/Home/GetStudents",
                dataType: "json"
            }
        },

        pageSize: 50,

        serverPaging: true
    },

    height: 500,

    scrollable: {
        endless: true
    },

    sortable: true,

    filterable: true,

    columns: [
        { field: "StudentId", title: "ID" },
        { field: "StudentName", title: "Name" },
        { field: "City", title: "City" }
    ]
});

What Does pageSize: 50 Mean?
pageSize: 50

Grid fetches 50 records at one time.

When user scrolls:

• Next 50 records load automatically
• Then next 50 records load

This improves:

• Performance
• Speed
• Memory usage

Server Side Data Fetch Example
Controller
public JsonResult GetStudents(int page, int pageSize)
{
    List<Student> list = new List<Student>();

    for (int i = 1; i <= 500; i++)
    {
        list.Add(new Student
        {
            StudentId = i,
            StudentName = "Student " + i,
            City = "London"
        });
    }

    var data = list.Skip((page - 1) * pageSize).Take(pageSize);

    return Json(data, JsonRequestBehavior.AllowGet);
}

Explanation
Skip((page - 1) * pageSize)

Skips previous records
Take(pageSize)
Fetches only 50 records

Why Use 50-50 Data Fetching?
If database has:

100000 records

Loading all data together makes application slow.

Using:
pageSize: 50
Only 50 records load at a time.

Advantages of Endless Scrolling

• Faster loading
• Better performance
• Smooth user experience
• Less memory usage

Complete Advanced Grid Example
$("#grid").kendoGrid({

    dataSource: {
        transport: {
            read: {
                url: "/Home/GetStudents",
                dataType: "json"
            }
        },

        pageSize: 50,

        serverPaging: true,
        serverSorting: true,
        serverFiltering: true
    },

    height: 550,

    pageable: true,

    sortable: true,

    filterable: true,

    groupable: true,

    reorderable: true,

    resizable: true,

    selectable: "row",

    scrollable: {
        endless: true
    },

    toolbar: ["search"],

    columns: [
        { field: "StudentId", title: "ID", width: 100 },
        { field: "StudentName", title: "Student Name" },
        { field: "City", title: "City" }
    ]
});

The Reasons for MVC?
In the field of software development, MVC is a new standard design pattern. It's simple to utilize ASP.NET MVC.Google offers dozens of resources to help us learn how to program and configure the code.However, it is always preferable to begin with Why rather than How.

ASP.NET Web Forms cannot be replaced by ASP.NET MVC.Microsoft offers a different method for creating an application.

ASP.NET Web Form Problems:

• Complexity:HTML and ASP.NET mark up code are used in a Single Page that's why code become very complex.
• Tightly Coupled-Aspx page and cs page(code behind file) are tightly coupled.so that we can not work separately.
• Unwanted Html and Java Script-when we drag and drop the controls then unwanted html and java script is automatically inserted in our code that's why page become heavier and it takes time to load on browser.
• View state-One of the main problems with ASP.NET web forms is the viewstate mechanism, which takes a lot of bandwidth because it serializes all the form inputs and sends it on post commands.
• Response Time -for any single events it follows the complete Page Life cycle Events life cycle that's why response time of any ASP.NET application is become more than the MVC application.

Benefits of MVC
Three are several benefits of using MVC are given below.

• Separation of Concerns -Separation of Concern is one of the core advantages of ASP.NET MVC . The MVC framework provides a clean separation of the UI , Business Logic , Model or Data. On the other hand we can say it provides Sepration of Program logic from the User Interface.
• More Control-The ASP.NET MVC framework provides more control over the HTML , JavaScript and CSS than the traditional Web Forms.
• Testability-ASP.NET MVC framework provides better testability of the Web Application and good support for the test driven development too.
• Lightweight-ASP.NET MVC framework doesn’t use View State and thus reduces the bandwidth of the requests to an extent.
• Full features of ASP.NET-One of the key advantages of using ASP.NET MVC is that it is built on top of ASP.NET framework and hence most of the features of the ASP.NET like membership providers , roles etc can still be used.

Using an example application, I will explain how to submit a collection in ASP.Net MVC 3. The fundamental principle of posting (carrying HTML field values from view to controller) is to match receiving parameters in the Controller's action method with the name field of the displayed HTML control.

Let's say I have a field in my Razor view called @Html.TextBox ("myName", "Peter") inside a form tag. When I submit the form, I can get the value "Peter" from the variable "myName" in the Controller's action function as follows:
    [HttpPost]  
    public ActionResult ReceveMyName(string myName)  
    {  
    }  

So in the following section I will describe how to post a collection from the view to the controller by a sample application using MVC razor view.

In the sample application we have the screen, where we can "Add" the status/comments in the text area. Once we "Add" the status, the same will be reflected in the down portion.

We have a "Save" button at the down that will save the entire collection to the database. Here the content we are updating in text area is a "Tweet" model.

Tweet Model
    public class Tweet  
    {  
        public Tweet()  
        {  
            Date = DateTime.UtcNow;  
        }  
        private DateTime date;  
        public int Id { get; set; }   
        public string UserName { get; set; }  
        public string Text { get; set; }        
        public DateTime Date  
        {  
            get { return date.ToLocalTime(); }  
            set { date = value; }  
        }  
    } 

Once we add the comments we need to post the entire "Collection of Tweets" and "Tweet" to the controller action. In other words, textarea refers to a single Tweet by the user and the down shows the list of tweets provided by all the followers and the user.

View Model
So our view model will be as in the following:
    public class TwitterViewModel  
    {  
        public Tweet Tweet { get; set; }  
        public IList<Tweet> Tweets { get; set; }  
    } 

Views
Our main view is "Tweets.cshtml" as in the following and which will render another partial view "_Alltweets.cshtml" by passing the model.

Tweets.cshtml
    @model MongoTwitter.ViewModels.TwitterViewModel  
    @{  
        ViewBag.Title = "Twitter";  
    }  
    <hgroup class="title">  
    <h2>What's happening</h2>  
    </hgroup>  
    <div style="width: 600px; border: 1px solid silver">  
        @using (Ajax.BeginForm("AddTweet", "Home", new AjaxOptions { UpdateTargetId = "AllTweets" }))  
        {   
            <div style="width: 600px; border-width: 1px">  
                @Html.TextAreaFor(md => md.Tweet.Text)  
                <input type="submit" value="Add" style="width: 70px; font-size: 12px" />  
            </div>  
            <div id="AllTweets">  
                @Html.Partial("_AllTweets", Model)  
            </div>  
        }  
    </div>

_AllTweets.cshtml

    @model MongoTwitter.ViewModels.TwitterViewModel  
    @using (Html.BeginForm("SaveTweet", "Home"))  
    {  
        <div style="height: 300px; width: 600px; overflow-y: auto">  
            <table border="1">  
                @if (Model != null && Model.Tweets != null)  
                {  
                    for (int i = 0; i < Model.Tweets.Count; i++)  
                    {  
                     
                    <tr style="vertical-align: top">  
                        <td style="font-size: 12px; padding-left: 2px">  
                            @Html.DisplayFor(modelItem => Model.Tweets[i].Date) -  
                            @Html.DisplayFor(modelItem => Model.Tweets[i].UserName) :  
                        </td>  
                        <td>  
                            @Html.Raw(Model.Tweets[i].Text.Replace("\r\n", "<br />"))  
                        </td>  
                    </tr>  
                    @Html.HiddenFor(modelItem => Model.Tweets[i].Id)   
                    @Html.HiddenFor(modelItem => Model.Tweets[i].Date)   
                    @Html.HiddenFor(modelItem => Model.Tweets[i].Text)   
                    @Html.HiddenFor(modelItem => Model.Tweets[i].UserName)   
                    }  
                }  
            </table>  
        </div>  
        <input type="submit" value="Save" style="float: right; width: 70px; font-size: 12px" />  
    }

The main things to note about "AllTweets.cshtml" is that, we have used a for loop to loop through all the items in the Tweets Collection for (int i = 0; i < Model.Tweets.Count; i++). Here by using developer tools if we inspect the rendered HTML, we will see that the name field of the entire collection matches what needs to be posted for that collection, like Tweets[1].Id, Tweets[2].Id etc. 

HTML rendered using For Loop
If we use a foreach loop instead of a for loop then the collection won't post because if we use a foreach loop then the name field for each item in the rendered HTML.

HTML rendered using foreach loop.

Another important thing to note in "_AllTweets.cshtml" is that we have used @Html.HiddenFor() for the fields like id, Date and Text, that are displayed using @Html.DisplayFor() just above. Since DisplayFor() won't post a value to the controller we use @Html.HiddenFor(). By clicking the "Add" button in "_AllTweets.cshtml" the following action will be called. Since the entire collection is posted back in "viewModel.Tweets", we will add the new Tweet into that collection and return the view with updated Model.

    /// <summary>  
    /// Add posted tweet from TweetViewModel to tweet collection  
    /// </summary>  
    /// <param name="viewModel"></param>  
    /// <returns></returns>  
    [HttpPost]  
    public ActionResult AddTweet(TwitterViewModel viewModel)  
    {  
        try  
        {  
            viewModel.Tweets.Add(viewModel.Tweet);  
            return PartialView("_AllTweets", viewModel);  
        }  
        catch  
        {  
            return View();  
        }  
    } 

In image above we can see the SaveTweet() post action, where "TwitterViewModel" is posted back, that has the value for all Tweets collections.