Update Treeview with pre checked nodes freezes

[Jorge]

Hi,

I have a RadGrid that contains info about our system profiles, below, a panel with some textboxs and dropdownlists, and another panel with a RadtreeView  with the menu pages available in our system. At the begin, this controls are empty and the TreeView contains all the menu pages available (from the database, with a WebMethod), no one checked. When I select one row in the RadGrid, it update the radcontrols (textboxs and dropdownlists) with the same info and the RadTreeView on the left, with the same menu but checked the nodes marking the pages that the profile can access (another WebMethod, from another table from database, related to the main Menu Table with Profiles).
I was able to update controls and check only the nodes which correspond to profile while the others are unchecked, but the problem is that the Treeview don't work anymore, not expand, not collapse, not check or uncheck, sometimes work once and then freezes again. Similarly happens when I change the page of the RadGrid without selecting any row, the original Treeview with the complete menu don't work, I can't do any action.
Is only part of the functionality I'm looking for, specifically to update the info of the profile from the controls and the Treeview, but for that, I need that the Treview must be enabled to check other nodes or uncheck the already checked, or expand to see the childnodes (the Treeview is in TriStateCheckBoxes = true).
Can be this a problem with the update panel? please, I need to solve this problem or another method to do this

this is my code:
ASPX:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">   
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="fieldset">
    </telerik:RadFormDecorator>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rtvPagsPerfil">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rtvPagsPerfil" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <table style="width: 100%">
        <tr>
            <td align="left" class="Subtitulo">
                <asp:Label ID="lblAdmPerfiles" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <telerik:RadAjaxPanel ID="pnlRadGridPerfil" runat="server" BorderColor="#CCCCFF" BorderStyle="Groove"
                    BorderWidth="2px" Width="100%">
                    <telerik:RadGrid ID="RadGridPerfiles" runat="server" AllowPaging="true" AllowSorting="false"
                        OnNeedDataSource="RadGridPerfiles_NeedDataSource" OnItemDataBound="RadGridPerfiles_ItemDataBound"
                        OnItemCommand="RadGridPerfiles_ItemCommand" OnPageIndexChanged="RadGridPerfiles_PageIndexChanged"
                        ShowStatusBar="true" CssClass="SubtituloSinFondo" SortingSettings-SortedAscToolTip="Ordenado Ascendente"
                        SortingSettings-SortedDescToolTip="Ordenado Descendente" SortingSettings-SortToolTip="Clic para ordenar"
                        StatusBarSettings-LoadingText="Cargando..." StatusBarSettings-ReadyText="Listo"
                        PageSize="5">
                        <HeaderStyle HorizontalAlign="Center" Font-Size="11px" ForeColor="#5D7B9D" Font-Bold="true" />
                        <ItemStyle HorizontalAlign="Center" Font-Names="Arial" Font-Size="10px" />
                        <AlternatingItemStyle HorizontalAlign="Center" Font-Names="Arial" Font-Size="10px" />
                        <PagerStyle PageSizeLabelText="Registros" ChangePageSizeButtonToolTip="Cambiar Número de Registros"
                            GoToPageButtonToolTip="Ir A" Mode="NextPrev" FirstPageToolTip="Primera Página"
                            LastPageToolTip="Última Página" NextPagesToolTip="Páginas Siguientes" NextPageToolTip="Página Siguiente"
                            PrevPagesToolTip="Páginas Anteriores" PrevPageToolTip="Página Anterior" PagerTextFormat="Cambiar Página: {4} &nbsp;Pág. <strong>{0}</strong> de <strong>{1}</strong>, items <strong>{2}</strong> a <strong>{3}</strong> de <strong>{5}</strong>."
                            PageButtonCount="5" />
                        <MasterTableView NoMasterRecordsText="No existen registros para mostrar" DataKeyNames="ID Perfil">
                        </MasterTableView>
                        <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
                            <Selecting AllowRowSelect="true" />
                        </ClientSettings>
                        <StatusBarSettings LoadingText="Cargando..." ReadyText="Listo" />
                    </telerik:RadGrid>
                </telerik:RadAjaxPanel>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                <table width="100%">
                    <tr>
                        <td align="left" style="width: 50%">
                            <div style="float: left; width: 100%" id="DivDescPerfil" runat="server">
                                <fieldset id="FieldSetDescPerfil" style="width: 100%; height: 400px">
                                    <legend class="TituloPanelAgrupacion">Descripción Perfil</legend>
                                    <asp:UpdatePanel ID="upDescripcionPerfil" runat="server">
                                        <ContentTemplate>
                                            <table width="100%">
                                                <tr>
                                                    <td>
                                                        <telerik:RadAjaxPanel ID="pnlDescripcionPerfil" runat="server" Width="100%">
                                                            <table class="SubtituloSinFondo4">
                                                                <tr>
                                                                    <td>
                                                                        &nbsp;
                                                                    </td>
                                                                    <td>
                                                                        &nbsp;
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label for="lblIdPerfil">
                                                                            ID:
                                                                        </label>
                                                                    </td>
                                                                    <td height="30">
                                                                        <asp:Label ID="lblIdPerfil" Style="float: left; font-weight: bold; color: Black;"
                                                                            runat="server"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label for="tbNombrePerfil">
                                                                            Nombre:
                                                                        </label>
                                                                    </td>
                                                                    <td>
                                                                        <telerik:RadTextBox ID="tbNombrePerfil" runat="server" Width="400px" MaxLength="50">
                                                                        </telerik:RadTextBox>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label for="tbDescripcionPerfil">
                                                                            Descripción:
                                                                        </label>
                                                                    </td>
                                                                    <td>
                                                                        <telerik:RadTextBox ID="tbDescripcionPerfil" runat="server" Width="400px" Height="40px"
                                                                            TextMode="MultiLine" MaxLength="100">
                                                                        </telerik:RadTextBox>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label for="ddlEmpresaPerfil">
                                                                            Empresa:
                                                                        </label>
                                                                    </td>
                                                                    <td>
                                                                        <telerik:RadDropDownList ID="ddlEmpresaPerfil" runat="server">
                                                                            <Items>
                                                                                <telerik:DropDownListItem Text="BW" Value="BW" />
                                                                                <telerik:DropDownListItem Text="Otro" Value="Otro" />
                                                                            </Items>
                                                                        </telerik:RadDropDownList>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label for="ddlEstadoPerfil">
                                                                            Estado:
                                                                        </label>
                                                                    </td>
                                                                    <td>
                                                                        <telerik:RadDropDownList ID="ddlEstadoPerfil" runat="server">
                                                                        </telerik:RadDropDownList>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label for="ddlVerificacionPerfil">
                                                                            Tipo Verificación:</label>
                                                                    </td>
                                                                    <td>
                                                                        <telerik:RadDropDownList ID="ddlVerificacionPerfil" runat="server">
                                                                        </telerik:RadDropDownList>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </telerik:RadAjaxPanel>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </fieldset>
                            </div>
                        </td>
                        <td align="left" style="width: 50%">
                            <div style="float: left; width: 100%" id="DivPagsPerfil" runat="server">
                                <fieldset id="FieldSetPagsPefil" style="width: 100%; height: 400px">
                                    <legend class="TituloPanelAgrupacion">Asignación de Pantallas</legend>
                                    <asp:UpdatePanel ID="upMenuPerfil" runat="server">
                                        <ContentTemplate>
                                            <telerik:RadAjaxPanel ID="pnlPagsPerfil" runat="server" Width="100%">
                                                <telerik:RadTreeView ID="rtvPagsPerfil" runat="server" CheckBoxes="true" TriStateCheckBoxes="true"
                                                    CheckChildNodes="true" Height="375px" BorderColor="#CCCCFF" BorderStyle="Groove"
                                                    BorderWidth="2px" Font-Size="X-Small" Font-Names="Verdana, Arial, Helvetica, sans-serif"
                                                    OnNodeExpand="rtvPagsPerfil_NodeExpand">
                                                    <DataBindings>
                                                        <telerik:RadTreeNodeBinding Expanded="false" />
                                                    </DataBindings>
                                                </telerik:RadTreeView>
                                            </telerik:RadAjaxPanel>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </fieldset>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <telerik:RadButton ID="btnAceptar" runat="server" Text="Aceptar">
                </telerik:RadButton>
                <telerik:RadButton ID="btnModificar" runat="server" Text="Modificar">
                </telerik:RadButton>
                <telerik:RadButton ID="btnEliminar" runat="server" Text="Eliminar">
                </telerik:RadButton>
            </td>
        </tr>
        <tr>
            <td>
                <telerik:RadInputManager ID="RadInputManager1" runat="server">
                    <telerik:TextBoxSetting BehaviorID="tbBehavior1" EmptyMessage="Ingrese aquí" Validation-IsRequired="true">
                        <TargetControls>
                            <telerik:TargetInput ControlID="DivDescPerfil" />
                        </TargetControls>
                    </telerik:TextBoxSetting>
                </telerik:RadInputManager>
            </td>
        </tr>
    </table>
