Reorder datasource in treeview and reload

[Oscar]

Hi.

I have a treeview of menus in my application. But in the other way I have a kendoMobileScrollView because my tree of menus also can be edited in visual mode.

When I change to visual way getting the datasource from my treeview it works well. But my actual problem is when I reorder the dataSource(reordering the indexs) and then try to apply the changes like this: "$("#tree").getKendoTreeView().setDataSource.data($("#tree").getKendoTreeView().dataSource.data())", it reorders but childs don't open.

Any solutions? 

[Dimitar]

Hello Oscar,

On the following Dojo example you will find a simple implementation of the Kendo TreeView widget, which uses a remote data service.

May I ask you to modify the above example, so that it reproduces the issue faced and send it back to us for review?

Additionally, it will be most helpful if you elaborate a bit more on what exactly are you trying to achieve and provide some use cases. This way I will be able to troubleshoot the problem and provide you with further assistance.

I am looking forward to hearing from you.

Regards,
Dimitar
Progress Telerik

[Oscar]

Hi @Dimitar

In my code I have a KendoMobileScrollView and a kendoTreeView that need to have the same dataSource.

You can edit a list of menus in a MobileScrollView or in a Treeview. But then, I have two problems:

1. I need to get all the sons of my datasource and be loaded. I do this:

var menus_datasource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: app.parseUrl("/K01/Usuarios/FetchNodesMenusTreeView"),
                    cache: false,
                    data: {
                        username: usuario
                    }
                }
            },
            schema: {
                model: {
                    id: "MENUID",
                    hasChildren: "MenuTieneHijos"
                    children: "menus_hijos"
                }
            },
            requestEnd: function (e)
            {
            }
        });

But if I access to my sons like this, first I have to open the menu and then it will be there

$("#tree").getKendoTreeView().dataSource.data()[0].menus_hijos
//Nothing
$('#tree').getKendoTreeView().expand(".k-item");
$("#tree").getKendoTreeView().dataSource.data()[0].menus_hijos
//Now I can get the children

2. If you edit in mobilescrollview, you can reorder data like in treeview, but in a visual mode. Then i reorder the data but if I want to reload the TreeView it gets very crazy. Here is the example:

//Here is the initialization
Usuarios.scrollview = $("#scrollview").kendoMobileScrollView({
            template: $("#scrollViewItemTemplate").html(),
            itemsPerPage: Usuarios.calculoItemsPorPagina(),
            contentHeight: $("#scrollview").height() - 41,
            enablePager: false,
            dataSource: null
        }).data("kendoMobileScrollView");

//Here is the button that changes between mobilescrollview and treeview

$("#toolbarMaterialize").find("#btnCambio").bind("click", function (e)
        {
            $("#toolbarMaterialize").find("#btnListado").addClass('disabled');
            if ($('#modoArbol').css('display') == "none")
            {
                effect.reverse();
                $('#btnAtras').addClass('ocultar_div');
                $('#btnAtras').data().uidlist = [];
                $('#tree').getKendoTreeView().collapse('.k-item');
            }
            else
            {
                var data_source_tree = $("#tree").getKendoTreeView().dataSource.data();
                Usuarios.scrollview.setDataSource(data_source_tree);
                Usuarios.prepararClicksEditorMenusVisual();
                effect.play();
                $('#editGrupo').hide();
                $('#editProcedimiento').hide();
                $("#contenidoArbol").animate({ width: "100%" }, function () { });
                $("#tree").getKendoTreeView().select([]);
                $('#btnDelete').addClass('disabled');
            }
        });


