Bootstrap Tabs in MVC with kendo Grid example

Sagar Pallavi

Hi Team,

I am using Bootstrap tab control to display five tabs in MVC and my requirement is to display the data in a separate Kendo Grid on selection of a each tab. I created 5 partial view pages and added to my view.

I am getting always same number of records in each tab even tough my records are different for each tab. When I debug I could see diffrent rows however when I bind it is showing always same records.

Kindly provide a solution.

Thanks

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
At first you don't need any partial view , carefully follow my approach.

follow exactly what i suggest , in Kendo Grid perhaps you don't need command so uncomment those lines and add column names as the name of column in database table , create separate method to bind each grid in controller.
public ActionResult Panel()
        {
        return View();
        }

        2>Panel2>
        "~/Scripts/jquery-3.4.1.min.js">





            "#" data-id="Employee" class="bg-primary panel text-white">panel 1
            "#" data-id="Department" class="bg-primary panel text-white">panel 2
            "#" data-id="Manager" class="bg-primary panel text-white">panel 3
"main">
"panelEmployee" style="display:none;border:1px solid red">
paste grid 1 by copying my example

"panelDepartment" style="display: none; border: 1px solid red">

paste grid 2 by copying my example

"panelManager" style="display: none; border: 1px solid red">

paste grid 3 by copying my example

//Controller :- just an example if you dont use api its okk but always use DatasourceRequest

//otherwise kendo Grid will not bind and return json result

public ActionResult GetAllAccount([DataSourceRequest]DataSourceRequest req) // method 1 for 1st Grid

{

try

{

account = new AccountDetail();

var request = new RestRequest("/api/Account", Method.GET) { RequestFormat = DataFormat.Json };

var response = _client.Execute>(request);

if (response.Data == null)

throw new Exception(response.ErrorMessage);

return Json(response.Data.ToDataSourceResult(req), JsonRequestBehavior.AllowGet);

}

catch (Exception ex)

{

return Json(ex.Message);

}

// Partial view

@(Html.Kendo().Grid(Model)

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.AccountName).Title("Name").Width(200);

columns.Bound(c => c.AccountWebsiteUrl).Title("WebsiteUrl").Width(250).Filterable(false);

//columns.Bound(c => c.AccountDescription).Title("Description").Width(200);

columns.Bound(c => c.AccountOwner).Title("Owner").Width(250);

//columns.Bound(c => c.AccountParentNo).Title("ParentNo").Width(250);

columns.Bound(c => c.AccountContactNo).Title("ContactNo").Width(250);

//columns.Bound(c => c.AccountCompanyName).Title("CompanyName").Width(250);

//columns.Bound(c => c.City).Title("City").Width(250);

//columns.Bound(c => c.Country).Title("Country").Width(250);

//columns.Bound(c => c.AccountStatus).Title("Status").Width(250);

//columns.Bound(c => c.InsertedBy).Title("InsertedBy").Width(250);

//columns.Bound(c => c.InsertedOn).Title("InsertedOn").Width(250);

//columns.Bound(c => c.LastModifiedBy).Title("LastModifiedBy").Width(250);

//columns.Bound(c => c.LastModifiedOn).Title("LastModifiedOn").Width(250);

//columns.Bound(c => c.IsActive).Title("IsActive").Width(250);

//columns.Bound(c => c.IsDelete).Title("IsDelete").Width(250);

columns.Command(command => command.Custom("Edit").Click("editDetails")).Title("Modify").Width(30);

columns.Command(command => command.Custom("View").Click("showDetails")).Title("Details").Width(30);

columns.Command(c => { c.Destroy(); }).Title("Remove").Width(30);

})

//.Scrollable()

//.Events(e => e.DataBound("onRowBound"))

.Sortable()

.Filterable()

//.ColumnMenu()

//.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.Events(e => e.DataBound("onRowBound"))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.AccountId))

.PageSize(5)

// .Create(update => update.Action("AddAccount", "Account"))

// .Update(update => update.Action("UpdateAccount", "Account"))

// .Read(read => read.Action("GetAllAccount", "Account"))

// .Destroy(destroy => destroy.Action("DeleteAccount", "Account"))

)

.Resizable(resize => resize

.Columns(true)

)

.ToolBar(toolbar =>

{

toolbar.Custom().Name("newAdd").Text("+ Add Account ").Url("#").HtmlAttributes(new { id = "newAdd" });

})

.Pageable(pageable =>

{

pageable.Refresh(true);

pageable.PageSizes(true);

})

)

If you face any problem in Binding kendo grid then follow my article , i have written specially for MVC

https://www.sharpencode.com/article/KendoUI/bind-kendo-grid-with-server-side-data