</asp:Content>

CS:
    public void RadGridPerfiles_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        Label masterError = (Label)Master.FindControl("lblError");
        Label masterExito = (Label)Master.FindControl("lblExito");
        int codError = 0;
        string descError = string.Empty;
        DataTable dtPerfiles = new DataTable("Perfiles");
        dtPerfiles = wsBDD.ObtenerPerfil(ref codError, ref descError);

        if (codError != 0 && descError != string.Empty)
        {
            Session[ValoresDefinidosSYS.VarSession.mensajeError] = ManejoErrores.mensajesErrorPerfiles.mensajeErrorObtencionPerfiles
                + codError + ManejoErrores.separadorError + descError;
            Response.Redirect(ValoresDefinidosSYS.Pantallas.ERROR, false);
        }
        else
            if (dtPerfiles.Rows.Count > 0)
                RadGridPerfiles.DataSource = dtPerfiles;
            else
            {
                masterExito.Text = string.Empty;
                masterError.Text = ManejoErrores.mensajesErrorReportesOrganismos.sinCoincidencia;
            }
    }

    public void RadGridPerfiles_ItemDataBound(object sender, GridItemEventArgs e)
    {
        int codError = 0;
        string descError = string.Empty;
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            //NOMBRE DE LA EMPRESA EN VEZ DEL ID
            if (item["Empresa"].Text != string.Empty)
            {
                try
                {
                    string strIdEmpresa = item["Empresa"].Text;
                    string strNombre = wsBDD.ObtenerNombreEmpresa(strIdEmpresa, ref codError, ref descError);
                    item["Empresa"].Text = strNombre;
                }
                catch
                {
                    item["Empresa"].ForeColor = System.Drawing.Color.Red;
                    item["Empresa"].Text = ValoresDefinidosSYS.Items.NoParametrizado;
                }
            }
            else
                item["Empresa"].Text = ValoresDefinidosSYS.Items.NoParametrizado;

            //TIPO DE VERIFICACION
            if (item["Perfil Verificación"].Text == ValoresDefinidosSYS.Items.NonBreakingSpace)
                item["Perfil Verificación"].Text = ValoresDefinidosSYS.Items.NoAplica;
        }
    }

    public void RadGridPerfiles_ItemCommand(object sender, GridCommandEventArgs e)
    {
        string descError = string.Empty;
        int codError = 0;
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)RadGridPerfiles.SelectedItems[0];

            //ID de perfil seleccionado. Proviene de DataKeyNames de grid de presentacion
            string idPerfil = RadGridPerfiles.SelectedValue.ToString();
            lblIdPerfil.Text = idPerfil;

            tbNombrePerfil.Text = item["Nombre Perfil"].Text;
            tbDescripcionPerfil.Text = item["Descripción"].Text;

            ddlEmpresaPerfil.ClearSelection();
            ddlEmpresaPerfil.FindItemByText(item["Empresa"].Text).Selected = true;

            ddlEstadoPerfil.ClearSelection();
            ddlEstadoPerfil.FindItemByText(item["Estado"].Text).Selected = true;

            ddlVerificacionPerfil.ClearSelection();
            ddlVerificacionPerfil.FindItemByText(item["Perfil Verificación"].Text).Selected = true;

            rtvPagsPerfil.Nodes.Clear();
            DataTable dtMenuPorPerfil = wsBDD.MenuPorPerfil(idPerfil, ref codError, ref descError);
            CargarMenuPreSeleccion(dtMenuPorPerfil);
        }
    }

    public void RadGridPerfiles_PageIndexChanged(object sender, GridPageChangedEventArgs e)
    {
        lblIdPerfil.Text = string.Empty;
        lblIdPerfil.Dispose();
        tbNombrePerfil.Text = string.Empty;
        tbNombrePerfil.Dispose();
        tbDescripcionPerfil.Text = string.Empty;
        tbDescripcionPerfil.Dispose();
        ddlEmpresaPerfil.ClearSelection();
        ddlEstadoPerfil.ClearSelection();
        ddlVerificacionPerfil.ClearSelection();
        CargarControles();

        //rtvPagsPerfil.Nodes.Clear();
        //CargarMenu();
    }

    public void CargarMenu()
    {
        string descErrorMenu = string.Empty;
        int codErrorMenu = 0;
        //llenar TreeView con las paginas disponibles del menú
        DataSet dsMenu = wsBDD.ObtenerMenu(ref codErrorMenu, ref descErrorMenu);
        DataTable dtMenu = new DataTable();
        dtMenu = dsMenu.Tables[0];
        rtvPagsPerfil.DataSource = dtMenu;
        rtvPagsPerfil.DataFieldID = dtMenu.Columns[0].Caption; //"Id_Menu";
        rtvPagsPerfil.DataFieldParentID = dtMenu.Columns[2].Caption; //"Id_Menu_Padre";
        rtvPagsPerfil.DataTextField = dtMenu.Columns[1].Caption; //"Nombre_Menu";
        rtvPagsPerfil.DataValueField = dtMenu.Columns[0].Caption; //"Id_Menu"; //"URL_Menu";
        rtvPagsPerfil.DataBind();
    }

    public void CargarMenuPreSeleccion(DataTable dtMenuPorPerfil)
    {
        string descErrorMenu = string.Empty;
        int codErrorMenu = 0;
        //llenar TreeView con las paginas disponibles del menú
        DataSet dsMenu = wsBDD.ObtenerMenu(ref codErrorMenu, ref descErrorMenu);
        DataTable dtMenu = new DataTable();
        dtMenu = dsMenu.Tables[0];

        //borro todos los nodos del RadTreeView
        //rtvPagsPerfil.Nodes.Clear();

        rtvPagsPerfil.Visible = true;
        rtvPagsPerfil.DataSource = dtMenu;
        rtvPagsPerfil.DataFieldID = dtMenu.Columns[0].Caption; //"Id_Menu";
        rtvPagsPerfil.DataFieldParentID = dtMenu.Columns[2].Caption; //"Id_Menu_Padre";
        rtvPagsPerfil.DataTextField = dtMenu.Columns[1].Caption; //"Nombre_Menu";
        rtvPagsPerfil.DataValueField = dtMenu.Columns[0].Caption; //"Id_Menu"; //"URL_Menu";
        rtvPagsPerfil.DataBind();

        ///////----works too
        ////foreach (DataRow dr in dtMenuPorPerfil.AsEnumerable())
        ////{
        ////    string rtvValue = dr[1].ToString();
        ////    RadTreeNode rtnSeleccionado = rtvPagsPerfil.FindNodeByValue(rtvValue);
        ////    if (rtnSeleccionado != null)
        ////    {
        ////        rtnSeleccionado.Checked = true;
        ////    }
        ////}
        
        IList<RadTreeNode> nodeCollection = rtvPagsPerfil.GetAllNodes();//.CheckedNodes;
        foreach (RadTreeNode node in nodeCollection)
        {
            foreach (DataRow dr in dtMenuPorPerfil.AsEnumerable())
            {
                string rtvValue = dr[1].ToString();
                if (node.Value.ToString() == rtvValue)
                {
                    node.Checked = true;
                }
            }
        }
    }

    public void CargarControles()
    {
        string descError = string.Empty;
        int codError = 0;

        //////dropdownlist con empresas
        ////if (Session["licenciaEncriptada"] != null)
        ////{
        ////    string licenciaEncriptada = Session["licenciaEncriptada"].ToString();
        ////    string licenciaAdministrador = wsBDD.ObtenerLicenciaAdministrador(licenciaEncriptada, ref codError, ref descError);
        ////    DataSet dsEmpresas = wsBDD.ObtenerEmpresas((bool)Session["banderaSuperAdmin"], licenciaAdministrador, ref codError, ref descError);
        ////    //foreach (var item in dsEmpresas.Tables[0].AsEnumerable())
        ////    //{
        ////    //    ListItem itemList = new ListItem(item.Field<string>("Nombre_Empresa"), item.Field<string>("Lic_Empresa"));
        ////    //    ddlEmpresaPerfil.DataSource = itemList;
        ////    //    ddlEmpresaPerfil.DataBind();
        ////    //}

        ////    ddlEmpresaPerfil.DataSource = dsEmpresas.Tables[0];
        ////    ddlEmpresaPerfil.DataBind();
        ////}

        //dropdownlist con tipos de Estado
        string[] estado = wsBDD.ObtenerTipoEstado(ref codError, ref descError);
        ddlEstadoPerfil.DataSource = estado;
        ddlEstadoPerfil.DataBind();

        //dropdownlist con tipo de verificación
        string[] tipoVerif = wsBDD.ObtenerTipoVerificacion(ref codError, ref descError);
        ddlVerificacionPerfil.DataSource = tipoVerif;
        ddlVerificacionPerfil.DataBind();
    }

