I am getting an invalid template error when I am creating a ListView in which the Editor Template contains a select list that is bound to a datasource that contains elements with an apostrophe.  It looks like the text is getting escaped, as the error message shows it being created as "<option value="Conveners&#x27; Corner (New)">Conveners&#x27; Corner (New)</option>", but I don't know if it's Kendo doing the escaping or MVC or something else.  This encode contains a # sign though, and that doesn't get escaped, which causes the error.

Is this a bug with the ListView control?  Is there some other event where I can escape the escaped text to put a \\ before an # characters?

Hi guys,

I think I'm lacking some sort of fundamental knowledge of either Kendo UI or MVC itself. I have a fairly simple example which hopefully you can recreate and explain where I'm going wrong. Before I get to the code I'll explain what I'm trying to accomplish:

I have a form which will be used to capture details as you would normally expect. Inside this form I have a list view, the purpose of which is to allow the user to create and display information about an unspecified number of people. When it comes to saving these details I need the "Base" information to be saved first so that it is given an appropriate Id, after which I can then save the party details which would would of course reference this newly created id.

I'm trying to implement this as follows:

Classes

Controller

View

Editor Template

The view displays the pre-populated party data correctly which I guess implies that it has bound to the model correctly. However upon submitting the form the partyDetails list is null. The randomData string is populated correctly with whatever I entered, but I cannot figure out how to pass the partyDetails back to the controller.

I've done a bit of googling and found people sometimes struggle to pass IEnumerables to the controller, but all examples of the solutions do not involve the KendoUI and as such I struggle to implement them.

Any assistance would be greatly appreciated.

Many thanks

Marc

I'm not sure what control or group of controls would best be used to accomplish the following:

I need a page for reviewing submitted images(look similar to a carousel)
- At any given time a Reviewer may have 1000 images to review.  They can either skip(arrow right), accept(button) or reject(button).
- If they skip, it should go to the next image
- Once they have skipped any images they should be able to go back(arrow left)
- If they accept or reject, it should remove that image from the queue and go to the next image

- A page with a control to view a single image, description and name
- Buttons for accept and reject
- Left and Right arrow buttons to advance or go back(to skipped images only)
- At any given time there may be 1000 images to review so we don't want to hold them all in memory or go to the database for each one...maybe get 10 at a time and when we have zero go get 10 more?

Hello, I am trying to set the pagesize of my listview on the client side and I am unable to figure out how to do it. I bound the databound event to a javascript function and I am trying to set the pageSize using "listview.dataSource.pageSize(5)"  but when I call this function once it keeps getting called over and over in a  loop until the stack runs out of room. It does set the pagesize but it shouldn't keep getting called. What am I doing wrong?

Hey! i am using telerik listview Template for asp.net MVC i want to filter data from server side i.e i enter data in textbox send to action method and filter data and than pass to again view and bind data to listview initially my listview working perfect all data come through database here is my Code

<script type="text/x-kendo-tmpl" id="template">
    <div class="col-md-8  jumbotron">
        <div class="col-sm-4">
            <span><b>Name:</b></span><br />
            <span><b>Gender:</b></span><br />
            <span><b>DOB:</b></span><br />
            <span><b>Country:</b></span><br />
            <span><b>Province:</b></span><br />
            <span><b>Interset:</b></span><br />
        </div>
        <img img src="#:Image#" width="100" height="100" />
        <div class="col-sm-4">
            <span>#:FirstName#</span><br />
            <span>#:Gender#</span><br />
            <span>#:DOB#</span><br />
            <span>#:CountryName#</span><br />
            <span>#:ProvinceName#</span><br />
            <span>#:Interset#</span><br />
        </div>
    </div>
</script>

<div class="demo-section k-content wide">
    @(Html.Kendo().ListView<Assignment.Models.StudentViewModel>()
                .Name("ListView")
                .TagName("div")
                .ClientTemplateId("template")
                .DataSource(dataSource => dataSource
                .ServerOperation(true)
                .Read(read => read.Action("Get", "Home")
                )
                )
    )
</div>

// here im getting data from server for first load using store procedure now i need to filter data from server side in action method 

public JsonResult Get([DataSourceRequest] DataSourceRequest request)
        {
            var studentData = db.sp_GetStudentData().Select(list => new StudentViewModel
            {
                FirstName = list.FirstName,
                Gender = list.Gender,
                DOB = list.DOB.Value.ToShortDateString(),
                Image = list.Image,
                CountryName = list.Name,
                ProvinceName = list.ProvinceName,
                Interset = list.Interset
            }).ToList();
            return Json(studentData.ToDataSourceResult(request));
        }

I'm using HTML helper list view. I'm not getting loading image or loading message while loading the Items in the listview HTML helper. Also, how to display "No items to display" message when the listview is empty. Below is the code that I have

 
   <div class="col-sm-12 k-content wide">
        @(Html.Kendo().ListView<CNO.CA.MemberPortal.Web.UI.Viewmodels.DocumentManagementModel>(Model.document)
            .Name("DocumentslistView")
            .TagName("div")
            .ClientTemplateId("template")
            .DataSource(datasource => datasource
            .Read(read => read.Action("GetDocumentsByPersonId", "Profile"))
            .Model(m => m.Id("ID"))
            .ServerOperation(false)
            .PageSize(10))
            .Pageable()                    
             )
)
    </div>

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.

How can I specify the id of the record as an optional parameter in the UrlAction?

Below is my view containing my ListView as well as my controller.  I can successfully edit and save my data client side, but it never calls the update action on my controller and I can't figure out why.  I've copied the example from the Editing demo, but can't figure out what I'm missing.  Any ideas?