This is a migrated thread and some comments may be shown as answers.

Doesn't properly display kendo listview(parent) template vertically

1 Answer 73 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Hashini Sulakkhana
Top achievements
Rank 1
Hashini Sulakkhana asked on 31 Jul 2017, 09:08 AM

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 and max-width property does not working properly.

I'm try to set

 .mainsortable {
        width: 5000px;
    }

and

 #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 400px;
        width:5000px;
    }

seperately and it's working prperly.but its not expectable solution because can't adjust the width.

I attached following the screenshot of expected listview (Expected.png) and Issued listview (Issue.png).

Please give explanation for this issue.

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 02 Aug 2017, 05:28 AM
Hello Hashini,

I noticed that this is a similar question which was asked and answered in our Kendo UI ListView forum:

http://www.telerik.com/forums/can't-display-kendo-listview(parent)-template-vertically

In general, please have in mind that the ListView styling is entirely custom, and depends on the scenario. The widget styles should behave the same as if the styles are set to a regular HTML element.

I can suggest inspecting the elements using the browser developer tool to observe which element and its styles are causing the issue.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ListView
Asked by
Hashini Sulakkhana
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or