Thanks in advance
Jorge Gómez

[Nencho]

Hello Jorge,

I have performed some local tests, but I am afraid that the data source and the database environment could not be locally replicated and probably because of this, the issue is not reproduced at our end - the TreeView is fully functional as demonstrated in the video below:

http://screencast.com/t/PuB6FLQBQ

As you mentioned that the freezes - such problematic behavior could be caused by the some javascript error on the page. Please make sure that there are none.

Regards,
Nencho
Telerik

 

 

[Jorge]

Thank you, I solved the problem. I only bind with data once, that makes disappear some conflicts with re-used data.
But the main problem was the UpdatePanel, because I have to update the TreeView with a click in any row of the RadGrid, so I make this changes:

<asp:UpdatePanel ID="upMenuPerfil" runat="server">
                                        <ContentTemplate>
                                            <telerik:RadAjaxPanel ID="pnlPagsPerfil" runat="server" Width="100%" Height="400px">
                                                <telerik:RadTreeView ID="rtvPagsPerfil" runat="server" CheckBoxes="true" TriStateCheckBoxes="true"
                                                    CheckChildNodes="true" Height="375px" BorderColor="#CCCCFF" BorderStyle="Groove" OnClientNodeExpanded="ClientNodeExpanded"                                                   
                                                    BorderWidth="2px" Font-Size="X-Small" Font-Names="Verdana, Arial, Helvetica, sans-serif">
                                                    <DataBindings>
                                                        <telerik:RadTreeNodeBinding Expanded="false" />
                                                    </DataBindings>
                                                </telerik:RadTreeView>
                                            </telerik:RadAjaxPanel>
                                        </ContentTemplate>
                                        <Triggers>
                                            <asp:PostBackTrigger ControlID="RadGridPerfiles" />
                                        </Triggers>
                                    </asp:UpdatePanel>

and use a JavaScript function called after I expand any TreeNode, as you explain in your examples

function ClientNodeExpanded(sender, eventArgs) {
                var node = eventArgs.get_node();
            }

Now, the functionality that I need is complete, except for a design problem. I have a height in the FieldSet, RadPanel and Treeview, but when I expand a node with many childs, the control expands below the bottom of the panel, losing the vision of the nodes, with no option of scrolling, even with the mouse click. Am I forgetting something? I apreciate your help.

thanks in advance

Jorge Gómez

[Nencho]

Hello Jorge,

Glad to see that the faced issue is now fixed. As for the currently experienced issue - I had performed some local tests, but it seems that the scrollbar appears correctly when there are numerous child nodes. This issue may be caused by some css style rule on your page, preventing the the overflowed content from visualization. I am attaching the sample page, which I had used for testing purpose. Could you lets us know how it differs from your implementation (regarding any style configuration) so we could inspect the faced issue further?

Regards,
Nencho
Telerik

 

 

[Jorge]

Thanks Nencho, and sorry for answer too late.

As you say, the problem was a configuration in the CSS, where I have overflow: hidden, removing this, all works perfect and normally.

Again, thanks so much

Jorge Gómez