Card- Filtering and Sorting

[Ahila]

Need to filter cards in a blade(div) based on the value inside the card. Needed this for ASP.NET MVC.

For example, if we have many cards, base on the value inside the cards, need to filter or sort. Please let know whether is it possible and is there any demo available for that?

[Dimitar]

Hello Ahila,

The Cards classes provide a way of defining flexible content containers. Implementing filtering over those containers text could be achieved by handling the keyup event of an input as follows:

<!-- Filter input -->
<input type="text" id="filter" class="k-textbox"/>

<!-- Results container -->
<div class="container" id="results">              
        <div class="k-card"> ... </div>
        <div class="k-card"> ... </div>
        <div class="k-card"> ... </div>
</div>

<script>
  $("#filter").keyup(function() {
    var filter = $(this).val(),
           count = 0;

    $('#results .k-card').each(function() {
       if ($(this).text().search(new RegExp(filter, "i")) < 0) {
         $(this).hide();        
       } else {
         $(this).show(); 
         count++;
       }
     });
    });
</script>

Here is a Dojo example where the above could be tested.

Regards,
Dimitar
Progress Telerik