SIG/RH/Organigrama.aspx

<%@ Page Title="SIG: Organigrama" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Organigrama.aspx.vb" Inherits="RH_Organigrama" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Css" runat="Server">

    <style>
        .node {
            width: 150px;
            background-color: whitesmoke;
            font-weight: normal;
        }
        #chart_div{
            overflow:auto;
        }
    </style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        //google.charts.load('current', { packages: ["orgchart"] });
        //google.charts.setOnLoadCallback(drawb);


        function drawChart() {//esta funcion se ejecuta cada vez que se el boton "Consultar" es seleccionado y se ejecuta el metodo "GenerarOrg" en el VB
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            $.ajax({
                type: "POST",
                url: "Organigrama.aspx/FetchData",
                data: '{}',
                contentType: "application/json",
                dataType: "json",
                success: function (r) {
                    debugger;
                    var options = {
                        allowHtml: true,
                        size: "large",
                        nodeClass: "node"
                    };
                    r.d = JSON.parse(r.d);
                    if (r.d.length > 0) {
                        var formatedData = [];
                        for (var i = 0; i < r.d.length; i++) {
                            let arregloAux = [JSON.parse(r.d[i][0]), i != 0 ? r.d[i][1] : "", r.d[i][2]]//por cada registro convertimos en JSON los titulos y subtitulos(llegan en String) y damos formato al header
                            formatedData.push(arregloAux);
                        }
                        data.addRows(formatedData);
                        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
                        for (let i = 0; i < data.getNumberOfRows(); i++) {
                            data.setRowProperty(i, 'style', "font-weight:normal");
                        }
                        chart.draw(data, options);
                    } else {
                        let contenedor = document.getElementById('chart_div');
                        contenedor.innerHTML = '';
                        console.log('vacio')
                    }
                },
                failure: function (r) {
                    alert("failure");
                },
                error: function (r) {
                    alert("error");
                    console.log(r);
                }
            });
        }

    </script>


</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="E" runat="Server">
    Organigrama
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="HB" runat="Server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="H" runat="Server">
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="HA" runat="Server">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
        <ContentTemplate>
            <div class="btn-group pull-right btn-separete">
                <asp:Button ID="BtnConsultar" runat="server" Text="Consultar" ClientIDMode="Static" class="btn btn-fit-height btnopaco" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="C" runat="Server">

    <asp:UpdatePanel runat="server" ID="upPanel">
        <ContentTemplate>
            <div class="portlet solid grey-cascade portlet-filter" style="">
                <div class="portlet-title portlet-filterT smalltitle" style="min-height: 49px; position: relative;">
                    <div class="tools">
                        <asp:Button ID="btConsultar" CssClass="btn btn-primary" runat="server" ValidationGroup="GrpConsultar" Text="Consultar" /></td>
                        <a href="javascript:;" data-idchekbox="<%= chkexpand.ClientID%>" class=" <%= IIf(chkexpand.Checked = True, "collapse", "expand")%>"></a>
                        <asp:CheckBox ID="chkexpand" CssClass="hidden" runat="server" />
                    </div>
                    <div class="titlefiltros caption magindate">
                        <div class="row">


                            <div class="col-md-1 truncate" style="text-align: right!important; width: 180px">Cabecera del Organigrama: </div>
                            <div class="col-md-1">
                                <asp:DropDownList ID="DdlSupervisorOrganigrama" runat="server" AppendDataBoundItems="True" Width="260px" DataTextField="NombreCompleto" DataValueField="CvePersonal" CssClass="form-control input-sm select2me" ValidationGroup="GrpGuardar">
                                    <%--<asp:ListItem Value="0">&lt;Seleccione &gt;</asp:ListItem>--%>
                                    <%--<asp:ListItem Selected="True" Text="Sin Asignar" Value="-1"></asp:ListItem>
                                    <asp:ListItem Text="Cabecera" Value="0"></asp:ListItem>--%>
                                </asp:DropDownList>
                                <i></i>
                            </div>

                            <div class="col-md-1 truncate" style="text-align: right!important; width: 200px; margin-left: 110px">Nivel de cadena de mando: </div>
                            <div class="col-md-1">
                                <asp:TextBox runat="server" ID="txtNivel" Style="width: 35px"></asp:TextBox>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="portlet-body magindate" <%= IIf(chkexpand.Checked = True, "", "style=""display:none;""")%>>
                </div>
            </div>
            <asp:Label ID="LblJson" CssClass="LblJson hidden" runat="server" Text="[]"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>

    <br />

    <div id="chart_div"></div>

</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
    <script>
        
        function drawb() {
            let r = {};
            var options = {
                allowHtml: true,
                size: "large",
                nodeClass: "node"
            };
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');
            r.d = JSON.parse($('.LblJson').text());
            if (r.d.length > 0) {
                var formatedData = [];
                for (var i = 0; i < r.d.length; i++) {
                    let arregloAux = [JSON.parse(r.d[i][0]), i != 0 ? r.d[i][1] : "", r.d[i][2]]//por cada registro convertimos en JSON los titulos y subtitulos(llegan en String) y damos formato al header
                    formatedData.push(arregloAux);
                }
                data.addRows(formatedData);
                var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
                for (let i = 0; i < data.getNumberOfRows(); i++) {
                    data.setRowProperty(i, 'style', "font-weight:normal");
                }
                chart.draw(data, options);
            } else {
                let contenedor = document.getElementById('chart_div');
                contenedor.innerHTML = '';
                console.log('vacio')
            }
        }

        function ADSBegin() {
        google.charts.load('current', { packages: ["orgchart"] });
        google.charts.setOnLoadCallback(drawb);
        }
    </script>
</asp:Content>