Reorder datasource in treeview and reload

5 posts, 0 answers
  1. Oscar
    Oscar avatar
    182 posts
    Member since:
    Oct 2010

    Posted 25 May Link to this post

    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? 

  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 26 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Oscar
    Oscar avatar
    182 posts
    Member since:
    Oct 2010

    Posted 11 Jul Link to this post

    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");
            }
  4. Oscar
    Oscar avatar
    182 posts
    Member since:
    Oct 2010

    Posted 11 Jul in reply to Oscar Link to this post

    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:

     

  5. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 13 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular 2 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