Dynamically load from the bank and mount a treeview in cshtml I’m not getting

Asked

Viewed 647 times

0

is as follows. I am not getting satisfactory results in assembling a tree using checkbox as in a treeview. Well, when I put the fixed data works very well. But when I bring the BD data, that’s where it complicates, I mean, it doesn’t work. The logic is to understand. I have some key data, coming from the flock, which are: MOTIVE, UNIDADE_NEGOCIO, FAMILIA and of course the product(all medicines). There is a LINQ that brings me this information to assemble the tree. This LINQ, for now brings me everything and serializo and send to a JQUERY function. In this function, I make a EACH in the result that comes from the controller(LINQ), assemble the nodes and then decarrego the HTML in the page. In function, I do an IF’s so that it does not repeat the names on the nodes. You can’t do a distinct, because I have several times the same REASON but for different ID and so for others, so the IF’s in jquery. What’s going on? Don’t mount the checkbox’s, bring the information, but don’t mount the checkbox and so don’t create the scrollbar laterally. I won’t write much otherwise it’s ineligible, but look at the codes below:

1) This code with fakes data works and that’s how I’d like it. Javascript and CSS includes are ok, otherwise it wouldn’t work.

<div class="row">
    <div class="col-md-12">
        <div class="col-md-1">
            <label for="cbxCodTipo">UF:</label>
        </div>
        <div class="col-md-4">
            <select class="form-control col-md-6" name="cbxCodTipo" id="cbxCodTipo" onchange=" return MontaCidades();">
                <option value="00">Selecione um estado</option>
                <option value="AC">ACRE</option>
                <option value="AL">ALAGOAS</option>
                <option value="AP">AMAPÁ</option>
                <option value="AM">AMAZONAS</option>
                <option value="BA">BAHIA</option>
                <option value="CE">CEARÁ</option>
                <option value="DF">DISTRITO FEDERAL</option>
                <option value="ES">ESPÍRITO SANTO</option>
                <option value="GO">GOIÁS</option>
                <option value="MA">MARANHÃO</option>
                <option value="MT">MATO GROSSO</option>
                <option value="MS">MATO GROSSO DO SUL</option>
                <option value="MG">MINAS GERAIS</option>
                <option value="PA">PARÁ</option>
                <option value="PB">PARAÍBA</option>
                <option value="PR">PARANÁ</option>
                <option value="PE">PERNAMBUCO</option>
                <option value="PI">PIAUÍ</option>
                <option value="RJ">RIO DE JANEIRO</option>
                <option value="RN">RIO GRANDE DO NORTE</option>
                <option value="RS">RIO GRANDE DO SUL</option>
                <option value="RO">RONDÔNIA</option>
                <option value="RR">RORAIMA</option>
                <option value="SC">SANTA CATARINA</option>
                <option value="SP">SÃO PAULO</option>
                <option value="SE">SERGIPE</option>
                <option value="TO">TOCANTINS</option>
            </select>
        </div>
        <div class="col-md-6">
            <div class="col-md-2">
                <label for="cbxCidade">Cidade:</label>
            </div>
            <select class="form-control col-md-4" name="cbxCidade" id="cbxCidade"></select>
        </div>
    </div>

    <div class="col-md-12">
        <div class="col-md-1">
            <label for="cbxRede">Rede:</label>
        </div>
        <div class="col-md-4">
            <select class="form-control col-md-6" name="cbxRede" id="cbxRede"></select>
        </div>
        <div class="col-md-6">
            <div class="col-md-2">
                <label for="cbxRede">Descrição:</label>
            </div>
            <select class="form-control col-md-4" name="cbxDescricao" id="cbxDescricao"></select>
        </div>
    </div>

    <div class="col-md-12">
        <div class="col-md-1">
            <label for="cbxProduto">Produto:</label>
        </div>
        <div class="col-md-4">
            <select class="form-control col-md-6" name="cbxProduto" id="cbxProduto"></select>
        </div>
    </div>

    <div class="col-md-12">
        <div class="col-md-1">
            <label for="cbxUnNegocio">Unidade Negócio:</label>
        </div>
        <div class="col-md-4">
            <select class="form-control col-md-6" name="cbxUnNegocio" id="cbxUnNegocio"></select>
        </div>
    </div>
</div>
<br />

