ASP.NET Core MVC apply isotope filter on product page details

Question

I applied isotope filter on my .Net core project dynamically. I successfully did it but a single minor error occur. After selecting the particular category position of the product not came first. Below see my two images

All Product

After Filter check the position of that image not changed(its need to come first)

My code Below Index.cshtml

@model BornoMala.Models.ViewModels.ProductDetailsVM
<section id="portfolio" class="portfolio">
    <div class="container">
        <div class="row" data-aos="fade-up">
            <div class="col-lg-12 d-flex justify-content-center">
                <ul id="portfolio-flters">
                    <li data-filter="all" class="filter-active filter-button">All</li>
                    @foreach (var obj in Model.Categories)
                    {
                        <li class="filter-button" data-filter="@obj.Name.Replace(' ','_')">@obj.Name</li>
                    }
                </ul>
            </div>
        </div>

        <div class="row portfolio-container" data-aos="fade-up">
            @foreach (var prod in Model.Products)
            {
                <div class="col-lg-4 col-md-6 portfolio-item  filter @Model.Category.Name.Replace(' 
                 ','_')">
                   <div class="portfolio-img"><img src="@Model.ImageUrl" class="img-fluid" alt=""></div>
                    <div class="portfolio-info">
                    <h4>@Model.Title</h4>
                    <p>By <b>@Model.Title</b></p>
                    </div>
                  </div>
            }
        </div>

    </div>
</section>

Isotope.js

$(window).on('load', function () {
        var portfolioIsotope = $('.portfolio-container').isotope({
            itemSelector: '.portfolio-item',
        });
});

 $(document).ready(function () {

            $(".filter-button").click(function () {
                $("#portfolio-flters li").removeClass('filter-active');
                $(this).addClass('filter-active');

                var value = $(this).attr('data-filter');
                if (value == "all") {
                    $('.portfolio-item').show('3000');
                }
                else {
                    $(".portfolio-item").not('.' + value).hide('2000');
                    $('.portfolio-item').filter('.' + value).show('2000');

                }
            });

    });

If i remove ..portfolio-container class on load window from isotope.js then details page container not flexible check my another image(But the filter working properly)..

Image card not flexible

Answer 1

There are two ways:

1,Only change window onload part to:

$('.portfolio-container').isotope({
        itemSelector: '.element-item'
    });

Then it will be showed to the first one, but it will take some time to move in my demo.

2,Try another way to use isotope:

Mind the data-filter content in 'portfolio-flters', it may different from your's. This way's

principle is to call isotope everytime when you click the different filter button

(different data-filter).

Edited code:

Mind data-filter="[email protected](' ','_')">@obj.Name</li> Data stored in database

is Digital,but you can add '.' before '@',so it can be recognized by isotope.

<div class="container">
<div class="row" data-aos="fade-up">
    <div class="col-lg-12 d-flex justify-content-center">
        <ul id="portfolio-flters">
            <li data-filter="*" class="filter-active filter-button">All</li>
            @foreach (var obj in Model.Categories)
            {
                <li class="filter-button" data-filter="[email protected](' ','_')">@obj.Name</li>
            }
        </ul>
    </div>
</div>
<div class="row portfolio-container" data-aos="fade-up">
    @foreach (var product in Model.Products)
    {
        <partial name="_IndividualProductCard" model="product" />
    }
</div>

@section Scripts
{
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
    $mygrid = $('.portfolio-container').isotope({
        itemSelector: '.portfolio-item'
    });

    $('#portfolio-flters').on('click', 'li', function () {
        var filterValue = $(this).attr('data-filter');
        $mygrid.isotope({ filter: filterValue });
    });
</script>
}

Data in database:

Result: