We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

list view height is always 222

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

7 Replies

NP Narayanasamy Panneer Selvam Syncfusion Team May 3, 2016 11:46 AM UTC

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) 
 
Please let us know if you have further queries, 
Regards, 
Narayanasamy P. 



AS Andrew Simpson May 4, 2016 08:28 AM UTC

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


NP Narayanasamy Panneer Selvam Syncfusion Team May 5, 2016 12:59 PM UTC

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. 
Please let us know if you have further queries, 
Regards, 
Narayanasamy P.


AS Andrew Simpson May 6, 2016 02:34 PM UTC

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


NP Narayanasamy Panneer Selvam Syncfusion Team May 9, 2016 07:05 AM UTC

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:  
  
Please let us know if need any further assistance.  
  
Regards,   
Narayanasamy P.   



AS Andrew Simpson May 11, 2016 09:15 AM UTC

thanks i will wait for the next release


NP Narayanasamy Panneer Selvam Syncfusion Team May 12, 2016 11:30 AM UTC

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. 


Loader.
Up arrow icon