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

Cancel inline Edit command

5 Answers 180 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Alessandro
Top achievements
Rank 1
Alessandro asked on 08 Jun 2018, 08:21 AM
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! 

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 11 Jun 2018, 06:00 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alessandro
Top achievements
Rank 1
answered on 11 Jun 2018, 07:18 AM
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();

 

$("#tlTestCosti").data("kendoTreeList").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
0
Stefan
Telerik team
answered on 12 Jun 2018, 06:26 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alessandro
Top achievements
Rank 1
answered on 13 Jun 2018, 03:59 PM

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();
        }
    }

0
Alessandro
Top achievements
Rank 1
answered on 13 Jun 2018, 04:01 PM

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!

Tags
TreeList
Asked by
Alessandro
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Alessandro
Top achievements
Rank 1
Share this question
or