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.
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>.
– pnet
Did the resulting HTML get well formatted?
– Tony