<div id="content">
    <div class="listTree"></div>
    <button class="btn btn-primary" onclick=" return MontaArvore();">Pesquisar</button>
</div>
<br>
<div id='jqxWidget'>
<div style='float: left; width:auto;'>
    <div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'>
        <ul>
            <li item-checked='false' item-expanded='false'>
                Produto
                <ul>
                    <li item-expanded='true'>
                        MIP
                        <ul>
                            <li item-expanded='true'>
                                Família: ACCUVIT
                                <ul>
                                    <li>ACCUVIT COMREV FRX30</li>
                                </ul>
                            </li>
                            <li item-expanded='true'>
                                Família: FLOGORAL
                                <ul>
                                    <li>FLOGORAL SPRAY CEREJA CTX30ML</li>
                                    <li>FLOGORAL SPRAY MENTA CTX30ML</li>
                                    <li>FLOGORAL CREM DENTAL CTX70G</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <div style='margin-left: 60px; float: left;'>
        <div style='margin-top: 10px;'>
            <input id='jqxCheckBox' type="hidden">
        </div>
    </div>

  </div>
</div>

    <div class="row">
        <div class="col-md-12">
            <div class="col-md-2">
                <label for="txtObs">Observação:</label>
            </div>
            <div class="col-md-12">
                <textarea id="txtObs" style="width: 450px;"></textarea>
            </div>
        </div>
    </div>

    <br />

    <div id="content">
        <div class="listTree"></div>
        <button class="btn btn-success" ">Gravar</button>
        @Html.ActionLink("Voltar", "Index", "Home", new { }, new { @class = "btn btn-danger" })
    </div>

Here’s my controller with LINQ.

[HttpPost]
        public JsonResult ArvoreAcao(string _uf)
        {
            RupturaEntities db = new RupturaEntities();

            var monta_arvore = (from rup in db.Ruptura
                                  from apr in db.Apresentacao.Where(apr => apr.Codigo_Apresentacao == rup.Codigo_Apresentacao)
                                  from pdv in db.PDV.Where(pdv => pdv.CodigoPDV == rup.CodigoPDV)
                                  from mot in db.Motivo.Where(mot => mot.IDMotivo == rup.IDMotivo)

                                  select new {
                                      rup.IDRuptura,
                                      rup.DataRuptura,
                                      rup.IDMotivo,
                                      mot.Motivo1,
                                      rup.IDOrigem,
                                      rup.CodigoPDV,
                                      pdv.UF,
                                      pdv.Cidade,
                                      loja = pdv.Cnpj + " - " + pdv.Descricao,
                                      rup.Codigo_Apresentacao,
                                      apr.Unidade_Negocio,
                                      apr.Franquia,
                                      apr.Familia,
                                      apr.Descricao}).ToList().Distinct().OrderBy(apr => apr.Descricao);

            return Json(new { monta_arvore }, JsonRequestBehavior.AllowGet);
        }

And finally my JQUERY, where is the problem.

function MontaArvore() {

    var str = "";
    var motivo = "";
    var unidade_neg = "";
    var familia = "";

    $.ajax({

        url: '/Acao/ArvoreAcao',
        datatype: 'json',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        data: JSON.stringify({}),
        success: function (data) {

            $(data.monta_arvore).each(function () {

                if (motivo != this.Motivo1) {
                    str += '<ul>';
                    str += '<li item-checked="false" item-expanded="false">';
                    str += this.Motivo1;
                }

                if (unidade_neg != this.Unidade_Negocio) {
                    str += '<ul>';
                    str += '<li item-expanded="false">';
                    str += this.Unidade_Negocio;
                }

                if (familia != this.Familia) {
                str += '<ul>';
                str += '<li item-expanded="false">';
                    str += this.Familia;
                }
                str += '<ul>';
                    str += '<li>' + this.Descricao + '</li>';
                str += '</ul>';

                str += '</li>';//Familia
                str += '</ul>';//Familia

                str += '</li>';//Unidade de negocio
                str += '</ul>';//Unidade de negocio

                motivo = this.Motivo1;
                unidade_neg = this.Unidade_Negocio;
                familia = this.Familia;
            });

            str += '</li>';//li item-checked após o ul principal
            str += '</ul>';

            $('#jqxTree').html(str);
            str = "";
        },
        error: function (error) {

        }
    })
}

