Cancel inline Edit command

[Alessandro]

Hi, 
I'm having trouble managing the inline edit mode in my TreeList.
I would like to enable the inline edit mode (.Editable(e => e.Mode("inline"))) only on nodes without children, so I tought that, fired the "edit" event and checked for the presence of children, I could cancel it using preventDefault() but it's doing nothing.

I searched a lot but couldn't find anything helping me whit this issue.

Bonus question: is it possible, in inline mode, to enable the edit function only for one column?


Thanks a lot! 

[Stefan]

Hello, Alessandro,

The described result is expected because the edit event is fired after the row is already in edit mode. An option will be instead of using prevent default to call cancelRow method but this could cause a small flickering:

https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/methods/cancelrow

Also, I can suggest submitting a feature request for an event beforeEdit similar as in the Grid:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=170298&filter=new&page=1

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/beforeedit

As for the editable column, this could be set inside the model configuration by setting the column editable property to false for all column that will not be editable:

https://dojo.telerik.com/uWIbIcod

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Alessandro]

Hi Stefan,
thanks for the help.
I solved successfully the single field editable property, but "cancelRow" event is still bothering me.

This is my TreeList:

@(Html.Kendo().TreeList<LeaTest>()
                .Name("tlTestCosti")
                .Columns(columns =>
                {
                    columns.Add().Field(e => e.LeaDesc).Title("DESC").Width(300);
                    columns.Add().Field(e => e.OrdineVis).Title("ORDINEVIS").Width(200);
                    columns.Add().Field(e => e.IdLea).Title("CLM1").Hidden(true);
                })
                .Editable(e => e.Mode("inline"))
                .Navigatable(true)
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("All", "Bilancio"))
                    .Model(m =>
                    {
                        m.Id(f => f.IdLea);
                        m.ParentId(f => f.ParentId);
                        m.Expanded(true);
                        m.Field(f => f.LeaDesc).Editable(false);
                        m.Field(f => f.IdLea).Editable(false);
                        m.Field(f => f.OrdineVis);
                    })
                )
                .Height(540)
                .Events(e => e.Save("window.onTlTestCostiSaveDlg")
                                .Edit("window.onTlTestCostiEditDlg")
                        )
                )

 

And this are my simple JS functions used to manage Save and Edit events:

function onTlTestCostiSaveDlg(e) {
    var url = 'urlofservicethatmanageSave';
    censimentiJs.onTlTestCostiSave(e, url); //function that check some field etc than execute the real save ops
}

function onTlTestCostiEditDlg(e) {
   //if (e.model.hasChildren) this is what I tried to use before your suggestion
   //    e.sender.cancelRow();
}

 

The problem is that when it fires "cancelRow()" I lose focus on the TreeList and I get this error in the console:

kendo.all.js:112619 Uncaught TypeError: Cannot read property 'wrapper' of null
    at init._handleEditing (kendo.all.js:112619)
    at init._handleEnterKey (kendo.all.js:112572)
    at init._tableKeyDown (kendo.all.js:112444)
    at HTMLTableElement.proxy (jquery-2.2.3.js:497)
    at HTMLTableElement.dispatch (jquery-2.2.3.js:4737)
    at HTMLTableElement.elemData.handle (jquery-2.2.3.js:4549)

Any idea what's the reason?


Alessandro

[Stefan]

Hello, Alessandro,

I'm glad to hear that the first functionality is implemented.

As for the cancelRow, I made an example demonstrating the same approach and it is working as expected on my end:

https://dojo.telerik.com/EBuHIwoM

If possible, please provide an example demonstrating the issue as it could be caused by a factor which we are overlooking at this moment.

Regards,
Stefan
Progress Telerik

[Alessandro]

Hi Stefan, 
thanks to some testing and another Admin, we discovered that the problem is in the specific use case of a TreeList whit inline edit and no Edit button.
The edit event, triggered by the Enter or Alt+F2 key (as documented HERE), has some timing issues, causing the wrapper not be found.

The temporary solution, waiting for the ticket 4306 to be closed, is to wrap the cancelRow call inside a setTimeout function.

private tlBilancioCostiRicaviEdit(e: k.TreeListEditEvent): void {
        if ((<any>e.model).hasChildren) {
            setTimeout(function () {
                e.sender.cancelRow();
            });
            (<any>e.sender).table.focus();
        }
    }

[Alessandro]

While replying i cut out the end:

 

I hope that this post could be useful to someone else in order to solve the same or maybe a similar problem.

Thank you so much Stefan for you support!