Change colour of each card in a list dynamically.

[Alvaro]

I would like to change the colour of each card in a list dynamically. Is this possible? something along these lines??

<div class="row e-card-layout">

    @foreach (var record in records)

    {

        RandomColour();

 

            <div class="col-lg-3 col-md-3 col-sm-6 mb-2">

          

            <SfCard>

                <CardHeader Title=@record.Name>

                    <SfButton CssClass="e-outline e-icons e-edit"></SfButton>

                    <SfButton CssClass="e-outline e-icons e-copy ml-1"></SfButton>

                    <SfButton CssClass="e-outline e-icons e-delete ml-1" @onclick="@(() => DeleteRecord(record))"></SfButton>

                </CardHeader>

 

            </SfCard>

        </div>

    }

</div>

}

 

 

 

<style>

    .e-card {

        background-color: @BackgroundColor;

</style>

 

@code {

 

    private string BackgroundColor;

 

    protected void RandomColour()

    {

        var random = new Random();

        var color = String.Format("#{0:X6}", random.Next(0x1000000));

        BackgroundColor = color;

    }

}

[Durga Gopalakrishnan]

Hi Alvaro, 

Greetings from Syncfusion. 

We have validated your reported scenario. We suggest you to specify the generated random colours to DIV tag style. We have modified sample and attached for your reference. Please check with the below code snippet and sample. 

Code Snippet 

<div class="control-section card-control-section tile_layout"> 

    <div class="row e-card-layout" style="text-align:center;"> 

        @foreach (var data in ListData) 

        { 

            RandomColour(); 

            <div class="col-lg-3 col-md-3 col-sm-6" style="background-color:@BackgroundColor"> 

                <SfCard> 

                    <CardHeader Title=@data.Title SubTitle=@data.Subtitle /> 

                    <CardContent Content=@data.Content /> 

                </SfCard> 

            </div> 

        } 

    </div> 

</div> 

 

Screenshot 

 

 

Sample 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/CardRandomColors-385362206.zip 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Durga G 

[Alvaro]

Thanks! That will work!

[Durga Gopalakrishnan]

Hi Alvaro, 

Most welcome. Kindly get in touch with us, if you need any further assistance. We are always happy in assisting you.  

Regards, 

Durga G