Cancel inline Edit command

6 posts, 0 answers
  1. Alessandro
    Alessandro avatar
    8 posts
    Member since:
    Aug 2015

    Posted 08 Jun 2018 Link to this post

    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! 
  2. Stefan
    Admin
    Stefan avatar
    2530 posts

    Posted 11 Jun 2018 Link to this post

    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.
  3. Alessandro
    Alessandro avatar
    8 posts
    Member since:
    Aug 2015

    Posted 11 Jun 2018 in reply to Stefan Link to this post

    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
  4. Stefan
    Admin
    Stefan avatar
    2530 posts

    Posted 12 Jun 2018 Link to this post

    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.
  5. Alessandro
    Alessandro avatar
    8 posts
    Member since:
    Aug 2015

    Posted 13 Jun 2018 in reply to Stefan Link to this post

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

  6. Alessandro
    Alessandro avatar
    8 posts
    Member since:
    Aug 2015

    Posted 13 Jun 2018 Link to this post

    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!

Back to Top