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
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
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