Double-click to edit for RadTreeList

6 posts, 0 answers
  1. Daniel
    Daniel avatar
    6 posts
    Member since:
    Jan 2012

    Posted 20 Nov 2017 Link to this post

    Hello,

    I am trying to implement the following solution to enable the double-click to edit feature on a TreeList: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/ajaxified-radgrid/how-to/go-into-edit-mode-with-ajax-double-click

    However, as I am trying to convert the RadGrid-based example above to the TreeList I am unable to find an equivalent of RadGrid's editItem method on a TreeList control (https://docs.telerik.com/devtools/aspnet-ajax/controls/treelist/client-side-programming/overview). The closest I found was to call the fireCommand("Edit", "") method, but it causes the page to postback and as such causes the javascript variables to lose references to the row being edited.

     

    Can you think of a way to correctly implement the double-click to edit feature on the TreeList?

     

    Thanks!

  2. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 23 Nov 2017 Link to this post

    Hi Daniel,

    Yes, using the fireCommand is the proper way to do that:
    <ClientSettings>
        <ClientEvents OnItemDblClick="dblClick" />
    </ClientSettings>
    JavaScript:
    function dblClick(sender, args) {
        args.get_item().fireCommand("Edit", "");
    }

    If you do not prefer full page postbacks, you can use RadAjaxManager or RadAjaxPanel.

    I hope this will prove helpful.

    Regards,
    Eyup
    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. Daniel
    Daniel avatar
    6 posts
    Member since:
    Jan 2012

    Posted 27 Nov 2017 in reply to Eyup Link to this post

    Thank you Eyup. Correct me if I am wrong, but it seems that even if I do partial postbacks, I will still not be able to fully replicate the functionality described in the RadGrid article I linked to in my first post. Specifically, I am thinking about the part where a single click or a double click outside of the edited row will save the changes. It seems that for that to be possible I need to be able to store the reference of the edited row in the "editedRow" variable, but even with a partial postback that value will be lost. Is there any way to do this in a TreeList?
  4. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 30 Nov 2017 Link to this post

    Hello Daniel,

    It is absolutely possible. Before opening the row in edit mode, you will need to first update the row already open in edit mode. You can fire a custom command using the fireCommand method to do that:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridtableview-object/methods/firecommand

    In the command argument, which is the second parameter of the fireCommand, you can pass the last clicked row. For instance - treeList.fireCommand("MyCustomCommand","3");

    Then, in the code-behind, you can update and close the previously edited item and then at the end of the logic to open the record with index 3 in edit mode.

    Regards,
    Eyup
    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. Daniel
    Daniel avatar
    6 posts
    Member since:
    Jan 2012

    Posted 04 Dec 2017 in reply to Eyup Link to this post

    Hi Eyup,

    Thank you for pointing me in the right direction. So I am trying to take some steps toward implementing your suggestion. First, I set the "ClientDataKeyNames" property of the RadTreeList in order to enable the client-side code to access tree list item data. Then, I created a code-behind handler for the OnItemDataBound event. I then wired up the javascript method to handle the OnItemClick client event. Here is the actual Javascript function:

    function ItemClick(sender, eventArgs) {
        var clickedItem = eventArgs.get_item();
        var itemId = eventArgs.get_item().get_dataKeyValue('Id');
        clickedItem.fireCommand("Deselect", itemId);
    }

     

    And here is the corresponding code-behind:

    protected void RadTreeList1_OnItemCommand(object sender, TreeListCommandEventArgs e)
    {
        if (e.CommandName == "Deselect")
        {
            TreeListDataItem item = e.Item as TreeListDataItem;
            string itemId = e.CommandArgument.ToString();
        }
    }

     

    I then ran the code, set a breakpoint in the RadTreeList1_OnItemCommand method and inspect the value of itemId. The value comes out blank. I am attaching a screenshot of the Visual Studio debug view that shows that e.CommandArgument is empty.

    Further, I can confirm that the Javascript is correctly passing the argument to fireCommand (I am attaching another screenshot to confirm that). I can also confirm that the command argument value is included in the POST request sent to the server (also attached).

    Given all of the above, do you have any suggestions that would explain why the CommandArgument value is empty in the server-side event handler method?

    Thank you!

  6. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 07 Dec 2017 Link to this post

    Hello Daniel,

    You can try to slightly modify the logic:
    sender.fireCommand("MyCustomCommandName", itemId.toString());

    Alternatively, you can try to use ajaxRequest:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/server-side-programming/events/onajaxrequest

    Regards,
    Eyup
    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.
Back to Top