I'm having issue for display listview template vertically.
<div class="mainsortable">
@(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Product>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("ProductGrid_Read", "ListView"));
})
)
@(Html.Kendo().Sortable()
.For("#listView")
.Ignore(".order")
.Filter(">div.product")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
)
</div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<div class="panel panel-default">
<div class="panel-heading">#=ProductID# #:ProductName#</div>
<div class="panel-body">
<div class="partialsortable">
@(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Order>()
.Name("OrderlistView_#=ProductID#")
.TagName("div")
.ClientTemplateId("ordertemplate")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("Order_Read", "ListView", new { ProductID = "#=ProductID#" }));
})
.ToClientTemplate()
)
@(Html.Kendo().Sortable()
.For("#OrderlistView_#=ProductID#")
.Filter(">div.order")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
.ToClientTemplate()
)
</div>
</div>
</div>
</div>
</script>
<script type="text/x-kendo-tmpl" id="ordertemplate">
<div class="order">
Unit Price : #:UnitPrice#<br />
Quantity : #:Quantity#<br />
Discount : #:Discount#
</div>
</script>
<script>
function placeholder(element) {
return element.clone().addClass("placeholder");
}
function hint(element) {
return element.clone().removeClass("k-state-selected");
}
</script>
<style>
.mainsortable {
min-width: 1120px;
}
.order {
margin: 10px;
padding: 10px;
border: 2px solid #000;
}
.panel{
margin-left:10px;
margin-right:10px;
}
.tabstrip{
margin-bottom:10px;
}
.frame{
padding:10px;
}
#listView {
padding: 10px 5px;
margin-bottom: -1px;
min-height: 400px;
min-width:1120px;
}
.product {
float: left;
position: relative;
width: 400px;
min-height: 100px;
cursor: default;
}
.k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
In css, #listView min-width property does not working properly.I attached following the screenshot of expected listview (Expected.png) and Issued listview (Issue.png).