Rank 1
Could someone please help:
I am reviewing ASP MVC Core using the Telerik KendoUI Grid for our company and I'm having an issue doing the following. I am trying to use an html select to send, via an ajax call, the selected count value to the controller to reload the grid with the amount of database rows in the count. I default the grid count to 50 on load with the following in _Layout.cshtml.
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="LocalOptions" asp-action="KendoTest" asp-route-count="50">KendoTest</a>
</li>
What is happening, is the grid loads with the 50 rows. Then, when I select from the drop down ie: 500, the ajax function calls the controller action and the parameter count and ViewData["SelectedOption"] are set to 500. Then in the Views first @{ } code block, the database call fires and repopulates the list CurrOptionData with the new list of data. The problem is that the Kendo grid never reloads with the new rows, it stays at the initial 50.
Note: I have tried using $("#dataGrid").data("kendoGrid").dataSource.read(); and $("#dataGrid").data("kendoGrid").refresh(); in the ajax success: but no change.
Any help would be greatly appreciated.
Thanks
Dave.
********* LocalOptionsController.cs *********
$("#dataGrid").data("kendoGrid").refresh(); public IActionResult KendoTest(int count)
{
ViewData["SelectedOption"] = count;
return View();
}
************ VIEW ************
@model List<Asp_Core_MVC.Models.CurrOption>
@inject IERNIEData _db
<div class="text-center">
<h1 class="display-4">Current Options</h1>
</div>
<br />
<div>
<div class="text-center">
@{
List<CurrOption>? CurrOptionData;
int countToDisplay = 50;
int loadedRows = 50;
countToDisplay = Convert.ToInt32(ViewData["SelectedOption"]);
loadedRows = countToDisplay;
CurrOptionData = await _db.GetCurrOptionsByCount(countToDisplay);
}
@if (CurrOptionData == null)
{
<p><em>Loading ...</em></p>
}
else
{
<table>
<tr>
<td style="padding: 0 15px; text-align: left; vertical-align: middle;">Sample Row Count:</td>
<td style="text-align: left; vertical-align: middle;"><label id="lblCount">@loadedRows</label></td>
</tr>
</table>
<br />
<div>
<table>
<tr>
<td style="padding: 0 15px; text-align: center;">
Select Current Options To Display:
</td>
<td style="text-align: center;">
<select name="options" id="OptionCount" style="height: 25px;">
<option value="">--Please choose an option--</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="10000">10000</option>
<option value="100000">100000</option>
<option value="200000">200000</option>
<option value="300000">300000</option>
<option value="400000">400000</option>
</select>
</td>
</tr>
</table>
</div>
<br /><br />
@(
Html.Kendo().Grid(CurrOptionData)
.Name("dataGrid")
.Columns(columns =>
{
columns.Bound(p => p.ID).Title("ID").Width(105);
columns.Bound(p => p.USID).Title("USID").Width(120);
columns.Bound(p => p.SellID).Title("SellID").Width(130);
columns.Bound(p => p.OptionID).Title("OptionID").Width(170);
})
.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
)
}
</div>
</div>
<script>
document.getElementById('OptionCount').addEventListener('change', function () {
var selectedValue = this.value;
$.ajax({
url: '@Url.Action("KendoTest", "LocalOptions")',
type: 'GET',
data: { count: selectedValue },
success: function () {
$("#dataGrid").data("kendoGrid").dataSource.read();
$("#dataGrid").data("kendoGrid").refresh();
//alert(selectedValue);
},
error: function () {
console.log('Error occurred during the AJAX call.');
}
});
});
</script>
1 Answer, 1 is accepted
Hi David,
Thank you for the thorough explanation of the approach that you are using.
Based on the code and the provided explanation it seems to me that you are using Local Model Binding upon the Grid initialization and then you are trying to switch to Remote Ajax binding.
To keep using that approach I recommend setting up a separate DataSource component that call the appropriate Read request at the back-end. Then when the user selects the page-size set the selected size to the DataSource and utilize the setDataSource method of the Grid to change the DataSource. This will ensure that when the read method of the DataSource is called the data response is bound properly to the Grid.
DataSource
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("dataSource1")
.Ajax(dataSource => dataSource
.PageSize(10)
.Events(ev => ev.Change("change"))
.Read(read => read.Action("BasicUsage_Products_Read", "DataSource"))
)
)
Handling the Change Event of the OptionCount element
document.getElementById('OptionCount').addEventListener('change', function () {
var selectedValue = this.value;
var grid = $("#dataGrid").data("kendoGrid");
grid.setDataSource("dataSource1");
grid.dataSource.pageSize(selectedValue);
grid.dataSource.read();
}); Alternatively, you can opt to use the Remote Data Binding approach entirely, eg:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
columns.Bound(p => p.Freight).Width(100);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)Please don't hesitate to let us know, if any questions related to the suggestions above arise.
Regards,
Stoyan
Progress Telerik