//This is what I do when a user reorders in mobile scrollview
function droptargetOnDrop(e)
        {
            debugger;
            var arbol = $("#tree").getKendoTreeView();
            var divDestino = $(e.dropTarget);
            var divMovido = $(e.draggable.element);
            var modeloMovido = arbol.dataSource.getByUid(divMovido.attr("data-uid"));

            if (divDestino.attr("data-uid") != divMovido.attr("data-uid"))
            {//EN EL CASO QUE EL ELEMENTO QUE ARRASTREN NO SEA EL MISMO QUE EL DE ORIGEN
                Usuarios.ha_habido_drops_menus = true;
                if (divDestino.hasClass("ghostPosition"))
                {//cambio posiciones //funciona 100%, no tocar
                    var modeloAnterior = arbol.dataSource.getByUid(divDestino.prev().attr("data-uid"));
                    var modeloPosterior = arbol.dataSource.getByUid(divDestino.next().attr("data-uid"));
                    if ($.trim(modeloPosterior) == "")
                    {
                        modeloMovido.index = modeloAnterior.index + 1;
                    }
                    else
                    {
                        modeloMovido.index = modeloPosterior.index - 1;
                    }
                    var posicionNueva = modeloMovido.index;
                    for (var i = 0; i < divDestino.prevAll(".app").length - 1; i++)
                    {
                        posicionNueva--;
                        var divSiguiente = $(divDestino.prevAll(".app")[i]);
                        if (divSiguiente.attr("data-uid") != modeloMovido.uid)
                        {
                            var modeloSiguiente = arbol.dataSource.getByUid(divSiguiente.attr("data-uid"));
                            modeloSiguiente.index = posicionNueva;
                        }
                    }

                    var ds = modeloMovido.parent();
                    ds.sort(function (a, b)
                    {
                        return a.index - b.index;
                    });
                    //$("#tree").getKendoTreeView().setDataSource($("#tree").getKendoTreeView().dataSource.data());

                    var datasource_scrollview = $("#tree").getKendoTreeView().dataSource.getByUid(modeloMovido.uid).parent();
                    Usuarios.scrollview.setDataSource(datasource_scrollview);
                    Usuarios.prepararClicksEditorMenusVisual();
                }
                else
                {//insercion de procedimiento/grupo en el div
                    var modeloDestino = arbol.dataSource.getByUid(divDestino.attr("data-uid"));
                    if (divDestino.find(".grupo").length > 0)
                    {
                        //el elemento al que se le suelta es un grupo
                        var clon_modelo_movido = jQuery.extend(true, {}, modeloMovido);
                        arbol.remove(arbol.findByUid(modeloMovido.uid));
                        modeloDestino.append(clon_modelo_movido);

                        var datasource_scrollview = $("#tree").getKendoTreeView().dataSource.getByUid(modeloDestino.uid).parent();
                        Usuarios.scrollview.setDataSource(datasource_scrollview);
                        Usuarios.prepararClicksEditorMenusVisual();

                    }
                    else
                    { //el div al que se le suelta es un procedimiento: debemos avisar de que no se puede convertir un procedimiento en grupo
                        $('#errorWindow').find('.modal-content p').text('No puedes crear un grupo en un proceso');
                        $("#errorWindow").modal("open", {
                            modal: true,
                            dismissible: false,
                            container: $("#EditorMenus"),
                            complete: function () { $('#errorWindow').find('.modal-content p').text(''); }
                        });
                    }
                }
            }//al finalizar el proceso de arrastre, volvemos a mostrar sus divs de posiciones
            divMovido.next().show();
            divMovido.prev().show();
            divDestino.toggleClass("seleccionado");
        }

[Oscar]

Sorry, the last function of the code is weird, here y

function droptargetOnDrop(e)
        {
            debugger;
            var arbol = $("#tree").getKendoTreeView();
            var divDestino = $(e.dropTarget);
            var divMovido = $(e.draggable.element);
            var modeloMovido = arbol.dataSource.getByUid(divMovido.attr("data-uid"));

            if (divDestino.attr("data-uid") != divMovido.attr("data-uid"))
            {//EN EL CASO QUE EL ELEMENTO QUE ARRASTREN NO SEA EL MISMO QUE EL DE ORIGEN
                Usuarios.ha_habido_drops_menus = true;
                if (divDestino.hasClass("ghostPosition"))
                {//cambio posiciones //funciona 100%, no tocar
                    var modeloAnterior = arbol.dataSource.getByUid(divDestino.prev().attr("data-uid"));
                    var modeloPosterior = arbol.dataSource.getByUid(divDestino.next().attr("data-uid"));
                    if ($.trim(modeloPosterior) == "")
                    {
                        modeloMovido.index = modeloAnterior.index + 1;
                    }
                    else
                    {
                        modeloMovido.index = modeloPosterior.index - 1;
                    }
                    var posicionNueva = modeloMovido.index;
                    for (var i = 0; i < divDestino.prevAll(".app").length - 1; i++)
                    {
                        posicionNueva--;
                        var divSiguiente = $(divDestino.prevAll(".app")[i]);
                        if (divSiguiente.attr("data-uid") != modeloMovido.uid)
                        {
                            var modeloSiguiente = arbol.dataSource.getByUid(divSiguiente.attr("data-uid"));
                            modeloSiguiente.index = posicionNueva;
                        }
                    }

                    var ds = modeloMovido.parent();
                    ds.sort(function (a, b)
                    {
                        return a.index - b.index;
                    });
                    //$("#tree").getKendoTreeView().setDataSource($("#tree").getKendoTreeView().dataSource.data());
                    //This line is commented cause if i do this the treeview start doing some weird things
                    var datasource_scrollview = $("#tree").getKendoTreeView().dataSource.getByUid(modeloMovido.uid).parent();
                    Usuarios.scrollview.setDataSource(datasource_scrollview);
                    Usuarios.prepararClicksEditorMenusVisual();
                }
            }//al finalizar el proceso de arrastre, volvemos a mostrar sus divs de posiciones
            divMovido.next().show();
            divMovido.prev().show();
            divDestino.toggleClass("seleccionado");
        }

ou have a better version:

 

[Dimitar]

Hello Oscar,

In case you are trying to persist the changes made to the dataSource, you could use the drop event to post the changes to the server and save them or you could save the current TreeView data on the click of a button.

If this does not help your, can you provide a simple, locally runnable project, that reproduces the issue faced, so that I can examine it locally and identify the cause of the problem? I suggest using the Dojo sandbox with hard-coded data for this purpose.

Also, can you please elaborate a bit more on what are you trying to achieve by the following code:

$("#tree").getKendoTreeView().setDataSource($("#tree").getKendoTreeView().dataSource.data());

Regards,
Dimitar
Progress Telerik