Questions on UI for ASP.NET MVC Forum

1 answer

16 views

How to Add new item to MVC ListView in a Popup?

I have a ListView that works very nicely with most of the default behavior as shown below. However, I would like to create a new item in the ListView by using a Popup form. This form could also be used by the edit event if that simplifies the code, but does not have to be the same, and the edit functionality could work as it does now. I have looked at the popup editing feature as described here. However, I could not figure out how to make this work for create as there is no create event on the ListView. Does everything have to work outside the framework of the control, so that the add is using a separate Ajax call and then refreshing the view, or is there a better way to keep this within the structure of the ListView and its events?

Add Button and ListView:

            @(Html.Kendo().Button()
                .Name("AddNew")
                .Icon("plus")
                .FillMode(ButtonFillMode.Solid)
                .Rounded(Rounded.Medium)
                .HtmlAttributes(new { @class = "add-button" })
                .Events(e=>e.Click("addNewClick"))
            )

            @(Html.Kendo().ListView<MyNamespace.Models.ItemComment>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("commentListTemplate")
                .Editable()
                .DataSource(dataSource => dataSource
                    .Model(model => model.Id(comment => comment.CommentID))
                    .Read(read => read.Action("Comments_Read", "Comment").Data("getCommentReadParameters"))
                    .Update(update => update.Action("Comments_Update", "Comment"))
                    .Destroy(destroy => destroy.Action("Comments_Delete", "Comment"))
                    .Events(e => e.Error("epic.error.kendoErrorHandler"))
                )
                .Events(e => e.DataBound("onCommentsDataBound"))
                .Events(e => e.Remove("deleteConfirmation"))

            )

Display Template:

<script type="text/x-kendo-tmpl" id="commentListTemplate">
     <div class="k-card">
            <div class="k-card-body k-card-horizontal k-vbox k-column" style="margin:0;padding:4px 4px 0">
                <img class='k-card-image' style="height:16px; margin-right:5px;" src="@Url.Content("~/Content/assets/images/blue-person.png")">
                <div class='commentHeader'>
                    <h6 class='k-card-subtitle'>#= UserID #</h6>
                    <div class="edit-buttons">
                        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#">#= kendo.ui.icon({ icon: 'pencil' }) #</a>
                        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#">#= kendo.ui.icon({ icon: 'x' }) #</a>
                    </div>
                    <p>
                        #: Comment #
                    </p>
                </div>
            </div>
    </div>
</script>

Supporting JavaScript functions:

<script type="text/javascript">

    function onCommentsDataBound() {
        if (this.dataSource.data().length == 0) {
            $("#listView").append("<h3 style='padding: 2px 4px 0;'>No comments</h3>");
        }
    }

    function addNewClick(e) {
        var listView = $("#listView").data("kendoListView");
        listView.add();
        e.preventDefault();
    }

    function deleteConfirmation(event) {

        if (!confirm("Are you sure you want to delete this comment?"))
            event.preventDefault();
    }

</script>

Thanks, Bob

ListView

answered on 07 May 2025

1 answer

263 views

Listview default selection of first item

When data is loaded in kendo mvc listview, how to make first record is automatically selected and display the result in SkeletonContainer? when there is no item to select it shouldn't throw any kind of error

is there any way to keep multiselect dropdown in search and pass multiple values from same dropdown when user clicks search

@{
    ViewBag.Title = "Search Jobs";
}
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model IDOHJobBank.Data.Models.UserSearchViewModel

<div>
    <form style="padding-bottom: 10px; padding-left:10px; padding-right:10px;">
        <div class="row">
            <div class="col-md-1">
            </div>
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.JobTitle, new SelectList(
                                                            Model.ddlTitles, "Id", "Name", 0), "Select Title", new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.countyName, new SelectList(
                                                            Model.ddlCounties, "Id", "Name", 0), "Select County", new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.jobType, new SelectList(
                                                            Model.ddlJobTypes, "Id", "Name", 0), "Select JobType", new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.divName, new SelectList(
                                                            Model.ddlDivisions, "Id", "Name", 0), "Select Division", new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                <input type="button" name="Search" value="Search" style="text-align:center;" class="btn btn-info" id="btnSubmit">
                <input type="button" name="Clear" value="Clear" style="text-align:center;" class="btn btn-info" id="btnClear">
            </div>
            @*<div class="col-md-1">
            </div>*@
        </div>
    </form>
</div>

<script type="text/x-kendo-tmpl" id="leftTemplate">
    <div class="product">
        <P style="font-size:medium; font-weight: bold">#:Title#</P>

        <p style="margin: 0px 0px 5px;"> Posted Date : #: kendo.toString(PostDate, "MM/dd/yyyy")# </p>
        <p style="margin: 0px 0px 5px;"> Positions Available : #= Vacancies # </p>
        <p style="margin: 0px 0px 5px;"> County : #= County # </p>
        <hr>
        <p>#= JobDesc #</p>
    </div>
