Change background color on some entire tile containers

[Colin]

I have a tile layout with 11 containers in it.  I need to set the background color of 3 of the tiles to a different color.  I am using .NET Core tag helpers.

I tried adding a class attribute to one of the <container> tags, but it had no effect. 

[Aleksandar]

Hi Colin,

Currently the addition of custom attributes to the containers of the TileLayout items is not supported. This is, however, a valid request, so I went ahead and created a Feature Request on your behalf. 

Until such a configuration becomes available I can suggest the following workaround - add a class, that you can use as a selector to the body template of the items you would like to style. You can then use jQuery to find the closest card and apply the desired styling to it, for example:

<script id="crayons" type="text/x-kendo-template">
            <div class="red">
                <img class="k-card-image" draggable="false" src="@Url.Content("~/shared/images/photos/220/9.jpg")" />
            </div>
</script>

<kendo-tilelayout name="tilelayout" columns="3" resizable="true" reorderable="true" columns-width="300px" rows-height="300px">
       <containers>
            <container body-template-id="crayons" col-span="1" row-span="1" >
                <container-header text="Crayons"/>
            </container>
...
      </containers>
</kendo-tilelayout>

<script>
    $("document").ready(function(){
        $(".red").closest(".k-card").css("background-color","red");
    })
</script>

Here is a sample REPL, demonstrating the above.

Finally, I have updated your Telerik points for helping us improve our product.

Regards,
Aleksandar
Progress Telerik