Questions on UI for ASP.NET MVC Forum

2 answers

176 views

I am using the PanelBar with Items Binding. I am LoadingContent on the Expansion of a Panel. I would like to "refresh" or re load the content after a panel has been expanded, collapsed and then re-expanded. Currently, the panel does not re-load the content.

Is there a way to force the panel to be re-loaded?

PanelBar

answered on 17 Nov 2023

1 answer

86 views

Telerik MVC Grid - Inline Edit: Editable fields in ClientDetailTemplate

Hello,

we want to add editable fields in the template part of a grid.

Our grid looks sth. like this:

@(
    Html.Kendo().Grid(Model.TABLE)
        .Columns(columns =>
        {
            columns.Bound(c => c.PRIO); 
            columns.Bound(c => c.COMMENT);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            ...
            .Model(m =>
            {
                m.Id(p => p.ID);
            })
        )
        .ClientDetailTemplateId("template")
        .Editable(e => e.Mode(GridEditMode.InCell))
)

The template does look sth. like this:

<script id="template" type="text/x-kendo-template">
    <div class="col-md-6">
        <p><strong>Beschreibung:</strong></p>
        <p>#: stm_bez1 #</p>
        <p>#: stm_bez2 #</p>
        <p>#: stm_bez3 #</p>
        <p>#: stm_bez4 #</p>
        <p>#: stm_bez5 #</p>
        <p>#: stm_bez6 #</p>
        <p>#: rsc_text1 #</p>
        <p>#: rsc_text2 #</p>
        <p>#: rsc_text3 #</p>
        <p>#: rsc_text4 #</p>
        <p>#: rsc_text5 #</p>
        <p>#: rsc_text6 #</p>
    </div>
    @*
        HOW WOULD WE IMPLEMENT THE EDITABLE FIELDS HERE?
    *@
</script>

How would we go about putting these fields in the template part, and have them editable and propagate to the server on save?:

Grid

answered on 15 Nov 2023

1 answer

102 views

Sort MultiSelectFor data

Hey, I'm trying to sort the data in the MultiSelectFor, so it can be displayed in alphabetical order.

                            @(Html.Kendo().MultiSelectFor(model => model.UserIds)
                                .HtmlAttributes(new { @class = "large" })
                                .Placeholder("Select users ...")
                                .DataValueField("Value")
                                .DataTextField("Text")
                                .AutoClose(false)
                                .DataSource(.DataSource(ds => ds.Read("AvailableUsers", "UserApi"))
                                 )

I've searched for this issue and tried some suggested things but with no success:

                            @(Html.Kendo().MultiSelectFor(model => model.UserIds)
                                .HtmlAttributes(new { @class = "large" })
                                .Placeholder("Select users ...")
                                .DataValueField("Value")
                                .DataTextField("Text")
                                .AutoClose(false)
                                .DataSource(ds => ds.Custom()
                                            .Transport(t => t
                                                .Read(r => r
                                                    .Action("AvailableUsers", "UserApi")
                                                    .Data("{ any: false }")
                                                )
                                            )
                                            .Sort(s => s
                                                .Add("Value")
                                                .Descending()
                                            ))
                                
                            )

 public JsonResult AvailableUsers()
 {
     var userRepo = new UserRepository(ntfy);
    var result = userRepo.GetAll().Select(_ => new SelectListItem
           {
                Text = string.Format("{0} ({1} {2})", _.Username, _.Firstname, _.Lastname),
                Value = _.Id.ToString()
           });
     return this.Json(result, JsonRequestBehavior.AllowGet);
 }

MultiSelect

Sortable

answered on 13 Nov 2023

1 answer

181 views

Context Menu for Specific Cells of Grid

I've seen some examples for displaying a context menu and retrieving the data item of the row that was clicked, but is there a way to also determine which column of the grid was clicked when the context menu is displayed?

Grid

Menu

answered on 10 Nov 2023

1 answer

64 views

Wrong icon being shown for refresh button in grid pager

When I updated to 2023.3.1010, the refresh button in the grid pager shows up as a pause icon. When I examine the page, the span is using k-i-arrow-rotate-cw. Is there a workaround for this?

Grid

answered on 09 Nov 2023

1 answer

281 views

Pager control does not display refresh icon

This problem was introduced when I upgraded to 2023.3.1010

The grid control renders it's pager like this:

<a aria-label="Refresh" class="k-pager-refresh k-link" href="/Home/Paging_Orders" title="Refresh">
     <span class="k-icon k-i-arrow-rotate-cw"></span>
</a>

Note the icon. If it was using FONT icons, it should have the class k-icon-font as well as the other classes.
If it was using SVG icons, it should have an embedded SVG inside it.

But it has neither, so there is nothing displayed at all.

I went to the online demonstration page https://demos.telerik.com/aspnet-mvc/grid/paging. Once you click the checkbox to display the refresh button, it renders the button correctly as an SVG icon.

<span class="k-icon k-svg-icon k-svg-i-arrow-rotate-cw k-button-icon">
      <svg aria-hidden="true" focusable="false" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M480 288c0 123.7-100.3 224-224 224S32 411.7 32 288 132.3 64 256 64V0l160 96-160 96v-64c-88.2 0-160 71.8-160 160s71.8 160 160 160 160-71.8 160-160c0-29.1-7.8-56.4-21.5-80l55.5-32c19.1 32.9 30 71.2 30 112z"></path></svg>
</span>

I do not understand what this demo is doing that my code is not.

Here is how I am creating the grid:

            @(
                Html.Kendo().Grid<FromAspnetFrameworkTemplate.Models.OrderViewModel>()
                    .Name("Grid")
                    .Columns(
                        columns =>
                        {
                            columns.Bound(o => o.OrderID);
                            columns.Bound(o => o.ContactName);
                            columns.Bound(o => o.ShipAddress);
                            columns.Bound(o => o.OrderDate).Format("{0:d}");
                            columns.Bound(o => o.ShipCountry);
                        }
                    ).Pageable(
                        pager => pager.PageSizes(new[] { 10, 20, 30 }).Refresh(true).Responsive(false)
                    ).DataSource(dataSource => dataSource
                          .Ajax()
                              .Read(read => read.Action("Paging_Orders", "Home"))
                      )
            )
 
I am using the following Nuget packages:
Telerik.UI.for.AspNet.Mvc5, 2023.3.1010
Telerik.FontIcons, 2.0.0
Telerik.SvgIcons, 2.0.0
I am including the styles and scripts like so:

<link href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-main.css" rel="stylesheet" />
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/kendo/2023.3.1010/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2023.3.1010/kendo.aspnetmvc.min.js"></script>

Pager

answered on 03 Nov 2023

0 answers

84 views

Changing DataGrid Selection Checkbox Image

Hello,

I was wondering if there is a way to change the asp.net mvc data grid checkbox selection option's image from a checkbox to say, a star.

Or would I need to essentially rebuild the functionality through a custom template?

Thanks

Grid

MultiSelect

Styling

asked on 02 Nov 2023

0 answers

66 views

accessing the click event of kendo ui for mvc columnsmenu

I want to do some operation on columnsmenu click event of kendo ui fo mvc. Please suggest how we can handle that event and whats the event name in Jquery.

Grid

updated question on 02 Nov 2023

1 answer

260 views

Getting exception while exporting data to excel using server export in kendo mvc grid

Hi,

We have an export to Excel functionality implemented for Kendo MVC Grid. We have used Telerik.Documents.SpreadSheetProcessing and Kendo.MVC.Export libraries to achieve this functionality.
Followed the steps mentioned in this url :https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/export/server-export.

Now, this seems not working and we are receiving the below exception

System.InvalidOperationException: The workbook must have at least one worksheet. at Telerik.Documents.SpreadsheetStreaming.Exporters.Xlsx.XlsxWorkbookExporterBase.CompleteWriteOverride() at Telerik.Documents.SpreadsheetStreaming.Core.EntityBase.Dispose(Boolean disposing) at Telerik.Documents.SpreadsheetStreaming.Core.EntityBase.Dispose() at Kendo.Mvc.Export.Helpers.CollectionToStream(SpreadDocumentFormat format, IEnumerable data, IList`1 model, String title, Action`1 columnStyleAction, Action`1 rowStyleAction, Action`1 cellStyleAction) at Kendo.Mvc.Export.ExportExtensions.ToXlsxStream(IEnumerable instance, IList`1 model, String title, Action`1 columnStyleAction, Action`1 rowStyleAction, Action`1 cellStyleAction) at SGE.Aladdin.Web.Controllers.ReportController.<ExportWorkRequestListInExcel>d__273.MoveNext() in D:\Aladdin Dev Code\SGE.Aladdin.Web\Controllers\ReportController.cs:line 21500

Exception is getting triggered when we convert the list to ToXlsxStream. Not able to figure out what exactly has gone wrong. Sharing the code below:

Jquery code
--------------
$("#btnExcelWrReport").click(function () {
$('#WaitModal').modal('show');

var grid = $("#WorkRequestListReport").data("kendoGrid");

var currentdate = new Date();
var filename = "WorkRequestReport_" + currentdate.getDate() +
+ (currentdate.getMonth() + 1) +
+ currentdate.getFullYear() +
+ currentdate.getHours() +
+ currentdate.getMinutes() +
+ currentdate.getSeconds();
var options = {
format: $(this).data("format"),
title: filename
}
$("#export-data").val(encodeURIComponent(JSON.stringify(options)));
$("#export-model").val(encodeURIComponent(JSON.stringify(grid.columns)));

$("#frmdownload").submit();

});

$("#frmdownload").submit(function (event) {

event.preventDefault();
var actionURL = '@Url.Action("ExportWorkRequestListInExcel", "Report")';
$('#WaitModal').modal('show');
var postData = { model: $("#export-model").val(), data: $("#export-data").val() };

$.ajax({
url: actionURL,
data: postData,
type: 'POST',
success: function (data) {
$('#WaitModal').modal('hide');
window.location.href = '@Url.Action("DownloadReportInExcel", "Report")?fileGuid=' + data.FileGuid + '&filename=' + data.FileName + '&mimeType=' + data.MimeType;
@*if (data.FileGuid != "") {
$('#WaitModal').modal('hide');
window.location.href = '@Url.Action("DownloadReportInExcel", "Report")?fileGuid=' + data.FileGuid + '&filename=' + data.FileName + '&mimeType=' + data.MimeType;
}
else {
$('#WaitModal').modal('hide');
$('#MessageModal').modal('show');
$('#Message').html("@CommonResources.NoRecordsToExport");
}*@
}
});
return false;
});

Controller
----------------

var columnsData = JsonConvert.DeserializeObject<IList<ExportColumnSettings>>(HttpUtility.UrlDecode(model));
dynamic options = JsonConvert.DeserializeObject(HttpUtility.UrlDecode(data));
SpreadDocumentFormat exportFormat = options.format.ToString() == "csv" ? exportFormat = SpreadDocumentFormat.Csv : exportFormat = SpreadDocumentFormat.Xlsx;
Action<ExportCellStyle> wrReportCellStyle = new Action<ExportCellStyle>(ChangeWRReportCellStyle);

string fileName = string.Format("{0}.{1}", options.title, options.format);
string mimeType = Helpers.GetMimeType(exportFormat);
Session["IsData"] = "0";
var workRequestList= await GetExportWorkRequestList();

int i = 0;
while (Convert.ToString(Session["IsData"]) != "1")
{
i++;
}

string handle = Guid.NewGuid().ToString();
string title = DateTime.Now.ToString();
try {
title = options.title;
}
catch(Exception ex) { }
Stream exportStream = exportFormat == SpreadDocumentFormat.Xlsx ? workRequestList.ToXlsxStream(columnsData, title, cellStyleAction: wrReportCellStyle) : workRequestList.ToCsvStream(columnsData);

TempData[handle] = exportStream;
return Json(new { FileGuid = handle, FileName = fileName, MimeType = mimeType });
}
catch (Exception ex)
{
ExceptionLogHelper.Log("ReportController", "ExportWorkRequestListInExcel", ex);
return Json(new { FileGuid = string.Empty });

}

Please help me. I am not sure why this suddenly stopped working. In a different page, this same code works fine for an excel export.

Grid

answered on 30 Oct 2023

1 answer

262 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