list view height is always 222

[Andrew Simpson]

Html.EJ().ListView("locallistview").Height(600).ShowHeader(true).HeaderBackButtonText("Back").Width(220).PersistSelection(true).ShowHeader(true).Items(i =>
{
    i.Add().Text("Jobs").Children(child1 =>
    {

        child1.Add().Text("Jobs to be confirmed").NavigateUrl("UnconfirmedJobs?branch=" + @ViewBag.Brch_Code);
        child1.Add().Text("Reactive").NavigateUrl("ReactiveJobs?branch=" + @ViewBag.Brch_Code);
        child1.Add().Text("Planned").NavigateUrl("PlannedJobs?branch=" + @ViewBag.Brch_Code);
        child1.Add().Text("Create a job").NavigateUrl("RequestJob?branch=" + @ViewBag.Brch_Code);
    });
    i.Add().Text("Quotes").NavigateUrl("BranchQuotes?branch=" + @ViewBag.Brch_Code);

    i.Add().Text("Site").Children(child3 =>
    {
        child3.Add().Text("All Documents").NavigateUrl("SiteDocs?branch=" + @ViewBag.Brch_Code + "&type=All");
        child3.Add().Text("Asbesdos Report");
        child3.Add().Text("Floor Plans");
        child3.Add().Text("Asset Register");
        child3.Add().Text("Certificates");
        child3.Add().Text("Servicing");
        child3.Add().Text("Managers Notes");
        child3.Add().Text("Photographs");
        child3.Add().Text("Misc");


    });


}).HeaderTitle(@ViewBag.BranchName)

as you can see from the above code i have set the height of the control to 600 but it always displays as an inline style height of 222 which means only the first 4 items in the list are displayed.
how can i change the height of the control so all rows are displayed as the height parameter does not work.
also the order of the rows change everytime is is refreshed. how can i stop it doing that.

thanks
andrew

[Narayanasamy Panneer Selvam]

Hi Andrew Simpson, 

We are able to reproduce your issue with setting ListView height. To overcome this, we suggest you to set height property of ListView as “auto” from JavaScript. Also when we set height as 600, then the some ListView items get hidden if there are more number of items in sub level. Please refer the below code example: 

<script type="text/javascript"> 

        $(function () { 

            $("#locallistview").ejListView({ height:"auto" }); 

        }); 

</script> 

@Html.EJ().ListView("locallistview").Width(220).ShowHeader(true).HeaderBackButtonText("Back").PersistSelection(true).ShowHeader(true).Items(i => 

{ 

        //your code here 

  

  }).HeaderTitle(@ViewBag.BranchName) 

 

 Sample link: http://www.syncfusion.com/downloads/support/forum/123944/ze/ListviewSample-1681515226 

Please let us know if you have further queries, 

Regards, 

Narayanasamy P. 

[Andrew Simpson]

Thankyou for your quick reply. your solution has solved the height issue but has changed the behavour of the control. the whole control jumps to the right and slides back now when selecting a child menu. i use this control in a layout and the order of the child items changes depending on which one is clicked is there any way to force the child items to list in the same order ie alphabetically or in the order typed.

thanks andrew

[Narayanasamy Panneer Selvam]

Hi Andrew Simpson, 

Query1:”The order of the child items changed depending on click”. 

 We are using browser native sorting functions to sort records. Some browsers did not enabled stable sorting like IE. So, if stable sort is must for user scenario this needs to be enabled in sample level using following property  ej.support.stableSort = false; in javascript. 

Please refer the below code example: 

  <script type="text/javascript"> 

    $(function () { 

        ej.support.stableSort = false; 

            $("#locallistview").ejListView({ height: "auto" }); 

        }); 

        </script> 

        @Html.EJ().ListView("locallistview").Width(220).ShowHeader(true).HeaderBackButtonText("Back").PersistSelection(true).ShowHeader(true).Items(i =>{ 

//Your Code Here 

}).HeaderTitle("ListView") 

  

Query2:” The whole control jumps right and slide back when selecting child menu”. 

         We couldn’t get your query clearly can you please give us any working sample to reproduce your issue or modify our sample and explain us with a demo screenshot ? It will helpful to resolve your issue. 

 Sample Link:  http://www.syncfusion.com/downloads/support/forum/123944/ze/ListView_height-31814833 

Please let us know if you have further queries, 

Regards, 

Narayanasamy P.

[Andrew Simpson]

for query 2 if you create a new mvc project and copy and paste the following code in the home index view.
<div style="width: 220px ; display: inline-block; height:500px;">
    @Html.EJ().ListView("locallistview").ShowHeader(true).HeaderBackButtonText("Back").PersistSelection(true).ShowHeader(true).Items(i =>
{
    i.Add().Text("Jobs").Children(child1 =>
    {
        child1.Add().Text("Reactive").NavigateUrl("index");
        child1.Add().Text("Planned").NavigateUrl("index");
        child1.Add().Text("Create a job").NavigateUrl("index");
        child1.Add().Text("Jobs to be confirmed").NavigateUrl("index");
    });
    i.Add().Text("Quotes").NavigateUrl("index");

    i.Add().Text("Site").Children(child3 =>
    {
        child3.Add().Text("All Documents").NavigateUrl("index");
        child3.Add().Text("Asbesdos Report").NavigateUrl("index");
        child3.Add().Text("Floor Plans").NavigateUrl("index");
        child3.Add().Text("Asset Register").NavigateUrl("index");
        child3.Add().Text("Certificates").NavigateUrl("index");
        child3.Add().Text("Servicing").NavigateUrl("index");
        child3.Add().Text("Managers Notes").NavigateUrl("index");
        child3.Add().Text("Photographs").NavigateUrl("index");
        child3.Add().Text("Misc").NavigateUrl("index");

    });


}).HeaderTitle("testc")
    <script type="text/javascript">

        $(function () {
            ej.support.stableSort = false;
            $("#locallistview").ejListView({ height:"auto" });
        });
    </script>

select the site menu all the children appear on the right and slide in it is very quick.
if you rem out   $("#locallistview").ejListView({ height:"auto" }); and try again you will see the diference. the children appear on the right but are invisible and appear to slide into the control.

thanks for your help
andrew

[Narayanasamy Panneer Selvam]

Hi Andrew Simpson,     

  

We can able to reproduce your issue in the shared sample. We have fixed your issue at sample level, and this will be resolved in our upcoming main release Volume -2,2016.   

  

We have modified the shared sample and it is available in the following link:  

http://www.syncfusion.com/downloads/support/forum/123944/ze/List_viewModified253920783   

  

Please let us know if need any further assistance.  

  

Regards,   

Narayanasamy P.   

[Andrew Simpson]

thanks i will wait for the next release

[Narayanasamy Panneer Selvam]

Hi Andrew Simpson, 

Vol 2, 2016 is expected to be rolled out by mid of June 2016. We will let you know once it is released. 

  

Regards,  

Narayanasamy P.