</script>

<script>
    function onChange(e) {
        var selected = e.sender.select();
        //console.log(selected)
        var dataItem = e.sender.dataItem(selected[0])
        $.ajax({
            type: "GET",
            url:"@Url.Action("GetCard","User")",
            data: { id: dataItem.ID },
            success: function (viewHTML) {
                $("#skeleton").hide();
                $(".selected-item").html(viewHTML);
            },
            error: function (errorData) { console.log(errorData) }
        });
    }
    function onDataBound(e) {
        //var listView = $('#jobsListView').data('kendoListView');
        ////listView.select(listView.element.children().first());
        //listView.select(".k-first");

        //var listView = e.sender;
        //alert(listView);
        //var firstItem = listView.element.children().first();
        //listView.select(firstItem);


        //// get a reference to the ListView widget
        //var listView = $("#jobsListView").data("kendoListView");
        //// selects first ListView item
        //console.log(listView.content.children().first());
        //listView.select(listView.content.children().first());
    }
    function searchCriteria() {
        return {
            JobTitle: $("#JobTitle").val(),
            countyName: $("#countyName").val(),
            jobType: $("#jobType").val(),
            divName: $("#divName").val()
        };
    }
    $("#btnSubmit").click(function () {
        $("#jobsListView").data("kendoListView").dataSource.read();
    });
    $("#btnClear").click(function () {
        $("#JobTitle").val('');
        $("#countyName").val('');
        $("#jobType").val('');
        $("#divName").val('');
        $("#jobsListView").data("kendoListView").dataSource.read();
    });
</script>

<div class="parent">
    <div class="demo-section narrow">
        @(Html.Kendo().ListView<IDOHJobBank.Data.Models.UserJobDetails>()
            .Name("jobsListView")
            .TagName("div")
            .ClientTemplateId("leftTemplate")
            .DataSource(dataSource => dataSource
                .PageSize(10)
                .Model(m =>
                {
                    m.Id(f => f.ID);
                }
                )
                .Read(read => read.Action("Jobs_Read", "User").Data("searchCriteria"))
            )
            .Scrollable()
            .Pageable()
            .Selectable(s => s.Mode(ListViewSelectionMode.Single))
            .Events(e => { e.Change("onChange"); e.DataBound("onDataBound"); })
        )
    </div>

    <div class="selected-item" style="display:block;">
        @(Html.Kendo().SkeletonContainer()
            .Name("skeleton")
            .Animation(SkeletonContainerAnimation.Pulse)
            .Template(
                "<div class='k-card'>" +
                    "<div class='k-card-header'>" +
                        "<div>" +
                            "<span data-shape-circle class='k-card-image avatar'></span>" +
                        "</div>" +
                        "<div class='user-info' style='width: 100%;'>" +
                            "<span data-shape-text class='k-card-title'></span>" +
                            "<span data-shape-text class='k-card-subtitle' style='width: 35%;'></span>" +
                        "</div>" +
                    "</div>" +
                    "<span data-shape-rectangle style='width: 800px; height: 480px; '></span>" +
                        "<div class='k-card-body'>" +
                                "<span data-shape-text></span>" +
                            "</div>" +
                        "</div>"+
                "</div>")
        )
    </div>
</div>