Could be some <UL> or some <LI>, I don’t know, anything like that. The point is that the checks are not assembled and with the fakes dice they(checks) look great. Any help is welcome. Thank you.

javascript c# jquery asp.net-mvc asp.net-mvc-5

  • I was doing level-to-level first, like, I started with just one level. I don’t assemble checkboxes. The information appears, but without the checks, only with that dot that are created by the tags’s <li>.

  • Did the resulting HTML get well formatted?

3 answers

2

Probably your logic for closing html tags is not correct.

I put comments in the code below showing that you need to put control points to open and close html tags otherwise it will not be rendered the way you want.

function MontaArvore() {

var str = "";
var motivo = "";
var unidade_neg = "";
var familia = "";

$.ajax({

    url: '/Acao/ArvoreAcao',
    datatype: 'json',
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    data: JSON.stringify({}),
    success: function (data) {

        $(data.monta_arvore).each(function () {

            if (motivo != this.Motivo1) {
                str += '<ul>';
                str += '<li item-checked="false" item-expanded="false">';
                str += this.Motivo1;
            }

            if (unidade_neg != this.Unidade_Negocio) {
                str += '<ul>';
                str += '<li item-expanded="false">';
                str += this.Unidade_Negocio;
            }

            if (familia != this.Familia) {
            str += '<ul>';
            str += '<li item-expanded="false">';
                str += this.Familia;
            }
            str += '<ul>';
                str += '<li>' + this.Descricao + '</li>';
            str += '</ul>';

            // A TAG ESTÁ SENDO FECHADA SEM SABER SE FOI ABERTA
            // É PRECISO SABER SE ENTROU DENTRO DO IF PRA PODER FECHA-LA
            str += '</li>';//Familia
            str += '</ul>';//Familia

            // A TAG ESTÁ SENDO FECHADA SEM SABER SE FOI ABERTA
            // É PRECISO SABER SE ENTROU DENTRO DO IF PRA PODER FECHA-LA
            str += '</li>';//Unidade de negocio
            str += '</ul>';//Unidade de negocio

            motivo = this.Motivo1;
            unidade_neg = this.Unidade_Negocio;
            familia = this.Familia;
        });

        // NESSE PONTO VC TA FECHANDO UMA TAG Q NÃO SABE SE FOI CRIADA
        // ESSA TAG TEM Q TER ENTRADO NO IF MOTIVO PRA TER SIDO ABERTA
        str += '</li>';//li item-checked após o ul principal
        str += '</ul>';

        $('#jqxTree').html(str);
        str = "";
    },
    error: function (error) {

    }
})

1

If you have an (if) open a tag you would also have an (if) to control its closing, that’s it.

  • The tags are being closed off of the if’s, but they are. Isn’t that correct? I did without the if, straight and it still didn’t work.

  • Luidy, good morning. The way you put it, I had already done and without result. The query is ok and the data is coming yes on the page. Only without the checkboxes and without the scroll bar. I have in this query, without filter, a total of 11 thousand records, but I’ve done with one too and nothing. I’ve changed several ways and none of them I could set up the check’s. If I fix the data in the view then it works, with the same code that is there, just not via jquery.

  • user2903558, I did it and it still doesn’t work. I just want to tell colleagues that only check’s don’t work. The rest is ok.

0

When you use the method

$('#jqxTree').html(str);

vc overwrite everything that is inside the div id="jqxTree", and the checkbox (jqxCheckBox) you do not touch at any time.

Another thing is that if you want to assemble a list of checkboxes you should go putting inputs inside the li’s, however you are just assembling the li’s without putting anything in it, example:

if (motivo != this.Motivo1) {
            str += '<ul>';
            str += '<li><input type="checkbox" name="motivo1" value="seu valor" checked="true or false">';
            str += this.Motivo1;
}

Try creating the checkboxes inside the li’s and pass the value you want to these ceckboxes, should work.

  • No, these inputs I can not put. jqxtree already has a js that does all this. It does not need the inputs, because it works perfectly. It’s a component of this guy. Only in run time with jquery is he taking it. I’m doing it another way, but I’ll try it this way, but without the inputs, because they will kill my checkbox’s.

Browser other questions tagged javascript c# jquery asp.net-mvc asp.net-mvc-5

You are not signed in. Login or sign up in order to post.