This is a migrated thread and some comments may be shown as answers.

[Solved] How do I can to collapse editable row in Grid?

0 Answers 72 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Deise
Top achievements
Rank 1
Deise asked on 30 Jul 2012, 06:55 PM
Hi;
I have a grid where is possible to edit values.
That is my grid:
@(Html.Telerik().Grid(Model.grid)
.Name("GridProcessoImportacao")
.DataKeys(keys =>
{
    keys.Add(p => new { p.Referencia, p.Numero });
})
.DataBinding(b => b.Ajax().Select("Grid", "ProcessoImportacao"))
.Columns(columns =>
{
    columns.Bound(p => p.Numero).Width(400).Title("Numero").Hidden(true);
    columns.Bound(p => p.Referencia).Width(400).Title("Referência");
    columns.Bound(p => p.Empresa).Width(400).Title("Empresa");
    columns.Bound(p => p.PrevisaoEmbarque).Width(400).Title("Data de Previsão de Embarque").Format("{0:dd/MM/yyyy}");
})
 
.DetailView(detail => detail.ClientTemplate("" +
    Html.Telerik().Grid(Model.gridProcessos)
    .Name("GridProcesso_<#= Numero #>")
    .DataKeys(dkeys => dkeys.Add(o => o.Processo))
    .DataBinding(binding => binding.Ajax().Select("GridProcessos", "ProcessoImportacao", new { Numero = "<#= Numero #>" }).Delete("Delete","ProcessoImportacao"))
    .Columns(col =>
    {
        col.Bound(x => x.OrdemNumero)
            .ClientTemplate("" +
            "<input id='Save_<#= OrdemNumero #>' name='Save_<#= OrdemNumero #>' type='submit' value='' " +
            "style='background:transparent url(../Content/Images/saveitem.png) no-repeat center left;width:25px;border:0;cursor:pointer;' " +
            "alt='Salvar' onclick='Salvar();' />")
            .Title("")
            .Width(50)
            .ReadOnly()
            .Filterable(false);
        col.Bound(x => x.OrdemNumero).Hidden(true);
        col.Bound(x => x.OrdemItemNumero).Title("Número Item").Width(120).ReadOnly();
        col.Bound(x => x.Descricao).Title("Descrição").Width(550);
        col.Bound(x => x.PrecoItem).Title("Preço").Format("{0:N}").Width(100);
        col.Bound(x => x.Quantidade).Title("Quantidade").Width(110);
        col.Bound(x => x.QuantidadeRecebida).Title("Quantidade Recebida").Width(200);
        col.Bound(x => x.Remessa).Title("Remessa").Width(100);
        col.Bound(x => x.CodigoProduto).Title("Código do Produto").Width(180);
        col.Bound(x => x.Processo).Title("Processo").Width(120);
        col.Bound(x => x.QuantidadeFatura).Title("Quantidade Fatura").Width(200);
        col.Bound(x => x.DataNotaFiscal).Title("Data Nota Fiscal").Width(140).Format("{0:dd/MM/yyyy}");
        col.Bound(x => x.DataChegadaPorto).Title("Chegada Porto").Width(140).Format("{0:dd/MM/yyyy}");
        col.Bound(x => x.DataPrevisaoBooking).Title("Previsão Booking").Width(140).Format("{0:dd/MM/yyyy}");                   
    })               
    .ClientEvents(events => events.OnSave("OnSaveProcesso").OnDataBinding("OnDataBindingProcesso").OnError("GridProcessoOnError"))
    .Pageable(p => p.Enabled(false))
    .Editable(editable => editable.BeginEdit(GridBeginEditEvent.DoubleClick).Mode(GridEditMode.InLine))
    .Selectable()
    .Filterable()
    .KeyboardNavigation(k => k.EditOnTab(true))
    ))
.ClientEvents(events => events.OnDataBinding("OnDataBinding"))
.Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
.Pageable(paging => paging.Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom).PageSize(20))
.Filterable()
.Editable(x => x.BeginEdit(GridBeginEditEvent.DoubleClick).Mode(GridEditMode.InLine))
.Scrollable(scrool => scrool.Height(380).Enabled(true))
.Selectable()
.TableHtmlAttributes(new { style = "width:auto" })
)
In the DetailView is possible to edit the values of columns and when the user press Enter the method OnSaveProcesso is called.
function OnSaveProcesso(e) {   
    if (e.dataItem != null) {
 
        var param = {
            OrdemNumero: e.dataItem.OrdemNumero,
            Processo: e.dataItem.Processo,
            OrdemItemNumero: e.dataItem.OrdemItemNumero,
            Descricao: e.dataItem.Descricao,
            PrecoItem: e.dataItem.PrecoItem,
            Quantidade: e.dataItem.Quantidade,
            QuantidadeRecebida: e.dataItem.QuantidadeRecebida,
            QuantidadeFatura: e.dataItem.QuantidadeFatura,
            Remessa: e.dataItem.Remessa,
            CodigoProduto: e.dataItem.CodigoProduto,
            DataNotaFiscal: e.dataItem.DataNotaFiscal,
            DataChegadaPorto: e.dataItem.DataChegadaPorto,
            DataPrevisaoBooking: e.dataItem.DataPrevisaoBooking
        };
 
 
        $.ajax({
            url: "ProcessoImportacao/UpdateOrdensItens",
            type: "POST",
            data: JSON.stringify(param),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            async: false,
            success: function (retorno) {
                if (!retorno.success) {
                    alert(retorno.error);
                } else {
                    alert('Registro(s) atualizado(s) com sucesso!');
                    var nameGrid = '#' + e.currentTarget.id;
                    $(nameGrid).data('tGrid').rebind();
                }
            },
            error: function (request, textStatus, errorThrown) { }
        })
 
    }
}
It works very well but I want to add a button to collapse column when the user is editing the values, like a "Cancel Button".
Any idea?

Thanks and Best Regards.
Tags
Grid
Asked by
Deise
Top achievements
Rank 1
Share this question
or