Stuck in edit mode

[Fayçal HANNOUN]

Hello,

I have a Grid that is bound to a local list of JS objects. The grid itself is within a dialog (modal). When i enter edit mode, unless clicking on another grid row, i am stuck in edit mode no matter what key i press.

Can you please tell me how to fix this issue ?

Thank you.

Note:

The grid works perfectly fine on a regular page (not contained within a dialog)

[Thavasianand Sankaranarayanan]

Hi Faycal, 

We have validated the reported issue “stuck the Grid while editing the Grid inside of Dialog component” with provided the information but it is unsuccessful. Could you please share the below details to us it will help to validate further. 

1. Share the code example of Grid rendering code example with Dialog
2. If possible to share the issue reproduce sample to us
3. Please ensure the Essential Studio version.

Regards, 

Thavasianand S. 

[Fayçal HANNOUN]

Hello and thanks for your reply.

A little update after my investigation. The problem seems to occure only when editMode is set to normal. When i use (and i'm using) batchMode, the grid works as expected.

I no longer need the fix as to my current work, but the issue needs further investigation i think. For me the issue is resolved, but if you need further explanation or details, feel free to contact me.

Before showing the code, i would like to explain the structure real quick.

I have a partial view taht handles the rendering of the code responsible for displaying the modal. I control the behavior of the dialog via a custom model.

The grid itself is rendered in another partial that is passed to the modal dialog partial.

Here's the modal's partial view:

Code start:

@model CrescendoPMS.Models.DialogBoxParams

@Html.EJS().Dialog(Model.Id).IsModal(Model.IsModal).Header(Model.Caption).CloseOnEscape(Model.CloseOnEscape).ContentTemplate(@

@Html.Partial(Model.PartialPath, Model.PartialModel)

).Target("#" Model.Id "-container").ShowCloseIcon(true).Visible(false).Width(Model.Width).Height(Model.Height).Buttons(btn =>

{

btn.Click(Model.Confirm).ButtonModel(new { onkeydown="dlgKeyPress()", cssClass = "e-flat e-primary", content = Model.OkButtonText }).Add();

btn.Click(Model.Cancel).ButtonModel(new { cssClass = "e-flat", content = Model.CancelButtonText }).Add();

}).Render()

code end.

The model class to control the modal dialog:

Code start:

public class DialogBoxParams

{

public string Id { set; get; }

public string Caption { set; get; }

public bool IsModal { set; get; } = true;

public string OkButtonText { set; get; } = "Ok";

public string CancelButtonText { set; get; } = "Annuler";

public string Confirm { set; get; }

public string Cancel { set; get; }

public bool CloseOnEscape { set; get; } = false;

public object PartialModel { set; get; }

public string PartialPath { set; get; }

public string Width { set; get; }

public string Height { set; get; }

}

Code end.

Here is the grid's partial view:

Code start:

// ... Some irrelevant HTML

@Html.Partial("~/Views/Shared/DialogBox.cshtml", new CrescendoPMS.Models.DialogBoxParams

{

Cancel = "invoiceLineFormCancel",

CancelButtonText = "Annuler",

Caption = "Porduit",

Confirm = "invoiceLineDialog",

Height = "80%",

Id = "invoiceLineDialog",

OkButtonText = "Confirmer",

PartialModel = new CrescendoPMS_BL.Models.invoice_line(),

PartialPath = "~/Views/Invoice/PInvoiceLineForm.cshtml",

Width = "80%" })

// ... Some irrelevant HTML

// The GRID

@Html.EJS().Grid("grid-invoice-lines").KeyPressed("gridLinesKeyPressed").DataSource((IEnumerable<object>)Model.lines).Columns(col =>

{

col.Field(nameof(CrescendoPMS_BL.Models.invoice_line.id)).HeaderText("Id").IsPrimaryKey(true).Visible(false).Add();

col.Field(nameof(CrescendoPMS_BL.Models.invoice_line.product_name)).HeaderText("Produit").MinWidth(150).Add();

col.Field(nameof(CrescendoPMS_BL.Models.invoice_line.qty)).Format("n2").HeaderText("Quantité").Add();

col.Field(nameof(CrescendoPMS_BL.Models.invoice_line.unit_price_te)).Format("c").HeaderText("Prix U. HT").Add();

col.Field(nameof(CrescendoPMS_BL.Models.invoice_line.total)).Format("c").HeaderText("Total HT").Add();

col.Field(nameof(CrescendoPMS_BL.Models.invoice_line.tax_id)).EditType("dropdownedit").Edit(new { @params = dropDown }).HeaderText("Tax").Add();

}).EditSettings(e => e.ShowConfirmDialog(false).Mode(Syncfusion.EJ2.Grids.EditMode.Batch).AllowAdding(true).AllowDeleting(true).AllowEditing(true).AllowEditOnDblClick(true).NewRowPosition(Syncfusion.EJ2.Grids.NewRowPosition.Bottom)).Render()

Code end.

I do have a display problem regarding the dropDown within the grid (the one associated with the tax_id field) but i will open a new topic for it.

Thank you for your help.

[Seeni Sakthi Kumar Seeni Raj]

Hi Faycal, 

Thanks for your patience, 

We have tried to reproduce the reported query “Grid rendering inside of Dialog component in Inline editing” . but it is unsuccessful. We have created a sample with your requirement. Please refer the below sample for more information. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization1943945851.zip 

If possible to reproduce the reported problem in given above sample and share the video demonstrate of the reported problem. 

Regards, 

Seeni Sakthi Kumar S