Double-click to edit for RadTreeList

[Daniel]

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!

[Eyup]

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

[Daniel]

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?

[Eyup]

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

[Daniel]

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!

[Eyup]

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