Hi,
i have 2 igDataPicker, and a igGrid, i'm using version 2011.2, MVC3, my question is, how I can change the DataSourceUrl in runtime, because I need to spend the entire table, just information filtered by the dates DatePicker.
And another question, Can i refresh my grid, without refreshing the entire page?
thanks in advance.
Regards
There are two ways to refresh (rebind) the grid without reloading the whole page:
1) by setting a dataSource , on the client, that's data which you already got from somewhere:
$("#grid").igGrid('option', 'dataSource', yourDataSourceObject);
2) By calling dataBind(), which will either rebind to the dataSource (if set locally), or call the url, if the data source is a url string:
$("#grid").igGrid('dataBind');
Before calling dataBind, you can always change the url:
$("#grid").igGrid('option', 'dataSource', 'your new data source URL');
By the way, if you want the data source / grid to take care of building the url for you, you can just add the filtering params by using the urlParamsEncoded event. Not sure if this will work with your setup, but it should, if you just need to change the filtering params:
$("#grid").data("igGrid").dataSource.settings.urlParamsEncoded = function (owner, params) {
params.filteringParams.$filter = params.filteringParams.$filter + "new params here or just replace $filter completely";
};
Let me know if this helps. Thanks,
Angel
Hi Angel.
i descript for you my scenary, in my view i have de 2 igdatepicker, but i have 2 grids for 2 diferent actions in a partialview's ("Calc" and "Find"), for this i have 2 methods, and the problem is when the page is load, i don't have choice of the datepicker, and my grids are in blank.
i hace actions in javascript for execute the methods, but the grid don refresh, i'm trying with this code in my view Index:
@model IQueryable<ComisionesModels.viewCalculo>@using Infragistics.Web.Mvc;@using ComisionesViews.Helpers; @{ ViewBag.Title = " "; Layout = "~/Views/Shared/_Layout.cshtml";}
<script type="text/javascript"> $(window).load(function () { $('#FechaInicio').igDatePicker({ width: 200, dateInputFormat: 'date', regional: 'en-US', required: true, nullText: 'Ingrese fecha de inicio' });
$('#FechaFin').igDatePicker({ width: 200, dateInputFormat: 'date', regional: 'en-US', required: true, nullText: 'Ingrese fecha de fin' }); $("#btnCalcular").igButton({ labelText: $("#btnCalcular").val() }); $("#btnBusqueda").igButton({ labelText: $("#btnBusqueda").val() }); });</script><script type="text/javascript"> function hacerCalculo() { var fecha1 = document.getElementById("FechaInicio").value; var fecha2 = document.getElementById("FechaFin").value; var adress = @Script.Action("Calculo", "ComisionesCalculadas", new { fechainicio = "js:fecha1", fechafin = "js:fecha2"}); // window.location = adress $("#Busqueda").css("display", "none"); $("#Calculo").css("display", "block"); } function busqueda() { var fInicio = document.getElementById("FechaInicio").value; var fFin = document.getElementById("FechaFin").value; var adress = @Script.Action("Busqueda", "ComisionesCalculadas", new { fechainicio = "js:fInicio", fechafin = "js:fFin"}); $("#Calculo").css("display", "none"); $("#Busqueda").css("display", "block"); //window.location = adress }</script><h2>Calculo de Comisiones</h2><div id="controles"> <fieldset> <legend></legend> <br /> <table style=" width: 850px"> <tr> <td></td> <td></td> <td><strong>Fecha Inicio:</strong></td> <td><input id="FechaInicio" type="text" /></td> <td></td> <td><strong>Fecha Fin:</strong></td> <td><input id="FechaFin" type="text" /></td> <td></td> <td></td> <td><input id="btnCalcular" type="button" value="Calcular" onclick="hacerCalculo()" /></td> <td><input id="btnBusqueda" type="button" value="Busqueda" onclick="busqueda()" /></td> </tr> </table> </fieldset></div> <div id="Calculo" style="display: none"> @Html.Partial("_CalculoPartial") </div> <div id="Busqueda" style="display: none"> @Html.Partial("_BusquedaPartial") </div>
In the partialviews the code is only for the grid:
@model IQueryable<ComisionesModels.viewCalculo>@using Infragistics.Web.Mvc;
<script type="text/javascript"> $(document).ready(function () { $("#gridBusqueda").live('dataBind'); });</script>
@using (Html.BeginForm("Busqueda", "ComisionesCalculadas")){ @(Html.Infragistics().Grid(Model).ID("gridBusqueda").Width("900px").Columns(columns => { columns.For(x => x.idEmpleadosEventos).HeaderText("idEmpleadosEventos").Width("150px"); columns.For(x => x.FechaEvento).HeaderText("FechaEvento").Width("120px"); columns.For(x => x.idEmpleado).HeaderText("idEmpleado").Width("100px"); columns.For(x => x.idRol).HeaderText("idRol").Width("100px"); columns.For(x => x.idEventoPago).HeaderText("idEventoPago").Width("110px"); columns.For(x => x.idPlaza).HeaderText("idPlaza").Width("100px"); columns.For(x => x.idTipoLote).HeaderText("idTipoLote").Width("100px"); columns.For(x => x.idVentanilla).HeaderText("idVentanilla").Width("100px"); columns.For(x => x.idHipoteca).HeaderText("idHipoteca").Width("100px"); columns.For(x => x.MontoOperacion).HeaderText("MontoOperacion").Width("130px").DataType("currency"); columns.For(x => x.FechaCalculo).HeaderText("FechaCalculo").Width("130px"); columns.For(x => x.TipoPago).HeaderText("TipoPago").Width("100px"); columns.For(x => x.CantidadPago).HeaderText("CantidadPago").Width("120px"); columns.For(x => x.MontoPago).HeaderText("MontoPago").Width("100px"); columns.For(x => x.PorcentajeComision).HeaderText("PorcentajeComision").Width("150px"); columns.For(x => x.MontoComision).HeaderText("MontoComision").Width("130px"); columns.For(x => x.EstatusEnviado).HeaderText("EstatusEnviado").Width("130px"); }) .Features(features => { features.Sorting(); features.Paging().PageSize(10).FirstPageLabelText("").FirstPageTooltip("Ir a primera pagina").PrevPageLabelText("").PrevPageTooltip("Ir a pagina Anterior").ShowPagerRecordsLabel(false) .LastPageLabelText("").LastPageTooltip("Ir a Ultima pagina").NextPageLabelText("").NextPageTooltip("Ir a Siguiente pagina").PageSizeDropDownLabel("Mostrar").PageSizeDropDownTrailingLabel("Registros"); features.Filtering().FilterButtonLocation(Location.Left) .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Empleado").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("FechaEvento").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("idEmpleado").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("idRol").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("idEventoPago").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("idPlaza").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("idTipoLote").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("idVentanilla").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("idHipoteca").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("MontoOperacion").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("FechaCalculo").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("TipoPago").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("CantidadPago").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("MontoPago").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("PorcentajeComision").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("MontoComision").AllowFiltering(true).FilterCondition("startsWith"); settings.ColumnSetting().ColumnKey("EstatusEnviado").AllowFiltering(true).FilterCondition("startsWith"); }); features.Hiding().ColumnChooserCaptionText("Elegir Columna").ColumnHideText("Ocultar Columna").ColumnChooserDisplayText("Elegir Columna") .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Empleado").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("FechaEvento").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("idEmpleado").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("idRol").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("idEventoPago").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("idPlaza").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("idTipoLote").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("idVentanilla").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("idHipoteca").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("MontoOperacion").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("FechaCalculo").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("TipoPago").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("CantidadPago").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("MontoPago").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("PorcentajeComision").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("MontoComision").Hidden(false).AllowHiding(true); settings.ColumnSetting().ColumnKey("EstatusEnviado").Hidden(false).AllowHiding(true); }); }) .Height("300") .DataSourceUrl(Url.Action("Busqueda")) .DataBind().Render() )}
if i put this code in a normal view, works, the iggrid can't run in a partial view?
i hope you can helpme.
Christhian
Hi Christian,
What are you trying to achieve with his line?
$("#gridBusqueda").live('dataBind');
Probably you meant $("#gridBusqueda").igGrid("dataBind") ?
If it doesn't work, i suggest to contact Development support for a more indepth investigation of your issue, because i am not sure what could get wrong - the grid shouldn't have any compatibility issues with the MVC Partial Views.
Thank you,
I resolve it, i only need change the code in my json for this:
$.getJSON("/ComisionesCalculadas/Calculo",{ fechainicio: fInicio, fechafin: fFin },function (json) { $("#grid").igGrid("dataSourceObject", json);$("#grid").igGrid("dataBind");}, "json");
and that works.
thanks for all.
well completing the solution.
My controller look like this:
[HttpGet] public JsonResult Calculo(string fechainicio, string fechafin) { DateTime fechaInicio = Convert.ToDateTime(fechainicio); DateTime fechaFin = Convert.ToDateTime(fechafin);
//this line its only for execute a stored procedured db.spComisionesCalcular(fechaInicio, fechaFin);
// var calculo = this.busquedaFiltrada(fechaInicio, fechaFin); return Json(calculo, JsonRequestBehavior.AllowGet); }
i hope this help anyone.
I'm trying to do the same of what you speak in this post.Copy what you said here:
$('#grid1').igGrid('dataSourceObject', '/Prueba/PagingGetData');
$('#grid1').igGrid('dataBind');
But I get errors in the browser console.At the beginning, my grid is DataSourceUrl:
. DataSourceUrl (Url.Action ("PagingGetDataPais")). DataBind (). Render ())
And when I try to modify it in runtime, I get errors like:
Uncaught Error: There was an error parsing/evaluating the JSON string: Unexpected token / infragistics.js:51
To fix this error, remove the code:
Now when I try paging, and the application is debug, I see that is entering the url: "PagingGetDataPais".After changing the DataSourceObject, I make an alert in the code and I see that has changed, but does not enter the url: "PagingGetData"
Thanks in advance.
Best Regards