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

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

    Posted 31 Jul 2017 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 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.

  2. Stefan
    Admin
    Stefan avatar
    2493 posts

    Posted 02 Aug 2017 Link to this post

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