TreeList with DropdownList does not correctly set valuefield after custom command is clicked.

[Kamal]

 

<div id="treeList"></div>

<script>
    var treeData = @Html.Raw(Model.Data);

    var dataSource = new kendo.data.TreeListDataSource({
        transport: {
            read: function (e) {
                e.success(treeData);
            },
            update: function (e) {
                var url = '@Url.Action("Update", "MyController")';

                 var roleAssigned = e.data;
                 if (!$.isNumeric(e.data.userId)) {
                    roleAssigned = e.data.userId.id;
                 }

                $.post(url, { row: roleAssigned },
                    function (data) {
                        var returnedRole = $.parseJSON(data);
                        e.success(returnedRole);
                    }
                );
            }
        },
        schema: {
            model: {
                id: "roleId",
                parentId: "parentId",
                  expanded: true
            }
        }
    });

    $("#treeList").kendoTreeList({
        dataSource: dataSource,
        height: 540,
        filterable: true,
        sortable: true,
        columns: [
            { field: "roleName", title: "Role Name", width: 200},
            { field: "userId", title: "Assigned Staff", filterable: false, width: 80, editor: dropDownEditor, template: "#=userName#" },
            { field: "userTitle", title: "Title", width: 80, filterable: false},
            { field: "userDepartment", title: "Department", filterable: false, width: 80},
            { command: [{ name: "edit", text: "Assign" }, { name: "unassign", text: "Un-Assign", click: unassignRole }], width: 90, attributes: {
                style: "text-align: center;"

                } }

        ],
    });

    function unassignRole(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        if (dataItem.userId != null || dataItem.userId != 0) {
                var url = '@Url.Action("UnassignRole", "MyController")';

                 var roleAssigned = {
                        roleId: dataItem.roleId,
                        parentRoleId: dataItem.parentId,
                        roleName: dataItem.roleName,
                        userId: dataItem.userId,
                        userName: dataItem.userName,
                        userDepartment: dataItem.userDepartment,
                        userTitle: dataItem.userTitle,
                    }

                $.post(url, { row: roleAssigned },
                    function (data) {
                        var returnedRole = $.parseJSON(data);
                        dataItem.set("userId", returnedRole.userId);
                        dataItem.set("userName", returnedRole.userName);
                        dataItem.set("userDepartment", returnedRole.userDepartment);
                        dataItem.set("userTitle", returnedRole.userTitle);
                        return;
                    }
                )

        }
    }

    var dropDownData = @Html.Raw(Json.Encode(Model.UserSelectList));
    function dropDownEditor(container, options) {
        $('<input required name="' + options.field + '"/>')
        .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField: "fullName",
                dataValueField: "id",
            dataSource: dropDownData,
            animation: {
                close: {
                    effects: "fadeOut zoom:out",
                    duration: 200
                },
                open: {
                    effects: "fadeIn zoom:in",
                    duration: 200
                }
            }
            });

    }


</script>

 

The application allows me to assign as many people as I need to using a drowdownlist to select a user when in edit mode. The id from the selected user in the list is passed correctly. If there was no previous selected user loaded, it passes the entire object, which is why I have the following lines of code:

 

if (!$.isNumeric(e.data.userId)) {
                   roleAssigned = e.data.userId.id;
                }

Above is an altered version of the code.

 

If I use the custom command 'unassign' outside of the tradtitional CRUD methods in the transport object, The 'edit' command stops working correctly. When trying to assign a user, it will then call the Update function twice, once with the userId (which will either contain the id or userobject selected from the dropdown), and then again with a userId of 0 (not correctly being set by the dropdown). When passing back a userId of 0, the webservice returns a 500 error. 

 

One of the postbacks does correctly save the data, but the treelist is not updated with the values returned. 

 

Why does the Update function called twice? Why does the treelist not update anytime after a 'unassign' command is executed? How do I fix this?

[Stefan]

Hello, Kamal,

Thank you for the provided details.

I made an example simulating similar scenario by setting new values to the dataItem on un-аssign. Then I made a new edit, and only one update request was made:

http://dojo.telerik.com/AfIFu

On update passing the correct ID is very important as otherwise the TreeList dataSource may consider the item as new and try to make a new request.

I can suggest checking the requests made, the responses and to ensure that they are matching the requirement of the TreeListDataSource:

https://docs.telerik.com/kendo-ui/framework/hierarchicaldatasource/overview#bind-hierarchicaldatasource-to-remote-service

If the issue still occurs, please modify the provided Dojo or send an example reproducing the issue as it can be caused by a factor which we are overlooking at this moment.

Regards,
Stefan
Progress Telerik