This is a migrated thread and some comments may be shown as answers.

Card- Filtering and Sorting

1 Answer 104 Views
Card
This is a migrated thread and some comments may be shown as answers.
Ahila
Top achievements
Rank 1
Ahila asked on 13 Jan 2020, 12:45 PM

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?

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 15 Jan 2020, 07:30 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Card
Asked by
Ahila
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or