Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
530
igDialog with a igGrid with a unbound column problems with display field and sorting
posted

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(

"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(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?

  • 530
    Verified Answer
    posted

    so i manage to arrange a solution, if it is the better solution, i dont know, if it works..yes

    here goes the code..

    @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);


    })

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

    "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