Is it me or infragistics doesnt like igDialog..
i have 2 grid that are fundamentaly the same(Column fields), except for some parameters like width,height...
One is inside a igDialog and the other isnt.
The one that isnt inside the dialog displays fine, the filter for the unbound field work, and the filter and ordering works fine..
The one that is inside the dialog , the headertext for the unbound column appears black instead of white, the filter and ordering doenst appear..
can anyone tell me what is the problem?
here goes the code..
@*aparecer uma grid com para os Hardware adquiridos *@ @( Html.Infragistics().Grid<LicenciamentoMVC.Models.Hardware>() .Caption("Hardware") .ID("gridHardware") .DefaultColumnWidth("200px") .PrimaryKey("IDHardware") .Columns(column => { column.For(x =>x.DescricaoHardware).DataType("string").HeaderText("Nome Produto"); column.For(x => x.NumeroSerie).DataType("string").HeaderText("Nr de Série"); column.For(x => x.VersaoFirmware).DataType("string").HeaderText("Versão Firmware"); column.For(x => x.CompraExterno).DataType("string").HeaderText("Compra Externa").Width("0px"); column.For(x => x.IDHardware).DataType("int").Width("0%"); column.Unbound(
"ValCompraExterna").Formula("GetValOfCompraExterna").DataType("string").HeaderText("Comprar Externa"); //formula: function CalculateTotal(data, grid) { return data["UnitPrice"] * data["UnitsInStock"]; }, template: "Total: ${Total}" }) .Features(features => { features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("NEXT"); features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("DescricaoHardware").AllowSorting(true);
}); features.Selection().MultipleSelection(false).Mode(SelectionMode.Row); features.Filtering().Mode(FilterMode.Simple); features.Updating() .EnableAddRow(false) .EnableDeleteRow(false) .EditMode(GridEditMode.None);
}) .AutofitLastColumn(true) .AutoGenerateColumns(true) .Render()) </div> </td> </tr>
</table>
@(Html .Infragistics() .Dialog() .State(DialogState.Closed) .ContentID("igDialog1AddHardware") .CloseOnEscape(false) .HeaderText("Adicionar Hardware") .ShowCloseButton(false) .CloseOnEscape(true) .Width("800px") .Modal(true) .Resizable(false) .Height("600px") .Render())
@* Dialgo box do adicionar *@<div id="igDialog1AddHardware"> @( Html.Infragistics().Grid<LicenciamentoMVC.Models.Hardware>() .Caption("Hardware") .ID("gridHardwareAvailable") .DefaultColumnWidth("200px") .PrimaryKey("IDHardware") .Columns(column => { column.For(x =>x.DescricaoHardware).DataType("string").HeaderText("Nome Produto"); column.For(x => x.NumeroSerie).DataType("string").HeaderText("Nr de Série"); column.For(x => x.VersaoFirmware).DataType("string").HeaderText("Versão Firmware"); column.For(x => x.CompraExterno).DataType("string").HeaderText("Compra Externa").Width("0px"); column.For(x => x.IDHardware).DataType("int").Width("0%"); column.Unbound(
}); features.Selection().MultipleSelection(true).Mode(SelectionMode.Row); features.Filtering().Mode(FilterMode.Simple); features.Updating() .EnableAddRow(false) .EnableDeleteRow(false) .EditMode(GridEditMode.None);
}) .AutofitLastColumn(true) .Width("100%") .Height("500px") .AutoGenerateColumns(true) .DataSourceUrl(Url.Action("ListarHardware")) .DataBind() .Render()) <input type="button" id="AddHardwareToProcesso" class="button-style" value="Adicionar Hardware" /> </div>
the images of the app
this grid display all the hardware devices, and enable us to choose, which ones do we want to add to the process..then the user press the button "Adicionar hardware"
after the user select the hardware and press the button this appears, the column"Comprar Externa" is a unbound Column..
The code of both grids are basicly the same, but as you can see there are diferences when showing, regardly the column "Comprar Externa"..
Is it because the grid is inside a dialog?
so i manage to arrange a solution, if it is the better solution, i dont know, if it works..yes
@using Infragistics.Web.Mvc@using System.Collections.Generic@model IEnumerable<LicenciamentoMVC.Models.Hardware>@{ ViewBag.Title = "CriarProcesso";}<script type="text/javascript"> function GetValOfCompraExterna(row, grid) { alert(row.CompraExterno); if (row.CompraExterno == true) return "Sim"; else return "Não"; } function GetValOfCompraExterna2(row2, grid2) { if (row2.CompraExterno == true)
return "Sim"; else return "Não"; } $(function () {
//botao adicionar hardware,abre dialog box para escolher quais os hardwares que quer adicionar $("#AddHardware").on('click', function (e) { $("#igDialog1AddHardware").igDialog("open"); $("#gridHardwareAvailable").igGrid("option", "dataSource", "/Processo/ListarHardware"); $("#gridHardwareAvailable").igGrid("dataBind"); });
$("#AddHardwareToProcesso").on('click', function (e) { var rowId; var ArrayRowSelected= []; var rows = $("#gridHardwareAvailable").igGridSelection("selectedRows"); $.each(rows, function (ix, row) { // getting the child grid selected row cell data rowId = row.element.attr("data-id"); ArrayRowSelected.push(rowId); }); //mandar o arrays com os ids dos equipamentos alert("A sua escolha de equipamentos foi gravada com sucesso.") //fechar a dialog box e fazer o bind da grid hardware do processo $("#gridHardware").igGrid("option", "dataSource", "/Processo/GravarHardwareSemProcesso?ID="+ArrayRowSelected); $("#gridHardware").igGrid("dataBind"); $("#igDialog1AddHardware").igDialog("close"); $("#DivGridHardware").show(); });
$("#ControllerButtonOk_CriarProcesso").on('click', function (e) { var ArrayRowOnGrid = []; var idCliente = 0; //vai buscar id idCliente = $("#comboClientes").igCombo("value"); // alert(idCliente); if (!idCliente) { $("#lblErrosCriarProcesso").text("Tem de escolher um cliente."); $("#lblErrosCriarProcesso").show();
} else {
//vai buscar Factura var NrFactura = $("#editNrFactura").val(); alert(NrFactura); if (!NrFactura) NrFactura = ""; //vai buscar a data var DataFactura = $("#editDataFactura").val(); if (!DataFactura) DataFactura = "1900/01/01 00:00:00"; //buscar os ids de hardware e guardar os dados var AllRowsOnGrid = $("#gridHardware").igGrid("allRows"); $(AllRowsOnGrid).each(function (index, row) {
// data key value IDHardware = $(row).closest('tr').attr("data-id"); alert(IDHardware); //ArrayRowOnGrid.push(parseInt(IDHardware)); ArrayRowOnGrid.push(IDHardware);
}); alert(ArrayRowOnGrid); if (ArrayRowOnGrid.length == 0) { $("#lblErrosCriarProcesso").text("Tem de escolher um ou mais equipamentos."); $("#lblErrosCriarProcesso").show(); } else { //fazer chamada ajax com os valores do formulario $.ajax({ type: "POST", url: "/Processo/SaveHardwareSemSoftware",
data: "{'IDCliente':'" + idCliente + "','NrFactura':'" + NrFactura + "','DataFactura':'" + DataFactura + "','IdsHardware':'" + ArrayRowOnGrid + "'}",
contentType: "application/json; charset=utf-8", dataType: "json", success: successFunc, error: errorFunc }); } } function successFunc(data, status) { if (data == 0) { window.location.replace("/Processo/Index"); } } function errorFunc() { alert('Ocurreu um erro inesperado, por favor tente novamente.'); }
});
});</script><h2>Criar Processo</h2>
<table border="1" style="width: 100%;"> <tr style="width: 100%"> <td style="width: 100%" colspan="3"> <input type="button" id="ControllerButtonOk_CriarProcesso" class="button-style" value="OK" /> <input type="button" id="ControllerButtonCancel_CriarProcesso" class="button-style" value="Cancelar" /> </td> </tr> <tr style="width: 100%"> <td> <label id="lblErrosCriarProcesso" style="color: red; display: none;"></label> </td> </tr> <tr style="width: 100%"> <td style="width: 50%"> <label for="txt_Nome">Nome</label> @(Html.Infragistics().Combo(). ID("comboClientes"). TextKey("Nome"). AutoComplete(false). FilteringType(ComboFilteringType.Local). RenderMatchItemsCondition(ComboRenderMatchItemsCondition.StartsWith). ValueKey("IDCliente").DataSourceUrl(Url.Action("clientes-combo")). DataBind(). Render()) </td>
<td style="width: 50%"> <div id="dataFactura" style="display: none"> <label for="lblDataCriacao">Data de Criação de Processo</label> <label for="lblData"></label> </div>
</td> </tr> <tr style="width: 100%"> <td style="width: 50%"> <label for="txt_NrFactura">Número de Factura</label> <input id="editNrFactura" type="text" aria-labelledby="Nome-ariaLabel" class="required" title="Nr de Factura. This is a required field" /> </td>
<td style="width: 50%">
<label for="lblDataFactura">Data da Factura</label> <input id="editDataFactura" type="text" aria-labelledby="Nome-ariaLabel" class="required" />
</td> </tr> <tr style="width: 100%"> <td style="width: 100%" colspan="3"> <input type="button" id="AddSoftware" class="button-style" value="Adicionar Software" /> <input type="button" id="AddHardware" class="button-style" value="Adicionar Hardware" /> </td> </tr> <tr> <td style="width: 100%" colspan="3"> <div id="GridSoftware" style="display:none"> <h1> Software</h1> @*aparecer uma grid com para os software adquiridos *@ @( Html.Infragistics().Grid<LicenciamentoMVC.ModelsView.ProcessoCliente>() .Caption("Software") .ID("grid1") .DefaultColumnWidth("200px") .PrimaryKey("IDLicenca") .Columns(column => { column.For(x =>x.NomeCliente).DataType("string").HeaderText("Nome Produto").Width("50%"); column.For(x => x.DataInserido).DataType("DateTine").HeaderText("Data de Criação do Processo").Width("25%"); column.For(x => x.NomeCliente).DataType("string").HeaderText("Estado").Width("25%"); column.For(x => x.IDProcesso).DataType("int").Width("0%"); }) .Features(features => { features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("NEXT"); features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("NomeCliente").AllowSorting(true);
}); features.Selection().MultipleSelection(false).Mode(SelectionMode.Row); features.Filtering().Mode(FilterMode.Simple); features.Updating() .EnableAddRow(false) .EnableDeleteRow(true) .EditMode(GridEditMode.None);
}) .AutofitLastColumn(false) .Width("100%") .AutoGenerateColumns(true) .DataBind() .Render()) </div> </td> </tr> <tr> <td style="width: 100%" colspan="3"> <div id="DivGridHardware" style="display:none" > <h1> Hardware</h1> @*aparecer uma grid com para os Hardware adquiridos *@ @( Html.Infragistics().Grid<LicenciamentoMVC.Models.Hardware>() .Caption("Hardware") .ID("gridHardware") .DefaultColumnWidth("200px") .PrimaryKey("IDHardware") .Columns(column => { column.For(x =>x.DescricaoHardware).DataType("string").HeaderText("Nome Produto"); column.For(x => x.NumeroSerie).DataType("string").HeaderText("Nr de Série"); column.For(x => x.VersaoFirmware).DataType("string").HeaderText("Versão Firmware"); column.For(x => x.CompraExterno).DataType("string").HeaderText("Compra Externa").Width("0px"); column.For(x => x.IDHardware).DataType("int").Width("0%"); column.Unbound(
"ValCompraExterna").DataType("string").Formula("GetValOfCompraExterna").HeaderText("Comprar Externa"); //formula: function CalculateTotal(data, grid) { return data["UnitPrice"] * data["UnitsInStock"]; }, template: "Total: ${Total}" }) .Features(features => { features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("NEXT"); features.Sorting().Mode(SortingMode.Single); features.Selection().MultipleSelection(false).Mode(SelectionMode.Row); features.Filtering().Mode(FilterMode.Simple); features.Updating() .EnableAddRow(false) .EnableDeleteRow(false) .EditMode(GridEditMode.None);
"ValCompraExterna2").Formula("GetValOfCompraExterna2").DataType("string").HeaderText("Comprar Externa"); //formula: function CalculateTotal(data, grid) { return data["UnitPrice"] * data["UnitsInStock"]; }, template: "Total: ${Total}" }) .Features(features => { features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("NEXT"); features.Sorting().Mode(SortingMode.Single); features.Selection().MultipleSelection(true).Mode(SelectionMode.Row); features.Filtering().Mode(FilterMode.Simple); features.Updating() .EnableAddRow(false) .EnableDeleteRow(false) .EditMode(GridEditMode.None);
}) .AutofitLastColumn(true) .Width("100%") .Height("500px") .AutoGenerateColumns(true) .Render()) <input type="button" id="AddHardwareToProcesso" class="button-style" value="Adicionar Hardware" /> </div>
the solution is to bind the data to the grid on a button click instead on binding it when the page start..
$("#AddHardware").on('click', function (e) { $("#igDialog1AddHardware").igDialog("open"); $("#gridHardwareAvailable").igGrid("option", "dataSource", "/Processo/ListarHardware"); $("#gridHardwareAvailable").igGrid("dataBind"); });
Thanks