Create menu type, but with (+) sign (Treeview)

Asked

Viewed 384 times

1

Use Bootstrap 3.1, Entity 6.1, Visual Studio 2013, MVC5, Jquery and etc... Well, I need to make a query, so that when the screen is loaded, it can carry some information, such as medicine (Description) and other information, but separately. Not to bring everything, as in a grid, my manager asked me to do so. A little too much signal(+) and when I click on it, then yes, expand everything. Is there a component to this? Is it possible to do it in ASP.NET and MVC? Bootstrap can do that?

  • 1

    You seem to be talking about a Treeview

  • "É possível fazer no ASP.NET e MVC?" The only limit to what you can do with . NET is how much effort you can or want to commit to the solution ;)

2 answers

1

You can use the .slideToggle() in jQuery in the product name. Treating the list of medicines with a foreach, you can take the ID of the product and associate to a component to display via jQuery by .slideToggle(). For example:

View

     <div id="[email protected]">
       <span>Medicamento Nome
         <a href="#" class="mostrarCompleto" id="@medicamento.ID"> + </a>
       </span>
      <div class="medicamentoItem">
        "Medicamento"
        "Descrição"
        "Qualquer coisa"
      </div>
    </div>

jQuery

     $(".medicamentoItem").hide();
     $('.mostrarCompleto').click(function () {
     var id = this.id;
     var item = ("#medicamentoGeral-" + id);
     $(item + " .medicamentoItem").slideToggle();

});
  • I updated! You got it?

  • So, as I said, any jquery function I write starting with $gives error: $ is not defined. I just tested another example too and gives the same error.

  • I get it. Aren’t you working with Razor? If not, change to <% %>, Example: @medicamento.ID turns to <%medicamento.ID%> or <%=medicamento.ID%>, I don’t remember right. About jQuery, if the problem is starting with $, declare a variable and assign the class/id in question as value.

  • The mistake is mine. I have 3 page layout in my project (Master). It turns out that in all I have the basic javascript includes in all and in this I forgot to add jquery-2.1.0.min. js, so the $error. I solved that part. My other example worked, but yours still hasn’t.

  • Got it. Here I’m working with it exactly as follows jsfiddle.net/3stwhLmv. It won’t work of course, but for you to visualize the code in full and get a better sense. This generates this congress page.com/Web/saiuMidia it is clear that the example has not much to be, but to understand that has to use the way you want

1

Are there any components for this? It is possible to do it in ASP.NET and MVC?

Yes, it calls Easyui. As you are working on top of ASP.NET MVC, it is available as a Nuget package:

https://www.nuget.org/packages/EasyUI

Example: http://jeasyui.com/demo/main/index.php?plugin=Tree&theme=default&dir=ltr&pitem=

There is also another Collapsible List (this is the English term) that has no directory list face:

http://code.stephenmorley.org/javascript/collapsible-lists/

Bootstrap can do that?

Not natively, but there’s this project on Github that creates Treeviews in Bootstrap:

https://github.com/jonmiles/bootstrap-treeview

If you need me to pack it as Package on Nuget, just say the word.

  • I will search every reply from you and then post the result. Maybe I’ll do it today. Thank you.

  • I have not yet been able to make the examples of both Gypsy and Raphael work.

  • @pnet Better define "I couldn’t make it work yet". What have you changed in the code? How have you changed the View? What data was used? We have no way of knowing what error you are having. We need to be more specific.

Browser other questions tagged

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