<style>
    .container-fluid {
        display: block;
    }

    .parent {
        display: flex;
    }

    .parent > div {
        display: inline-block;
    }

    .narrow {
        width: 35%;
    }

    .narrow > .k-pager {
        border-color: transparent;
        background-color: rgb(255,255,255);
    }

    .k-listview {
        border-color: transparent;
    }

    .selected-item {
        padding: 10px 5px;
    }

    .card {
        width: 60%;
        height: 480px;
    }

    #jobsListView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 510px;
        height: auto !important;
        /* Avoid cutout if font or line is bigger */
        font: inherit;
    }

    .product {
        float: left;
        position: relative;
        width: 95%;
        height: auto !important;
        margin: 0 5px;
        margin-bottom: 10px;
        padding: 5px;
        border: 0.5px solid grey;
        border-radius: 5px;
    }

    .product img {
        width: 150px;
        height: 150px;
    }

    .product h3 {
        margin: 0;
        padding: 3px 5px 0 0;
        max-width: 96px;
        overflow: hidden;
        line-height: 1.1em;
        font-size: .9em;
        font-weight: normal;
        text-transform: uppercase;
        color: black;
    }

    .main-image {
        width: 180px;
        height: 180px;
    }

    .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .scrollable {
        overflow-y: auto;
        max-height: 400px;
    }

    .k-card {
        border-radius: 6px;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.4285714286;
        display: flex;
        flex-direction: column;
        position: fixed;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .k-textbox, .k-textbox > input {
        font-size: 100%;
        font-family: inherit;
        border-style: solid;
        border-width: 1px;
        -webkit-appearance: none
    }
</style>

using IDOHJobBank.Data.Models;
using IDOHJobBank.Data.Services;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IDOHJobBank.External.UI.Controllers
{
    public class UserController : Controller
    {
        private JobBankExternalService eService;
        public UserController()
        {
            eService = new JobBankExternalService();
        }

        // GET: User
        public ActionResult Jobs()
        {
            var vm = eService.GetUserDropdownValues();
            
            return View(vm);
        }

        public ActionResult Jobs_Read([DataSourceRequest] DataSourceRequest request, string JobTitle, string countyName, string jobType, string divName)
        {
            var usrSearch = new UserSearchViewModel
            {
                JobTitle = JobTitle,
                countyName = countyName,
                jobType = jobType,
                divName = divName
            };

            var jobList = eService.GetUserJobDetails(usrSearch);

            //var result = GetAll();
            return Json(jobList.ToDataSourceResult(request));
        }

        public ActionResult GetCard(int id)
        {
            var model = eService.GetUserJobDetailsByID(id);
            return PartialView("_Card", model);
        }
    }
}

ListView

answered on 27 Oct 2023

1 answer

162 views

Using Listview without Ajax Datasource binding

I am trying to find a way to populate a Listview without the need to create a Read action. currently, in my Controller class, I have an action method that gets called with a query string.

Controller.cs

public IActionResult Report(string blocknumber)
{
var model = new List<Report>();
model = _maExtensionService.GetReport(blocknumber).Result.ToList();
ViewBag.BlockList = model;
return View();
}

My cshtml

Report.cshtml

@(Html.Kendo().ListView<Report>(ViewBag.BlockList as IEnumerable<Report>)
.Name("Reportgrid")
.TagName("div")
.Pageable())

I have tried to use ViewBag in different ways and also Viewdata to bind and or hold data to be used on the page. When the page loads I am not seeing data populate the Listview. Is there another way I should be doing this? Thank you for your time

ListView

answered on 03 Oct 2023

2 answers

184 views

trying to implement same as in link

HI,

I am trying to implement same as in the below link. Left side I will have some kind Post. When user clicks on post, a detail description of the post and link to post. How can i achieve that using Kendo UI.

https://www.simplyhired.com/search?q=public+health&l=indianapolis%2C+in&job=iJJy6i0E0V-4gvVMEPNpNN_jKCO99ik22-I_b_wJfFsVWYYHszfIow&t=7&sr=100

https://www.indeed.com/?vjk=ecee10295b7129db&advn=2889100715288898

Thanks

ListView

answered on 29 Sep 2023

0 answers

66 views

Kendo nested listview Error

I am trying to create an nested listviews but getting error in console when in .name of nested list view. Faced similar issue while creating nested grids

error in console: jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #inner#=id#
at fa.error (jquery.min.js:2:12750)
at fa.tokenize (jquery.min.js:2:18803)
at fa.select (jquery.min.js:2:21611)
at Function.fa [as find] (jquery.min.js:2:7337)
at n.fn.init.find (jquery.min.js:2:24126)
at new n.fn.init (jquery.min.js:2:24693)
at n (jquery.min.js:2:406)
at HTMLDocument.<anonymous> (NCRFgfUserScreen:1138:3929)
at i (jquery.min.js:2:27466)
at Object.fireWith [as resolveWith] (jquery.min.js:2:28230)
fa.error @ jquery.min.js:2
fa.tokenize @ jquery.min.js:2
fa.select @ jquery.min.js:2
fa @ jquery.min.js:2
find @ jquery.min.js:2
n.fn.init @ jquery.min.js:2
n @ jquery.min.js:2
(anonymous) @ NCRFgfUserScreen:1138
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2

below is my code.

<div id="Lots">
@(Html.Kendo().ListView<Fellowship.Models.NCRPlantLot>()
.Name("outerListView") // Use a unique name for the outer ListView
.TagName("div")
.Deferred()
.DataSource(dataSource => dataSource
.PageSize(8)
.Model(model => {
model.Id(p => p.id);
model.Field(p => p.lot_number);
model.Field(p => p.po_number);
model.Field(p => p.quantity_affected);
model.Field(p => p.quantityReturn_to_supplier);
})
.Create(create => create.Action("Editing_Create", "NCRData"))

.Read(read => read.Action("ExampleData", "NCRData", new { id = "#=id#" }))
.Update(update => update.Action("ExampleData", "NCRData"))
.Destroy(destroy => destroy.Action("ExampleData", "NCRData"))

)
.Pageable()
.ClientTemplateId("template") // Replace "template" with the ID of the template for the outer ListView
.Editable()
)

<script type="text/x-kendo-tmpl" id="template" nonce="@Application_Nonce">
<div class="lot-view k-widget">
<div class="task">
@(Html.Kendo().ListView<Fellowship.Models.NCRPoDetails>()
.Name("inner#=id#") // Use the generated unique identifier for each inner ListView
.TagName("div")
.Deferred()
.DataSource(dataSource => dataSource
.PageSize(5)
.Read(read => read.Action("ExampleData2", "NCRData"))
.Model(model => {
model.Id(p => p.id);
model.Field(p => p.PO_Number);
model.Field(p => p.quantity);
})
)
.Pageable()
.ClientTemplateId("inner") // Replace "template2" with the ID of the template for the inner ListView (if you haven't changed the ID, it should be fine as is)
.Editable()

)

</div>
<dl>
<dt>Lot Number</dt>
<dd>#:lot_number#</dd>
<dt>Po Number</dt>
<dd>
# if (data.po_number && data.po_number.length > 0) { #
<p>#:data.po_number.join(', ')#</p>
# } else { #
<p>No PO numbers available</p>
# } #
</dd>
<dt>Quantity affected</dt>
<dd>#:quantity_affected#</dd>
<dt>quantityReturn_to_supplier</dt>
<dd>#:quantityReturn_to_supplier#</dd>
</dl>
<div class="edit-buttons">
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#"><span class="k-button-icon k-icon k-i-close"></span></a>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#"><span class="k-button-icon k-icon k-i-edit"></span></a>
</div>



</div>

</div>
</script>
<script nonce="@Application_Nonce">

</script>

<script type="text/x-kendo-tmpl" id="inner" nonce="@Application_Nonce">
<div class="inner-lot-view ">
<dl>
<dt>Lot Number</dt>
<dt>Po Number</dt>
<dd>
jn kj k.,m m,nklm.
</dd>
<dt>Quantity affected</dt>
</dl>
<div class="edit-buttons">
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#"><span class="k-button-icon k-icon k-i-close"></span></a>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#"><span class="k-button-icon k-icon k-i-edit"></span></a>
</div>
</div>
</script>

</div>
<div class="form-group row">
@*<a id="add-new-button" role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-add-button" href="#"><span class="k-button-icon k-icon k-i-add"></span>Add new record</a>*@

<button id="add-new-button" type="button" class="btn btn-primary k-add-button" style=" width: 10%; height: 1.5em;"> Add Lot</button>
</div>

ListView

Security

updated question on 01 Aug 2023

0 answers

97 views

Kendo MVC ListView within ListView

Hi There,

Nested ListView requirement.

Is there any way we can implement nested listview for given design?

Thank You,

BDP

ListView

asked on 31 Jul 2023

1 answer

277 views

ListView item radio button selectable

Is there a way to control the way selected list view items are rendered? Can it be selected with a radio button instead of being highlighted?

ListView

answered on 06 Dec 2022

0 answers

109 views

SignalR enabled grid - how to set deferred promise?

I have an app thats working with SignalR grids, but now we want to add bearer auth.

The token handling stuff has to happen before my SignalR promise is set, but the problem is the Kendo components required the SignalR promise to bind.

How can I set a SignalR promise that the Kendo components can use which will not resolve until my own token handling functions are complete?

Here is a sample of what we're doing:

getTokenPopup({
                scopes: ["api://918c95d7-8c39-4486-9e15-83d061a30fa6/access_as_user"]
            })
                .then(response => {
                    $.ajaxSetup({
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader('Authorization', 'Bearer ' + response.accessToken);
                        }
                    });

                    myApp.hub = $.connection.searchHub;
                   myApp.hubStart = $.connection.hub.start({
                      waitForPageLoad: false,
                      transport: "longPolling"
                    });
                })
                .catch(error => {
                    console.error(error);
                });

Grid

ListView

asked on 31 Oct 2022

1 answer

100 views

listview MVC.. ALL eamples dont work

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/listview/binding/ajax-binding

@(Html.Kendo().ListView<ListViewCore.Models.OrderViewModel>()
          .Name("ListView")
          .TagName("div")
          .ClientTemplateId("template")
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(6)
              .Read(read => read.Action("Orders_Read", "ListView").Data("additionalData"))
          )
          .Pageable()
      )
      <script>
          function additionalData() {
              return {
                  firstName: "John",
                  lastName: "Doe"
              };
          }
      </script>
 
the .Ajax() instantly doenst work. EVERY sample fails !!!
 
Anyone have a listview<T> that actually works? the demos and samples all fail.