Completed
Last Updated: 23 Mar 2021 16:11 by ADMIN
Christian
Created on: 09 Mar 2021 15:40
Category: ListView
Type: Bug Report
0
Flex settings not working

Hello guys,

 

i used the listview widget with a client template and a flexing layout. I set some bootstrap classes in the htmlattributes (see example), but this set no longer the item container attributes, it sets only the widget wrapper attributes.

So far I haven't even noticed that the elements are no longer flexing, so I can't say which update changed this behavior. I also tried the (new?) flex settings, but this change anything in the mvc wrapper version.

@(Html.Kendo().ListView<mmvln.Models.FormularcenterModel.FormularcenterFormularModel>(Model.FormularcenterFormulars)
	.Name("listView")
	.TagName("div").HtmlAttributes(new { @class = "d-flex flex-wrap" })
	.Flex(x => x.Direction("column").Wrap("nowrap"))
	.ClientTemplateId("formular-template")
	.DataSource(dataSource => dataSource
		.PageSize(8)
		.ServerOperation(false)
		.Sort(sort => sort.Add(m => m.Description))
	)
	.Events(e => e.DataBound("formularDataBound"))
	.Pageable(p => p.Info(true).Input(true).Numeric(true).Refresh(true))
)

 

My workaround is some custom css for flexing.

    #listView .k-listview-content {
        display: flex;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

 

Best regards

Christian

2 comments
Christian
Posted on: 17 Mar 2021 07:32

Hey Eyup,

 

you can close this ticket.

I used the flex settings but did not set the layout setting to 'flex'. Maybe this should explained in the api documentation (https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/configuration/flex).

 

Best regards

Christian

ADMIN
Eyup
Posted on: 16 Mar 2021 14:28

Hi Christian,

 

Thank you for writing to us.

Can the described behavior be reproduced in a sample listview dojo?
https://dojo.telerik.com/OxEfuzow

This will immensely help our Front Devs to figure out what is happening.

 

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.