How disable enter key in ejs grid in dialog template

[Henrique]

Hello, how do I disable enter key of save in dialog template, whenever I press this key it adds the product to the grid, below is a snippet of code:

Page of Grid:

<div id="gridParent" class="testediv">

            @{

                <ejs-grid id="gridProd" width="100%" checkBoxChange="true" dataBound="dataBound" allowResizing="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" locale="en-US" actionBegin="begin" actionComplete="actionComplete">

                    @if (Model.registro == 0 || Model.ped_status == 'A')

                    {

                        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>

                    }

                    else

                    {

                        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>

                    }

                    <e-data-manager url="/PedidoVenda/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/PedidoVenda/Insert" updateUrl="/PedidoVenda/Update2" removeUrl="/PedidoVenda/Remove"></e-data-manager>

                    <e-grid-aggregates>

                        <e-grid-aggregate>

                            <e-aggregate-columns>

                                <e-aggregate-column field="TNFeInfNFeDet.prod.qCom" format="N4" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>

                            </e-aggregate-columns>

                        </e-grid-aggregate>

                        <e-grid-aggregate>

                            <e-aggregate-columns>

                                <e-aggregate-column field="vTotal" format="N4" type="Sum" footerTemplate="${Sum}"></e-aggregate-column>

                            </e-aggregate-columns>

                        </e-grid-aggregate>

                    </e-grid-aggregates>

                    <e-grid-columns>

                        <e-grid-column type="checkbox" minWidth="42" maxWidth="42"></e-grid-column>

                        <e-grid-column field="Material.registro" headerText="CÓD." textAlign="Center"></e-grid-column>

                        <e-grid-column field="referencia" headerText="REF." width="130" textAlign="Center" isPrimaryKey="true"></e-grid-column>

                        <e-grid-column field="descricao" headerText="DESCRIÇÃO"></e-grid-column>

                        <e-grid-column field="TNFeInfNFeDet.prod.uCom" headerText="UND" textAlign="Center"></e-grid-column>

                        @*<e-grid-column field="R$" headerText="MOEDA"></e-grid-column>*@

                        <e-grid-column field="preco_tabela" headerText="V. TAB." type="number" format="N4"></e-grid-column>

                        <e-grid-column field="TNFeInfNFeDet.prod.qCom" headerText="QTD" type="number" format="N4"></e-grid-column>

                        <e-grid-column field="TNFeInfNFeDet.prod.vUnCom" headerText="V. UNIT" type="number" format="N4" allowResizing="true" autoFit="true"></e-grid-column>

                        <e-grid-column field="preco_ipi" headerText="V. IPI" type="number" format="N4" allowResizing="true" autoFit="true"></e-grid-column>

                        <e-grid-column field="preco_st" headerText="V. ST" type="number" format="N4" allowResizing="true" autoFit="true"></e-grid-column>

                        <e-grid-column field="aliq_ipi" headerText="IPI" minWidth="60" maxWidth="60"></e-grid-column>

                        <e-grid-column field="variacaoDesconto" headerText="DSC%"></e-grid-column>

                        <e-grid-column field="comissao" headerText="COM"></e-grid-column>

                        <e-grid-column field="vTotal" headerText="TOTAL"></e-grid-column>

                        <e-grid-column field="max_entrega" headerText="ENTREGA" type="date" format="dd/MM/yyyy" edit-type="Datepicker"></e-grid-column>

                        @*<e-grid-column field="EDT" headerText="EDITAR" template="#edit" textAlign="Center"></e-grid-column>

                    <e-grid-column field="DEL" headerText="DELETAR" template="#delete" textAlign="Center"></e-grid-column>*@

                    </e-grid-columns>

                </ejs-grid>

                <script id='dialogtemplate' type="text/x-template">

                    <div id="dialogTemp">

                    </div>

                </script>

</div>

Page Partial View:

@using Syncfusion.EJ2;

<div>

    <input id="vendedorComissaoPartial" asp-for="json_string" disabled type="hidden" />

    <input id="buscouproduto" value="0" type="hidden" />

</div>

<div class="row">

    <div class="col-md-12">

        <div class="form-group">

            @Html.Raw(@ViewBag.Alert)

        </div>

    </div>

</div>

@if (ViewBag.AlertMessage != null)

{

    <script>alert('Erro');</script>

}

<script type="text/javascript">

        var editasalva = false;

        var popup;

    function buscarProduto() {

        var listVend = document.getElementById('cboVendedor').ej2_instances[0];

        popup = window.open(('@Url.Action("PedConsultaProduto", "PedidoVenda")') + "?txtCodigo=" + document.getElementById("txtCodigo1").value + "®Par=" + document.getElementById("regpar").value + "®Vend=" + listVend.value, "Popup", "width=900,height=800");

            popup.focus();

        };

        function buscaProdutoSemSubmit(campo) {

            var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

            if (keyCode == 13) {

                if (campo == 'txtCodigo1') {

                    buscarProduto();

                }

                if (!e) var e = window.event;

                e.cancelBubble = true;

                e.returnValue = false;

                if (e.stopPropagation) {

                    e.stopPropagation();

                    e.preventDefault();

                }

            }

    };

    function descontoComercialProgressivo(dValor, descontos) {

            var dPercentual = 0;

            var dTotal = dValor;

        for (porcentagem of descontos.split("+")) {

        dPercentual = porcentagem / 100;

        dTotal = dTotal - (dPercentual * dTotal);

    }

    return dTotal;

    };

</script>

<div>

    <input id="dsOperacao" asp-for="OperacaoFiscal.codigo" type="hidden" disabled />

    <input id="dsTabela" asp-for="TabelaMaterial.registro" type="hidden" disabled />

</div>

<div class="container">

    <div class="row">

        <div class="form-group col-md-2">

            <div class="e-float-input e-control-wrapper">

                <input asp-for="Material.registro" type='text' onkeypress="buscaProdutoSemSubmit('txtCodigo1')" id="txtCodigo1" />

                <span class="e-float-line"></span>

                <label asp-for="Material.registro" class="e-float-text e-label-top">Código</label>

            </div>

        </div>

        <div class="form-group col-md-2">

            <div class="e-float-input e-control-wrapper">

                <input id="txtRefMaterial1" asp-for="referencia" type='text' disabled />

                <span class="e-float-line"></span>

                <label asp-for="referencia" class="e-float-text e-label-top">Referencia</label>

            </div>

        </div>

        <div class="form-group col-md-6">

            <div class="e-float-input e-control-wrapper">

                <input id="dsMaterial1" asp-for="descricao" disabled />

                <span class="e-float-line"></span>

                <label asp-for="descricao" class="e-float-text e-label-top">Descrição</label>

            </div>

        </div>

        <div class="form-group col-md-1">

            <div class="e-float-input e-control-wrapper">

                <input id="txtUnidade1" asp-for="TNFeInfNFeDet.prod.uCom" disabled />

                <span class="e-float-line"></span>

                <label asp-for="TNFeInfNFeDet.prod.uCom" class="e-float-text e-label-top">UN</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtQuantidade" asp-for="TNFeInfNFeDet.prod.qCom" onkeypress="buscaProdutoSemSubmit('txtQuantidade')" />

                <span class="e-float-line"></span>

                <label asp-for="TNFeInfNFeDet.prod.qCom" class="e-float-text e-label-top">Quantidade</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input type="hidden" id="regTab" asp-for="TabelaMaterial.ProdutoTabela.registro" /> <input id="txtMaxTab" asp-for="precotab_max" type="number" asp-format="{0:0.0000}" disabled />

                <span class="e-float-line"></span>

                <label asp-for="precotab_max" class="e-float-text e-label-top">V. Tabela</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtPrecoUnitario" asp-for="TNFeInfNFeDet.prod.vUnCom" type="number" asp-format="{0:#.####}" disabled onblur="DescontoInverso()" />

                <span class="e-float-line"></span>

                <label asp-for="TNFeInfNFeDet.prod.vUnCom" class="e-float-text e-label-top">V. Unit.</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtDesconto" asp-for="d_comercial" disabled onblur="VerificaDesconto()" />

                <span class="e-float-line"></span>

                <label asp-for="d_comercial" class="e-float-text e-label-top">D. Comercial</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtIpi" asp-for="aliq_ipi" disabled />

                <span class="e-float-line"></span>

                <label asp-for="aliq_ipi" class="e-float-text e-label-top">IPI</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtIcms" asp-for="aliq_icms" disabled />

                <span class="e-float-line"></span>

                <label asp-for="aliq_icms" class="e-float-text e-label-top">ICMS</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtDescontoValor" asp-for="vDesc" type="number" asp-format="{0:0.0000}" disabled />

                <span class="e-float-line"></span>

                <label asp-for="vDesc" class="e-float-text e-label-top">V. Comercial</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtFrete" asp-for="vFrete" type="number" asp-format="{0:0.0000}" disabled />

                <span class="e-float-line"></span>

                <label asp-for="vFrete" class="e-float-text e-label-top">Frete</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtSeguro" asp-for="vSeg" type="number" asp-format="{0:0.0000}" disabled />

                <span class="e-float-line"></span>

                <label asp-for="vSeg" class="e-float-text e-label-top">Seguro</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtOutro" asp-for="vOutro" type="number" asp-format="{0:0.0000}" disabled />

                <span class="e-float-line"></span>

                <label asp-for="vOutro" class="e-float-text e-label-top">O. Despesas</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtComissao" asp-for="comissao" disabled />

                <span class="e-float-line"></span>

                <label asp-for="comissao" class="e-float-text e-label-top">Comissão</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtPrecoTotal" asp-for="TNFeInfNFeDet.prod.vProd" type="number" asp-format="{0:0.0000}" disabled />

                <span class="e-float-line"></span>

                <label asp-for="TNFeInfNFeDet.prod.vProd" class="e-float-text e-label-top">V. Total</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtMinEntrega" type="date" asp-for="min_entrega" disabled />

                <span class="e-float-line"></span>

                <label asp-for="min_entrega" class="e-float-text e-label-top">Min. Entrega</label>

            </div>

        </div>

        <div class="form-group col-md-3">

            <div class="e-float-input e-control-wrapper">

                <input id="txtMaxEntrega" type="date" asp-for="max_entrega" name="max_entrega" disabled />

                <span class="e-float-line"></span>

                <label asp-for="max_entrega" class="e-float-text e-label-top">Max. Entrega</label>

            </div>

        </div>

        <div class="form-group col-md-2">

            <div class="e-float-input e-control-wrapper">

                <input id="txtminEntrega" asp-for="TNFeInfNFeDet.prod.xPed" disabled />

                <span class="e-float-line"></span>

                <label asp-for="TNFeInfNFeDet.prod.xPed" class="e-float-text e-label-top">xPed</label>

            </div>

        </div>

        <div class="form-group col-md-2">

            <div class="e-float-input e-control-wrapper">

                <input id="txtItemXped" asp-for="TNFeInfNFeDet.prod.nItemPed" disabled />

                <span class="e-float-line"></span>

                <label asp-for="TNFeInfNFeDet.prod.nItemPed" class="e-float-text e-label-top">Item xPed</label>

            </div>

        </div>

    </div>

</div>

[Vinitha Balasubramanian]

Hi Customer ,

Greetings from Syncfusion support.

Query : How disable enter key in ejs grid in dialog template.

Based on your requirement , We have achieved the enter key disable action while save the change in dialogTemplate edit form using actionComplete event . On that event we get the ("Enter ") key code and perform stopPropogation method on that key code ("Enter").

Please refer the below code for your reference .

<ejs-grid id="Grid" actionComplete=”actionComplete” dataSource="ViewBag.datasource" allowGrouping="true" allowPaging="true">

            <e-grid-columns>

                <e-grid-column field="Inventor" headerText="Inventor Name" width="140"></e-grid-column>

                <e-grid-column field="NumberofPatentFamilies" headerText="No of Patent Families" width="185" textAlign="Right"></e-grid-column>

                <e-grid-column field="Country" headerText="Country" width="120"></e-grid-column>

                <e-grid-column field="Active" headerText="Active" width="130"></e-grid-column>

                <e-grid-column field="Mainfieldsofinvention" headerText="Main fields of invention" allowGrouping="false" width="200"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

 

<script>

 

function actionComplete(args) {

  if (args.requestType === 'beginEdit') {

    args.form.addEventListener('keydown', function (e) {

      var key = e.key || e.keyCode;

      if (key === 'Enter') {

        alert('No Enter');

        e.stopPropagation();

      }

    });

  }

}

 

</script>

Kindly get back to us if you need further assistance on this.

Regards,

Vinitha Balasubramanian

[Henrique]

Thanks for the feedback, but the event doesn't start. Code snippet in bold does not fire (Alert('No Enter'); and Enter keeps working

Debugging skip the code in this block args.form.addEventListener('keydown', function (e) {

Here is the complete code:



           function actionComplete(args) {
                        if (args.requestType === 'beginEdit') {
                            args.form.addEventListener('keydown', function (e) {
                                var key = e.key || e.keyCode;
                                if (key === 'Enter') {
                                    alert('No Enter');
                                    e.stopPropagation();
                                }
                            });
                        }
                ej.serverTimezoneOffset = 0;
                ej.data.DataUtil.serverTimezoneOffset = 0;
                ej.parseDateInUTC = false;
                var dialog = args.dialog;
                // setting the height and max height of the dialog elements
                dialog.height = 658;
                dialog.element.style.maxHeight = "658px"
                dialog.width = 658;
                dialog.element.style.maxWidth = "658px"
                if (args.requestType === 'beginEdit' || args.requestType === 'add') {
                    if (args.data.TNFeInfNFeDet.prod.qCom <= 0) {
                        alert('Favor inserir a quantidade vendida');
                        args.cancel = true;
                    }
                    let spinner = ej.popups.createSpinner({ target: args.dialog.element });
                    ej.popups.showSpinner(args.dialog.element);
                }
                    if (args.requestType === 'beginEdit') {
                        var listObj = document.getElementById('cboOperacao').ej2_instances[0];
                        var listEmp = document.getElementById('cboEmpresa').ej2_instances[0];
                        var listVend = document.getElementById('cboVendedor').ej2_instances[0];
                        var listTabela = document.getElementById('cboTabelaPreco').ej2_instances[0];


                    // Called the partial view elements
                    var ajax = new ej.base.Ajax({
                        url: "@Url.Action("Editpartial", "PedidoVenda")?codop=" + listObj.value + "®empresa=" + listEmp.value + "®vendedor=" + listVend.value + "®tabela=" + listTabela.value,
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({ value: args.rowData })
                    });
                    ajax.send().then(function (data) {
                        appendElement(data, args.form); //Render the edit form in newly created template with the selected record
                        args.form.elements.namedItem('referencia').focus();
                       ej.popups.hideSpinner(args.dialog.element);
                    }).catch(function (xhr) {
                        console.log(xhr);
                        ej.popups.hideSpinner(args.dialog.element);
                    });
                }
                if (args.requestType === 'add') {
                    /*  var sope = {{ cboOperacao.get('cboOperacao').value }}; // document.getElementById("cboOperacao").value;*/
                    //var select = document.getElementById('cboOperacao');
                    //var value = select.value;


                    var listObj = document.getElementById('cboOperacao').ej2_instances[0];
                    var listEmp = document.getElementById('cboEmpresa').ej2_instances[0];
                    var listVend = document.getElementById('cboVendedor').ej2_instances[0];
                    var listTabela = document.getElementById('cboTabelaPreco').ej2_instances[0];
                    var ajax = new ej.base.Ajax({
                        url: "@Url.Action("Addpartial","PedidoVenda")?codop=" + listObj.value + "®empresa=" + listEmp.value + "®vendedor=" + listVend.value + "®tabela=" + listTabela.value,
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({ value: args.rowData })
                    });
                    ajax.send().then(function (data) {
                        appendElement(data, args.form); 
                        args.form.elements.namedItem('referencia').focus();
                        ej.popups.hideSpinner(args.dialog.element);
                    }).catch(function (xhr) {
                        console.log(xhr);
                        ej.popups.hideSpinner(args.dialog.element);
                    });
                }
    }

[Vinitha Balasubramanian]

Hi Customer,

Thanks for your update.

Based on your update , we  ensured the reported scenario our sample unfortunately we are unable to reproduce the reported issue at our end. We suspect that the issue occurs because of many functionalities executed inside the actionComplete event.

We request you to ensure the reported issue by clear the excess code in that event and try the code snippet alone to check whether the actionComplete event works or not ?

If you are still facing the reported issue, kindly get back to us with simple issue reproducible sample along with updated Grid code example. Also share a video demonstration of the issue with us to proceed further.

Regards,

Vinitha Balasubramanian