Make listview items equal width, height

[Chili]

Dear All.

I have a listview within the listview items are displayed. This is my current code for the html. 

<section>
       <script type="text/x-kendo-tmpl" id="templateRC">

            <div id="selectedRC" class=" SetHeight">
                <span>#:ID#</span>
            </div>
        </script>


        <div class="demo-section k-content wide">
            @(Html.Kendo().ListView<SLM.Models.ViewModel>()
            .Name("listView")
            .TagName("div")
            .ClientTemplateId("templateRC")
            .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("_Reports_Chart", "Home", new { iTypeID = Model.TYPE2_ID })
            )
            )
            .Selectable(ListViewSelectionMode.Single)
            //  .Events(events => events.Change("onSelectReport"))
            )
        </div>
    </section>

My css Code:

.SetHeight {

    width: calc(50% - 3%);
    border: 1px solid #008000;
    margin: 1%;
    float: left;
}

When I check my browser the items will displayed like rectangles, so theyre not equal width and height. I tried adding some javascript to get the width and use it for the height but it keeps displaying like a rectangle.

The Jquery: 

$(function () {
    var divWidth = $('.SetHeight').width();
    $('.SetHeight').height(divWidth);
    console.log(divWidth);
});

 

(logging also returns null. When I create a custom project on codepen. it does work for some reason.)

So now is my question: What do I need to change/add/remove to make the boxes equal width and height(squares).

Kind regards. Bjorn

[Chili]

Note:
Because I have it also function it also goes through the other pages. So, I neeed to target the correct page.

[Chili]

Due the lack of reply & support I have found already the answer.

[DoomerDGR8]

Hi!

Care to share your solution?

Thanks.

[Stoyan]

Hi,

If you'd like to achieve this behavior with CSS you can set the width and height of the outer most element in the Kendo Template that you use to display items in the ListView:

    .product {
       /* omitted for brevity */
        width: 170px;
        height: 170px;
    }

I have applied the suggested code to this Telerik REPL.
Alternatively, if you'd like to style the items during runtime with JavaScript subscribe to the ListView's DataBound event since the items are created after the server responds to the read request.

.Events(e=e.DataBound("onDataBound"))

function onDataBound(e){
     //style the ListView items here
}

I hope the suggestions above are helpful.

Regards,
Stoyan
Progress Telerik