I want to call a js in my read action, and so far I can do it without problems, but now I need to pass the function several parameters. Is it posible?
I want to achieve something like this:
@(Html.Kendo().Grid<SGMTrade.DAL.ViewModels.OperacionesOCTPorFecha>()
.Name("grid2_#=row#")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones").Data(MyFunction( #=fecha_venc#,#=espe_codigo#,#=clas_codigo# ))))
)
.Columns(columns =>
{
columns.Bound(o => o.oper_numero).Title(Global.NumeroOperacion)
.ClientTemplate("<a href='\\\\\\#' onclick=\"showDetails('\\#=oper_numero\\#')\">\\#=oper_numero\\#</a>").HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.oper_forigen).Title(Global.FechaOrigen).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { @class = "grillaFecha" });
columns.Bound(o => o.espe_codigo).Title(Global.Especie).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.clas_codigo).Title(Global.Clase).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.clie_nombre).Title(Global.Cliente).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.tope_suma).Title(Global.CompraOVenta).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.oper_monto).Title(Global.Capital).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.oper_plazo).Title(Global.Plazo).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.Fecha_Vence).Title(Global.FechaVence).Format("{0:dd/MM/yyyy}").Hidden(true).HtmlAttributes(new { @class = "grillaFecha" });
columns.Bound(o => o.precio_transf).Title(Global.PrecioTransferencia).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.spread).Title(Global.Spread).HtmlAttributes(new { @class = "grillaNumero" });
})
This is actual code from a child grid that I'm using. The standard method for passing parameters is not working due to date format:
.Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones", new { fecha = "#=fecha_venc#", especie = "#=espe_codigo#", cliente = @ViewBag.cliente, clase = "#=clas_codigo#" }))
Thanks in advance
8 Answers, 1 is accepted
It is fine to send multiple parameters. You can find my comments and suggestions below:
- You should pass the data source field values from the main grid to the child's grid read method. I see, however, that the passed parameters to the read method are from the current grid. Can you ensure this is not the case?
- You should ensure to use the exact data source field names when passing the evaluated values. The field names are case sensitive as well. That being said you should unify the following names:
columns.Bound(o => o.Fecha_Vence).Title(Global.FechaVence).Format("{0:dd/MM/yyyy}").Hidden(true).HtmlAttributes(new { @class = "grillaFecha" });
.Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones", new { fecha = "#=fecha_venc#", especie = "#=espe_codigo#", cliente = @ViewBag.cliente, clase = "#=clas_codigo#" }))
Regards,
Danail Vasilev
Telerik by Progress
Hi Danail,
I'm passing values from the parent grid to the child grid, so that the name of the fields are different.
This is my whole code:
<div>
@(Html.Kendo().Grid(Model)
.Name("OperacionesOCTVigentes")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("OperacionesOCTVigentes_Read", "Operaciones")
.Data("ParametrosOCTVigentes"))
.PageSize(30)
.Aggregates(a =>
{
a.Add(p => p.Compras).Sum();
a.Add(p => p.Ventas).Sum();
a.Add(p => p.Neto).Sum();
a.Add(p => p.MTM).Sum();
})
)
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(foo => foo.fecha_venc).Title(Global.Fecha).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { @class = "grillaFecha" }); //this is the date field I need to pass to the child grid
columns.Bound(foo => foo.espe_codigo).Title(Global.Especie).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(foo => foo.clas_codigo).Title(Global.Clase).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(foo => foo.Compras).Title(Global.Compras).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" }).ClientFooterTemplate("#= kendo.format('{0:N}', sum)#");
columns.Bound(foo => foo.Compras_val).HtmlAttributes(new { @class = "grillaNumero" }).Hidden(true);
columns.Bound(foo => foo.PPCpas).Title(Global.PPCompras).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(foo => foo.Ventas).Title(Global.Ventas).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" }).ClientFooterTemplate("#= kendo.format('{0:N}', sum)#");
columns.Bound(foo => foo.Ventas_val).HtmlAttributes(new { @class = "grillaNumero" }).Hidden(true);
columns.Bound(foo => foo.PPVtas).Title(Global.PPVentas).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(foo => foo.Neto).Title(Global.Neto).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" }).ClientFooterTemplate("#= kendo.format('{0:N}', sum)#");
columns.Bound(foo => foo.Spread).Title(Global.Spread).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(foo => foo.MTM).Title(Global.Capital).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" }).ClientFooterTemplate("#= kendo.format('{0:N}', sum)#");
columns.Bound(foo => foo.pr_mercado).HtmlAttributes(new { @class = "grillaNumero" }).Hidden(true);
columns.Bound(foo => foo.DifPPCpas).Title(Global.DiferenciaPPCompras).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(foo => foo.DifPPVtas).Title(Global.DiferenciaPPVentas).HtmlAttributes(new { @class = "grillaNumero" });
})
.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
.ClientDetailTemplateId("template")
)
</div>
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<SGMTrade.DAL.ViewModels.OperacionesOCTPorFecha>()
.Name("grid2_#=row#")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones", new { fecha = "#=fecha_venc#", especie = "#=espe_codigo#", cliente = @ViewBag.cliente, clase = "#=clas_codigo#" }))
)
.Columns(columns =>
{
columns.Bound(o => o.oper_numero).Title(Global.NumeroOperacion)
.ClientTemplate("<a href='\\\\\\#' onclick=\"showDetails('\\#=oper_numero\\#')\">\\#=oper_numero\\#</a>").HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.oper_forigen).Title(Global.FechaOrigen).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { @class = "grillaFecha" });
columns.Bound(o => o.espe_codigo).Title(Global.Especie).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.clas_codigo).Title(Global.Clase).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.clie_nombre).Title(Global.Cliente).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.tope_suma).Title(Global.CompraOVenta).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.oper_monto).Title(Global.Capital).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.oper_plazo).Title(Global.Plazo).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.Fecha_Vence).Title(Global.FechaVence).Format("{0:dd/MM/yyyy}").Hidden(true).HtmlAttributes(new { @class = "grillaFecha" });
columns.Bound(o => o.precio_transf).Title(Global.PrecioTransferencia).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.spread).Title(Global.Spread).HtmlAttributes(new { @class = "grillaNumero" });
})
.Pageable()
.Sortable()
.Selectable()
.Scrollable(s => s.Height(100))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
.ToClientTemplate()
)
</script>
Since this works fine but the Date returns as a string in ISO format, I wanted to instead of passing parameters to the controller action, fire a js function that prepares everything, including making sure the controller recieves a date instead of a string. If there is a better way to solve this please let me know.
Thanks in advance
Thank you for the clarification.
You can examine the following resources which threats this issue:
- http://blog.falafel.com/passing-dates-kendo-ui-aspnet/
- http://stackoverflow.com/questions/5523870/pass-a-datetime-from-javascript-to-c-sharp-controller
Regards,
Danail Vasilev
Telerik by Progress
Thank you Danail.
What I want to do in order to achieve the desired functionality is the following: pass parameters in the .Data function inside the .Read Action, so that I avoid the MVC method which is not working for me. Is this possible? If it is, I'd need an example on how to implement it.
For ilustration purposes, what I need is to do something like this:
@(Html.Kendo().Grid<model>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("grid_read", "gridController").Data("MyFunction(parameters)"))))
)
.Columns(columns =>
{
})
<script>
myFunction(parameter){
//some code
}
</script>
Thanks
You can format the date inside the Data method like that:
cshtml:
.Read(read => read.Action("Read2", "Grid").Data(@<
text
>function() { return { fecha: "#= kendo.toString(fecha_venc, 'G') #" } }</
text
>));
public
ActionResult Read2([DataSourceRequest] DataSourceRequest request, DateTime fecha)
{
...
return
Json(GetData().ToDataSourceResult(request));
}
Regards,
Danail Vasilev
Telerik by Progress
Your snippet might help with my problem, but I just need to pass the forgeryToken and an integer from another control value on the page, like this:
.Read(r => r.Url("/Index?handler=Read").Data("forgeryToken", [integer here]))
What syntax would work?
I have tried this and failed:
.Read(r => r.Url("/Index?handler=Read").Data("additionalInfo"))
...
<script>
function additionalInfo() {
return {
forgeryToken: forgeryToken(),
Id: 2
}
}
function forgeryToken() {
return kendo.antiForgeryTokens();
}
</script>
Hi William,
If you would like to send additional parameters along with the anti-forgery token, you could do so with the following approach:
function forgeryToken() {
return $.extend(true, {}, kendo.antiForgeryTokens(), {text: text: t.text()});
}
In your case, you would have to replace the "text" property with the one on your side.
Kind regards,
Tsvetomir
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.