user153923
Reputation:
data changes using Kendo Grid on ASP.NET MVC
In my controller, I have 1 main method that returns all of the data and 2 other methods that return subsets of the data:
public class ReportController : Controller
{
public ActionResult Index(String reportID, String reportName) {
return View();
}
[HttpPost]
public async Task<JsonResult> ReadReport([DataSourceRequest] DataSourceRequest request) {
var result = new DataSourceResult();
try {
var report = await _portal.ReadReport(_reportID);
result = report.ToDataSourceResult(request);
} catch (Exception err) {
result.Errors = err.Message;
}
return new JsonResult { Data = result, MaxJsonLength = Int32.MaxValue };
}
[HttpPost]
public async Task<JsonResult> ReadReportElectric([DataSourceRequest] DataSourceRequest request) {
var result = new DataSourceResult();
try {
var report = await _portal.ReadReport(_reportID);
var specific = report.Where(m => m.MeterType == "Electric");
var meters = new Domain.GapMeters();
meters.AddRange(specific);
result = meters.ToDataSourceResult(request);
} catch (Exception err) {
result.Errors = err.Message;
}
return new JsonResult { Data = result, MaxJsonLength = Int32.MaxValue };
}
[HttpPost]
public async Task<JsonResult> ReadReportGas([DataSourceRequest] DataSourceRequest request) {
var result = new DataSourceResult();
try {
var report = await _portal.ReadReport(_reportID);
var specific = report.Where(m => m.MeterType == "Gas");
var meters = new Domain.GapMeters();
meters.AddRange(specific);
result = meters.ToDataSourceResult(request);
} catch (Exception err) {
result.Errors = err.Message;
}
return new JsonResult { Data = result, MaxJsonLength = Int32.MaxValue };
}
}
In the View, I have a Kendo TabStrip. The first strip shows all records, while the other 2 tabs show "Electric" and "Gas":
@(Html.Kendo().Window().Name("help-window").Visible(false).Title("Report Help").Resizable().Draggable().Height(540).Width(960).Content(@<text>
<h3 class="panel-title">@GapReportResource.GapReport</h3>
@(Html.Partial("~/Views/Shared/_Help.cshtml", new ViewDataDictionary { { "reportName", ViewBag.ReportName } }))
</text>))
<div id="divPieChart" class="panel-heading">
<h3 id="h3PieChart" class="panel-title" style="display: inline;">@ReportResource.ReportPieChart</h3>
<a id="ahrefPieChart" title="Show report help" class="far fa-question-circle" style="display: inline; margin-left: 10px;"></a>
<figure id="report-chart" class="ReportChart"></figure>
</div>
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In)))
.Events(e => e
.Show("onTabShow")
.Select("onTabSelect")
.Activate("onTabActivate")
.Error("onTabError")
)
.Items(tabstrip =>
{
tabstrip
.Add()
.Selected(true)
.Content(@<text>
<div class="panel-heading">
<h3 class="panel-title">@ReportResource.Report</h3>
</div>
<div class="panel-body">
@(Html.Kendo().Grid<DataAnalysis.Domain.Meter>()
.Name("grid")
.Columns(c => {
c.Bound(o => o.Parent).Title("Parent");
c.Bound(o => o.Account).Title("Account");
c.Bound(o => o.CustomerName).Title("Customer Name");
c.Bound(o => o.Address).Title("Address");
c.Bound(o => o.MeterNumber).Title("Meter Number");
c.Bound(o => o.MeterType).Title("Meter Type");
c.Bound(o => o.StartDate).Title("Start Date");
c.Bound(o => o.EndDate).Title("End Date");
c.Bound(o => o.Count).Title("Count");
})
.Sortable(o => o.SortMode(GridSortMode.SingleColumn))
.Pageable(p => p.Numeric(false).PreviousNext(false))
.Messages(m => m.NoRecords(""))
.Resizable(resizable => resizable.Columns(true))
.Scrollable(s => s.Endless(true))
.ToolBar(x => x.Custom().Text("Export").HtmlAttributes(new { href = "#", id = "export" }))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadReport", "Report"))
.PageSize(20)
.Events(e1 => {
e1.RequestStart("onDataBound");
e1.Error("onError");
})
.ServerOperation(false) // Paging, sorting, filtering and grouping is done client side
)
.AutoBind(false)
.Events(e => e.DataBound("onDataBound"))
</div>
</text>)
.Text("All");
tabstrip
.Add()
.Content(@<text>
<div class="panel-heading">
<h3 class="panel-title">@ReportResource.ReportElectric</h3>
</div>
<div class="panel-body">
@(Html.Kendo().Grid<DataAnalysis.Domain.Meter>()
.Name("gridElectric")
.Columns(c => {
c.Bound(o => o.Parent).Title("Parent");
c.Bound(o => o.Account).Title("Account");
c.Bound(o => o.CustomerName).Title("Customer Name");
c.Bound(o => o.Address).Title("Address");
c.Bound(o => o.MeterNumber).Title("Meter Number");
c.Bound(o => o.MeterType).Title("Meter Type");
c.Bound(o => o.StartDate).Title("Start Date");
c.Bound(o => o.EndDate).Title("End Date");
c.Bound(o => o.Count).Title("Count");
})
.Sortable(o => o.SortMode(GridSortMode.SingleColumn))
.Pageable(p => p.Numeric(false).PreviousNext(false))
.Resizable(resizable => resizable.Columns(true))
.Scrollable(s => s.Endless(true))
.ToolBar(x => x.Custom().Text("Export").HtmlAttributes(new { href = "#", id = "export" }))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadReportElectric", "Report"))
.PageSize(20)
.Events(e1 => {
e1.RequestStart("onDataBound");
e1.Error("onError");
})
.ServerOperation(false) // Paging, sorting, filtering and grouping is done client side
)
.AutoBind(false)
.Events(e => e.DataBound("onDataBound"))
</div>
</text>)
.Text("Electric");
tabstrip
.Add()
.Content(@<text>
<div class="panel-heading">
<h3 class="panel-title">@ReportResource.ReportGas</h3>
</div>
<div class="panel-body">
@(Html.Kendo().Grid<DataAnalysis.Domain.Meter>()
.Name("gridGas")
.Columns(c => {
c.Bound(o => o.Parent).Title("Parent");
c.Bound(o => o.Account).Title("Account");
c.Bound(o => o.CustomerName).Title("Customer Name");
c.Bound(o => o.Address).Title("Address");
c.Bound(o => o.MeterNumber).Title("Meter Number");
c.Bound(o => o.MeterType).Title("Meter Type");
c.Bound(o => o.StartDate).Title("Start Date");
c.Bound(o => o.EndDate).Title("End Date");
c.Bound(o => o.Count).Title("Count");
})
.Sortable(o => o.SortMode(GridSortMode.SingleColumn))
.Pageable(p => p.Numeric(false).PreviousNext(false))
.Resizable(resizable => resizable.Columns(true))
.Scrollable(s => s.Endless(true))
.ToolBar(x => x.Custom().Text("Export").HtmlAttributes(new { href = "#", id = "export" }))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadReportGas", "Report"))
.PageSize(20)
.Events(e1 => {
e1.RequestStart("onDataBound");
e1.Error("onError");
})
.ServerOperation(false) // Paging, sorting, filtering and grouping is done client side
)
.AutoBind(false)
.Events(e => e.DataBound("onDataBound"))
</div>
</text>)
.Text("Gas");
})
)
In the jQuery, I have these 2 functions that are giving me fits and I can't figure them out. The first one onTabShow fires whenever a different tab is selected. It is making the database call, but the data it is returning in edata is the whole web page!
There is also an onDataBound function that only seems to fire the first time the data is loaded on the main tab. For some reason, it does not fire at all whenever either of the other tabs are selected.
function onTabShow(e) {
var tab = $('#tabstrip > ul > li.k-item.k-state-default.k-tab-on-top.k-state-active > span.k-link');
if (tab !== null) {
var tabText = tab.text();
var hashId = '#grid';
if (tabText == 'All') {
hashId = '#grid';
} else if (tabText == 'Electric') {
hashId = '#gridElectric';
} else if (tabText == 'Gas') {
hashId = '#gridGas';
}
var grid = $(hashId).data('kendoGrid');
console.log('onTabShow $(hashId) = ');
console.log(grid);
if (grid !== undefined) {
$.ajax({
url: GapReportsNS.GapReport,
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (edata) {
console.log('onTabShow(' + hashId + '): edata = ');
console.log(edata);
grid.setDataSource(new kendo.data.DataSource({
data: edata
}));
}
});
}
}
};
function onDataBound(e) {
var emptySpan = $('.empty-span');
emptySpan.text('');
$("#UP").toggle(false);
var tab = $('#tabstrip > ul > li.k-item.k-state-default.k-tab-on-top.k-state-active > span.k-link');
if (tab !== null) {
var tabText = tab.text();
var hashId = undefined;
if (tabText == 'All') {
hashId = undefined; // not necessary for 'All' (maybe, unless coming back from one of the specifics)
} else if (tabText == 'Electric') {
hashId = '#gridElectric';
} else if (tabText == 'Gas') {
hashId = '#gridGas';
}
if (hashId !== undefined) {
console.log('onDataBound (hashId): ' + hashId);
var grid = $(hashId).data('kendoGrid');
if (grid !== undefined) {
//grid.dataSource.read();
//if (this.dataSource.data.length > 1) {
// for (var i = 0; i < this.columns.length; i++) {
// this.autoFitColumn(i);
// }
//}
}
}
}
};
Could someone please help? These are new technologies for me.
Upvotes: 0
Views: 1012
Answers (1)
SylvainB2347
Reputation: 349
For your question regarding the events. Below are the links explaining what those two events do.
- For the tabStrip events : https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/events/show
- For the grid events : https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound
Here in your code, you don't need to do anything in your dataBound event.
For the rest :
You should start by writing your controler action the same way it is described on the documentation : https://demos.telerik.com/aspnet-mvc/grid/remote-data-binding
public ActionResult ReadReportElectric([DataSourceRequest]DataSourceRequest request)
{
try {
var report = await _portal.ReadReport(_reportID);
var specific = report.Where(m => m.MeterType == "Electric");
var meters = new Domain.GapMeters();
meters.AddRange(specific);
return Json(meters.ToDataSourceResult(request));
} catch (Exception err) {
// You can return an empty list of your items here
var meters = new List<>();
// You can specify the error you want to be returned in your error event handler
ModelState.AddModelError(string.Empty, "Error : " + err.ToString());
return Json(meters.ToDataSourceResult(request));
}
}
If I understand correctly, what you want to do is reload the content of each grid whenever the tab is shown ?
Then to do so, you can do the following on your on onTabShow event :
function onTabShow(e) {
var tab = $('#tabstrip > ul > li.k-item.k-state-default.k-tab-on-top.k-state-active > span.k-link');
if (tab !== null) {
var tabText = tab.text();
var hashId = '#grid';
if (tabText == 'All') {
hashId = '#grid';
} else if (tabText == 'Electric') {
hashId = '#gridElectric';
} else if (tabText == 'Gas') {
hashId = '#gridGas';
}
var grid = $(hashId).data('kendoGrid');
console.log('onTabShow $(hashId) = ');
console.log(grid);
if (grid !== undefined) {
grid.dataSource.read();
}
}
};
Upvotes: 1
Related Questions
- Change kendo grid data with ajax call
- How do I update my KendoUI Grids datasource from the controller?
- Using Kendo Grid in MVC with AJAX
- Kendo UI MVC. How to update Grid and add new value in $('#Grid').data('kendoGrid').dataSource.read()
- Issue with kendo, no data in the grid
- Kendo UI grid update
- Kendo Grid MVC - Refreshing child / detail grid
- Kendo Grid Ajax Data binding
- Asp.Net MVC KendoUI grid
- populate kendo ui grid in Javascript