Bootstrap Tabs in MVC with kendo Grid example

Question

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

Sachin Singh · Answer

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 >Panel 2 > "~/Scripts/jquery-3.4.1.min.js" > a { display : inline- block ; } "#" 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 $( ".panel" ).click(function () { debugger; var tabValue = $(this). attr ( "data-id" ); $( "#panel" + tabValue). show (); } }) }); //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 1 st 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