Can't display kendo listview(parent) template vertically

2 posts, 1 answers
  1. Hashini Sulakkhana
    Hashini Sulakkhana avatar
    7 posts
    Member since:
    Feb 2017

    Posted 27 Jul Link to this post

    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).

  2. Answer
    Stefan
    Admin
    Stefan avatar
    1130 posts

    Posted 31 Jul Link to this post

    Hello Hashini,

    Thank you for the provided information.

    I made a similar application with this scenario and noticed that the parent container ".product" has a width of 400px and the max width of its parent is 1120px. 

    I can suggest modifying the width of the elements or the max-width of the "#listView" container.

    Also, the container has to be made scrollable with CSS in order to achieve the desired overflow result.

    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.
Back to Top