Hi, I've a page with 2 grids. Both of them has buttons to add elements, moreover I can pass data from one to the other. The problem that I've is that the grids data it's not reloaded. Once I try to reload the grids get empty and the function to load the data in the controller it's not called, also the code is showing I'm passing throught the dataSource.read(), the console.logs() are printed correctly. This was working 5 days ago, since then any change has been done on the cshtml and on the controller files.
Any help will be appreciated.
Thanks in advance.
These are my functions to reload the grids (javascript)
**************************************************************************************************
function reloadOrigenDestino(reloadALL = false) {
if (esOrigen == true || esOrigen == 'True' || reloadALL ) reload(true);
if (esOrigen == false || esOrigen == 'False' || reloadALL ) reload(false);
}
function reload(_esOrigen) {
if (_esOrigen) {
console.log('**** reload es origen');
$("#listaOrigen").data("kendoGrid").dataSource.read();
}
else {
console.log('*** reload es destino');
$("#listaDestino").data("kendoGrid").dataSource.read();
}
}
**************************************************************************************************
This is my html whith the 2 grids (both of them with different ids)
*************************************************************************************************
<!-- ************** GRID ORIGEN************** -->
<div class="bt_col_4">
<h3>@Estudios.labelForOrigen</h3>
@(Html.Kendo().Grid<Bogem.Areas.Estudios.Models.EstudiosOrigenDestinoVM>()
.Name("listaOrigen")
.Columns(columns =>
{
columns.Bound(c => c.IdOrigenDestino).Hidden(true);
columns.Bound(c => c.EsOrigen).Hidden(true);
columns.Bound(c => c.CodigoPostal).Visible(true);
columns.Bound(c => c.Poblacion).Visible(true);
columns.Bound(c => c.Alias).Visible(true);
columns.Bound(c => c.Punto).Visible(true);
columns.Bound(o => o.IdOrigenDestino).Title(Resources.Editar).Width(45).MinResizableWidth(45).Sortable(false).Filterable(false)
.ClientTemplate("<a href='javascript:(showAddEditOrigenDestino(#= IdOrigenDestino #, #= EsOrigen #));'><i class='k-icon k-i-edit k-icon-22'></i></a>")
.HtmlAttributes(new { style = "text-align: center" })
.Visible((bool)ViewData["canEdit"]).ToString();
columns.Bound(o => o.IdOrigenDestino).Title(Resources.Eliminar).Width(45).MinResizableWidth(45).Sortable(false).Filterable(false)
.ClientTemplate("<a href='javascript:(showDialogDeleteOrigenDestino(#= IdOrigenDestino #, #= EsOrigen #));'><i class='k-icon k-i-trash k-icon-22'></i></a>")
.HtmlAttributes(new { style = "text-align: center" })
.Visible((bool)ViewData["canDelete"]).ToString();
})
.ToolBar(toolbar =>
{
if ((bool)ViewData["canAdd"]) toolbar.Custom().IconClass("k-icon k-i-add k-icon-22").Text(Estudios.titleForAddOrigen).Url("#").HtmlAttributes(new { onclick = "showAddEditOrigenDestino(-1, '" + true + "');" });
})
.HtmlAttributes(new { style = "text-align: right" })
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains(Resources.filtroContains)
.IsEqualTo(Resources.filtroEqualTo)
.IsNotEqualTo(Resources.filtroNotEqualTo)
)
)
)
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Editable(edit => edit.Mode(GridEditMode.PopUp))
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.IdOrigenDestino))
.Read(read => read.Action("CargaListadoNuevo", "OrigenDestino", new { esOrigen = true }))
)
)
</div>
<!-- ************** GRID DESTINO ************** -->
<div class="bt_col_4">
<h3>@Estudios.labelForDestino</h3>
@(Html.Kendo().Grid<Bogem.Areas.Estudios.Models.EstudiosOrigenDestinoVM>()
.Name("listaDestino")
.Columns(columns =>
{
columns.Bound(c => c.IdOrigenDestino).Visible(false);
columns.Bound(c => c.EsOrigen).Visible(false);
columns.Bound(c => c.CodigoPostal).Visible(true);
columns.Bound(c => c.Poblacion).Visible(true);
columns.Bound(c => c.Alias).Visible(true);
columns.Bound(c => c.Punto).Visible(true);
columns.Bound(o => o.IdOrigenDestino).Title(Resources.Editar).Width(45).MinResizableWidth(45).Sortable(false).Filterable(false)
.ClientTemplate("<a href='javascript:(showAddEditOrigenDestino(#= IdOrigenDestino #, #= EsOrigen #));'><i class='k-icon k-i-edit k-icon-22'></i></a>")
.HtmlAttributes(new { style = "text-align: center" })
.Visible((bool)ViewData["canEdit"]).ToString();
columns.Bound(o => o.IdOrigenDestino).Title(Resources.Eliminar).Width(45).MinResizableWidth(45).Sortable(false).Filterable(false)
.ClientTemplate("<a href='javascript:(showDialogDeleteOrigenDestino(#= IdOrigenDestino #, #= EsOrigen #));'><i class='k-icon k-i-trash k-icon-22'></i></a>")
.HtmlAttributes(new { style = "text-align: center" })
.Visible((bool)ViewData["canDelete"]).ToString();
})
.ToolBar(toolbar =>
{
if ((bool)ViewData["canAdd"]) toolbar.Custom().IconClass("k-icon k-i-add k-icon-22").Text(Estudios.titleForAddOrigen).Url("#").HtmlAttributes(new { onclick = "showAddEditOrigenDestino(-1, '" + false + "');" });
})
.HtmlAttributes(new { style = "text-align: right" })
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains(Resources.filtroContains)
.IsEqualTo(Resources.filtroEqualTo)
.IsNotEqualTo(Resources.filtroNotEqualTo)
)
)
)
.Editable(edit => edit.Mode(GridEditMode.PopUp))
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.IdOrigenDestino))
.Read(read => read.Action("CargaListadoNuevo", "OrigenDestino", new { esOrigen = false }))
)
)
</div>
**************************************************************************************************
My read function from server
*************************************************************************************************
[BogemAuthorization(Option = OpcionesModulo.ESTU_G_ORGDEST, NivelAcceso = new TipoAcceso[] { TipoAcceso.Lectura })]
public ActionResult CargaListado([DataSourceRequest]DataSourceRequest request, bool esOrigen)
{
List<EstudiosOrigenDestinoBO> estudios = new List<EstudiosOrigenDestinoBO>();
if (esOrigen) estudios = _origenDestinoBL.GetOrigenes(GetCurrentEstudio()).ToList().Where(x => x.IdSysState == (int)SystemState.Active).ToList();
else estudios = _origenDestinoBL.GetDestinos(GetCurrentEstudio()).ToList().Where(x => x.IdSysState == (int)SystemState.Active).ToList();
foreach (EstudiosOrigenDestinoBO item in estudios)
{
item.Poblacion = _poblacionBL.GetPoblacion(item.IdPoblacion).Poblacion;
item.CodigoPostal = _codigoPostalBL.GetCodigoPostal(item.IdCP).CP;
}
DataSourceResult result = estudios.ToDataSourceResult(request, _estudios => new
{
IdOrigenDestino = _estudios.IdOrigenDestino,
IdEstudio = _estudios.IdEstudio,
EsOrigen = _estudios.EsOrigen,
IdCP = _estudios.IdCP,
IdPoblacion = _estudios.IdPoblacion,
Alias = _estudios.Alias,
Punto = _estudios.Punto,
IdSysState = _estudios.IdSysState,
CodigoPostal = _estudios.CodigoPostal,
Poblacion = _estudios.Poblacion
});
return Json(result);
}
8 Answers, 1 is accepted
Rank 1
Hi again,
I've been trying to solve this problem and I've seen that the grids are not found, I'm obtainning an error on the console. To achieve it I've changed how to reload the grids, and I've splited in 2 different calls to the server.
****** JAVACRIPT ******************************************************************************
function reloadOrigenDestino(reloadTodo = false) {
if (esOrigen == true || esOrigen == 'True' || reloadTodo) {
$("#listaOrigen").kendoGrid().dataSource.read()
}
if (esOrigen == false || esOrigen == 'False' || reloadTodo) {
$("#listaDestino").kendoGrid().dataSource.read()
}
}
****** CONSOLE.LOG ******************************************************************************
Uncaught TypeError: Cannot read property 'read' of undefined
at reloadOrigenDestino (OrigenDestino:388)
at Object.success (OrigenDestino:361)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at y (jquery.min.js:4)
at XMLHttpRequest.c (jquery.min.js:4)
****** GRID ORIGEN ******************************************************************************
@(Html.Kendo().Grid<Bogem.Areas.Estudios.Models.EstudiosOrigenDestinoVM>()
.Name("listaOrigen")
.Columns(columns =>
{
columns.Bound(c => c.IdOrigenDestino).Hidden(true);
columns.Bound(c => c.EsOrigen).Hidden(true);
columns.Bound(c => c.CodigoPostal).Visible(true);
columns.Bound(c => c.Poblacion).Visible(true);
columns.Bound(c => c.Alias).Visible(true);
columns.Bound(c => c.Punto).Visible(true);
columns.Bound(o => o.IdOrigenDestino).Title(Resources.Editar).Width(45).MinResizableWidth(45).Sortable(false).Filterable(false)
.ClientTemplate("<a href='javascript:(showAddEditOrigenDestino(#= IdOrigenDestino #, #= EsOrigen #));'><i class='k-icon k-i-edit k-icon-22'></i></a>")
.HtmlAttributes(new { style = "text-align: center" })
.Visible((bool)ViewData["canEdit"]).ToString();
columns.Bound(o => o.IdOrigenDestino).Title(Resources.Eliminar).Width(45).MinResizableWidth(45).Sortable(false).Filterable(false)
.ClientTemplate("<a href='javascript:(showDialogDeleteOrigenDestino(#= IdOrigenDestino #, #= EsOrigen #));'><i class='k-icon k-i-trash k-icon-22'></i></a>")
.HtmlAttributes(new { style = "text-align: center" })
.Visible((bool)ViewData["canDelete"]).ToString();
})
.ToolBar(toolbar =>
{
if ((bool)ViewData["canAdd"]) toolbar.Custom().IconClass("k-icon k-i-add k-icon-22").Text(Estudios.titleForAddOrigen).Url("#").HtmlAttributes(new { onclick = "showAddEditOrigenDestino(-1, '" + true + "');" });
})
.HtmlAttributes(new { style = "text-align: right" })
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains(Resources.filtroContains)
.IsEqualTo(Resources.filtroEqualTo)
.IsNotEqualTo(Resources.filtroNotEqualTo)
)
)
)
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Editable(edit => edit.Mode(GridEditMode.PopUp))
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.IdOrigenDestino))
.Read(read =>
{
read.Action("CargaListadoOrigen", "OrigenDestino");
})
)
)
****** GRID DESTINO ******************************************************************************
@(Html.Kendo().Grid<Bogem.Areas.Estudios.Models.EstudiosOrigenDestinoVM>()
.Name("listaDestino")
.Columns(columns =>
{
columns.Bound(c => c.IdOrigenDestino).Visible(false);
columns.Bound(c => c.EsOrigen).Visible(false);
columns.Bound(c => c.CodigoPostal).Visible(true);
columns.Bound(c => c.Poblacion).Visible(true);
columns.Bound(c => c.Alias).Visible(true);
columns.Bound(c => c.Punto).Visible(true);
columns.Bound(o => o.IdOrigenDestino).Title(Resources.Editar).Width(45).MinResizableWidth(45).Sortable(false).Filterable(false)
.ClientTemplate("<a href='javascript:(showAddEditOrigenDestino(#= IdOrigenDestino #, #= EsOrigen #));'><i class='k-icon k-i-edit k-icon-22'></i></a>")
.HtmlAttributes(new { style = "text-align: center" })
.Visible((bool)ViewData["canEdit"]).ToString();
columns.Bound(o => o.IdOrigenDestino).Title(Resources.Eliminar).Width(45).MinResizableWidth(45).Sortable(false).Filterable(false)
.ClientTemplate("<a href='javascript:(showDialogDeleteOrigenDestino(#= IdOrigenDestino #, #= EsOrigen #));'><i class='k-icon k-i-trash k-icon-22'></i></a>")
.HtmlAttributes(new { style = "text-align: center" })
.Visible((bool)ViewData["canDelete"]).ToString();
})
.ToolBar(toolbar =>
{
if ((bool)ViewData["canAdd"]) toolbar.Custom().IconClass("k-icon k-i-add k-icon-22").Text(Estudios.titleForAddDestino).Url("#").HtmlAttributes(new { onclick = "showAddEditOrigenDestino(-1, '" + false + "');" });
})
.HtmlAttributes(new { style = "text-align: right" })
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains(Resources.filtroContains)
.IsEqualTo(Resources.filtroEqualTo)
.IsNotEqualTo(Resources.filtroNotEqualTo)
)
)
)
.Editable(edit => edit.Mode(GridEditMode.PopUp))
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.IdOrigenDestino))
.Read(read =>
{
read.Action("CargaListadoDestino", "OrigenDestino");
})
)
)
****** CONTROLLER FUNCTIONS ******************************************************************************
[BogemAuthorization(Option = OpcionesModulo.ESTU_G_ORGDEST, NivelAcceso = new TipoAcceso[] { TipoAcceso.Lectura })]
public ActionResult CargaListadoOrigen([DataSourceRequest]DataSourceRequest request)
{
return CargaListado(request, true);
}
[BogemAuthorization(Option = OpcionesModulo.ESTU_G_ORGDEST, NivelAcceso = new TipoAcceso[] { TipoAcceso.Lectura })]
public ActionResult CargaListadoDestino([DataSourceRequest]DataSourceRequest request)
{
return CargaListado(request, false);
}
Thank you for the provided snippets.
The second reply has code in the reload functions which instead of getting the grids instances is initializing them:
// this is initializing $("#listaOrigen").kendoGrid();// this is getting the instance$("#listaOrigen").data("kendoGrid").dataSource.read();https://docs.telerik.com/aspnet-mvc/helpers/grid/overview#existing-instances
As far as the controller not being called is concerned, the first reply contains code which should be correctly interpreted, however the second one does not. Here is what is expected:
https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding
public ActionResult CargaListadoOrigen([DataSourceRequest]DataSourceRequest request){ var result = estudios.ToDataSourceResult(request); return Json(result);}Finally, if new items are created, a create action should also be defined and the controller should respond in the same way as it does for the read operation. Doing that, the grid will refresh out of the box and it will not be necessary to call read every time.
Have a look at the provided resources and provide any additional information which may be missing in the thread. For example, when is the reload function called and why? What is the behaviour if the custom attribute over the controller is removed? What is the desired outcome?
Look forward to hearing back from you.
Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1
Hi,
In the first post I'm calling the reloads like this:
$("#listaOrigen").data("kendoGrid").dataSource.read();$("#listaDestino").data("kendoGrid").dataSource.read();and the reloads are not working. In other grids of the app we are doing it like this and the grids are working properly.
When I add an item to one of the lists I'm loading a kendo window, once the data is filled in the window it's posted to the controller to save it on the database, then I must reload one of the grids. The same when we delete one element or when we move elements from Origen to Destino (then both of them must be reloaded), then appears a dialog advertising about you go to delete or move elements.
Moreover I'm looking https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding and on the examples any Create it's called, so why I should use it?
Thanks.
The relevant article for Ajax editing is available here and the Create action is in point 7:
https://docs.telerik.com/aspnet-mvc/helpers/grid/editing/ajax-editing
As far as reloading the Kendo UI Grid is concerned, can you let us know if you are still seeing any errors in the console?
If there are no errors, can you provide the following:
- showDialogDeleteOrigenDestino code snippet and relevant view
- showAddEditOrigenDestino code snippet and relevant view
- are you certain the function is being called
Finally, if you add the create and destroy operations to the grid data source, it will not be necessary to call the read at all - as the refresh will occur out of the box. This means simpler code and also a lot fewer requests going backwards and forwards. Here is the official demo with popup editing, you can see the controller code by selecting it in the TabStrip of the source:
https://demos.telerik.com/aspnet-mvc/grid/editing-popup
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1
Hi,
There are no errors in the console. All works fine unless when must execute the js call to reload the grids. The logs setted before the reload calls are printed correctly and only when are needed, but the reload it's not done.
When I'm adding/editing an element I need return a partialview to control the possible errors. If there are not errors I will close the window and reload the needed grids, but if there is an error I must mantain the partial view to show the errors.
I add the files so that you could see how the window and the dialog are loaded.
Thanks a lot.
Rank 1
Hi again,
At last I've found the problem. The problem wasn't on how the grids are loaded or modified. The problem was in the javascript. I was doing a jquery call to resize the heigtht of the grids instead of doing it in the grids styles:
OK:
.HtmlAttributes(new { style = "height: 440px; text-align: right" })KO: we are initializing the empty grid.
$("#listaOrigen, #listaDestino").kendoGrid({ height: 440});
Rank 1
Thanks for your help and the time spent on my problem, won't happen again.
Best regards.
I am pleased to hear that the issue is resolved and thank you for updating the thread.
Please feel free to reach out to us whenever you need to.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik