kendo-tabstrip-load-content-from-partial-view

Updated : Oct 31, 2019 in Articles

kendo tabstrip load content from partial view

In this article, we will learn about kendo tabstrip load content from partial view step by step

implementation steps

  1. Create A mode Class
  2. Implementing a controller and view

Step 1: Create A model class

Go to model folder in Add class name as Customer following the given snippet code

 public class Customer
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

Step 2: Implementing a controller and view

Right-click on controller folder Add controller name as GridInTabStripController Add following given Snippet code

In the Select Action method, I created dummy data to bind the grid, you will try to connect in your database.

the grid action method we will be requested via ajax by the tabstrip when the user clicks the ‘Grid’ tab and Displays the partial view that contains the grid – ~/Views/GridInTabStrip/Grid.cshtml

 public ActionResult Index()
        {
            return View();
        }
      
        [HttpPost]
        public ActionResult Select([DataSourceRequest]DataSourceRequest request)
        {
            // Creating dummy data to bind the grid 
            var data = Enumerable.Range(1, 50)
                                 .Select(index => new Customer
                                 {
                                     ID = index,
                                     Name = "Customer #" + index
                                 });

            return Json(data.ToDataSourceResult(request));
        }
      
        public ActionResult Grid()
        {
            return PartialView();
        }

implementation tabstrip load content from partial view

Go to GridInTabStripController create a view for the index action method

@{
    ViewBag.Title = "Home Page";
}
@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(tabs =>
    {
        tabs.Add().Text("First").Content("Select the 'Grid' tab");
        tabs.Add().Text("Grid").LoadContentFrom("Grid", "GridInTabStrip");
    })
)

Go to GridInTabStripController create a view for the Grid action method

@(Html.Kendo().Grid<SavingItemsState.Models.Customer>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ID).Width(200);
            columns.Bound(c => c.Name);
        })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Select", "GridInTabStrip"))
        )
)

Output:

Note: if you are trying to change controller name and action methods you should be change at view level also

Above example Grid is static data right now we will discuss kendo tabstrip load content from partial view form database

Create a table name like Categories by using given below SQL Query and dump some dummy data in your table

CREATE TABLE [dbo].[Categories](
	[CategoryID] [int] IDENTITY(1,1) NOT NULL,
	[CategoryName] [nvarchar](15) NOT NULL,
	[Description] [ntext] NULL,
	)

go to your project right-click and Add Ado.net Entity data mode

 tabstrip load content from partial view
tabstrip load content from partial view

Replace select index action method to give below updated code

 [HttpPost]
        public ActionResult Select([DataSourceRequest]DataSourceRequest request)
        {
            List<SavingItemsState.Entity.Category> data = context.Categories.ToList();
            DataSourceResult result = data.ToDataSourceResult(request, p => new SavingItemsState.Entity.Category
            {
                CategoryID = p.CategoryID,
                CategoryName = p.CategoryName,
                Description = p.Description,
            });
            return Json(result, JsonRequestBehavior.AllowGet);
        }

OUTPUT:

tabstrip load content from partial view

Summary

In this article, we are learned about tabstrip load content from partial view 1. Grid data loaded from statically created data and 2. Grid data loaded from SQL dataBase

For more References you will go through given below links also

TabStrip loading partial view having multiple levels of partial views

Partial View In MVC With Kendo UI TabStrip

Next article we will see how to bind JSON data to kendo grid in MVC

Latest posts by DuttaluruVijayakumar (see all)
Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x