Telerik Forums
UI for ASP.NET MVC Forum
1 answer
62 views

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>


Eyup
Telerik team
 answered on 03 Nov 2023
0 answers
20 views

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

Jimmy
Top achievements
Rank 1
 asked on 02 Nov 2023
0 answers
20 views
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.
gaurav
Top achievements
Rank 1
 updated question on 02 Nov 2023
1 answer
58 views

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.

                                                           
Anton Mironov
Telerik team
 answered on 30 Oct 2023
1 answer
63 views

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);
        }
    }
}

Babu
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 27 Oct 2023
0 answers
24 views

Hi,

I'd like to know if it's possible to resize the View HTML popup window on the Editor widget? I've tried to hook an execute function I created in TypeScript to the ViewHtml event on the toolbar but I keep getting an undefined when trying to grab the window.


 @(Html.Kendo().EditorFor(a => Description)
                    .Tag("div")
                    .PasteCleanup(p => p
                    .MsTags(true)
                    .MsConvertLists(true)
                    .MsAllFormatting(false))
                    .Tools(tools => tools
                        .ViewHtml()
                    )
                    .Events(e => e.Execute("CareerAds.onViwHtmlExecute")))

export function onViwHtmlExecute(e) {
        console.log(e.name);
        if (e.name == "viewhtml") {
            let window = $(".k-editor-dialog").data("kendoWindow");
            console.log(window);
            window.setOptions({ width: 1000 });
        }
    }

window is always undefined and I'm struggling to figure out how to actually grab a hold of the window as I can't call window.setOptions on this for obvious reasons.

 

Thanks

sudo
Top achievements
Rank 1
 asked on 25 Oct 2023
1 answer
30 views

I'm using a k-grid with an items per page dropdown, it initially loads correctly but when a new value is selected then the pager elements are hidden. 

Anton Mironov
Telerik team
 answered on 25 Oct 2023
1 answer
30 views

We are using a NumericTextBox in a grid for percentage complete field. Users would like to see the % when the field is just in display mode.  The Format property of the NumericTextBox isnt showing the percent sign when it is set to p0.

 


@(Html.Kendo().NumericTextBoxFor(m => m)
    .Format("p0")
    .SelectOnFocus(true)
    .Decimals(0)
    .Min(0)
    .Max(100)
    .Spinners(true)
    .Events(e =>
    {
        e.Change("percentCompleteChange");
    })
}
You may momentarily see it right when you click the cell before it changes to the NumericTextBox editor with spinners.
Anton Mironov
Telerik team
 answered on 24 Oct 2023
1 answer
34 views

I am working with a Kendo grid on my MVC webapp.  The grid is bound by data passed to the View.  An event currently exists to load another grid when a row is selected/clicked on.  I have been tasked with adding a column that contains a checkbox based on a boolean value from the record in the dataset.  Until this point, everything is working.

My question is, how can I add an event to whenever the checkbox is checked and unchecked while keeping the event fro when a row is selected?  That is, if the user clicks on the row, I still want it to load the other grid based on the selected row, but if the user clicks on the checkbox in the row, I want it call a function to toggle the value and update the database (essentially call function changeFlag).  As a test, I put an alert() call in the function which runs when a row is selected, but the function never fires if I check/uncheck the checkbox.

I have some exposure to MVC, but Telerick/Kendo are completely new for me.  Any ideas, tips, or guidance would be greatly appreciated.

Anton Mironov
Telerik team
 answered on 23 Oct 2023
1 answer
27 views

I have a sub grid which uses inline editing and editor templates to present drop-down lists of available values.  One of these drop-down lists has a large list of potential values which depend on a value in the parent record.

I have got this working by creating an editor template for the drop-down like this:-

@model object

@(Html.Kendo().DropDownList()
        .Name("Filter2")
        .DataValueField("Code")
        .DataTextField("Description")
        .ValuePrimitive(true)
        .OptionLabel("Select detail")
      .DataSource(src => src.Read(rd => rd.Action("GetFilter2s", "Home").Data("additionalData")))
    )

The additional data comes from a function:-

function additionalData(e) {


        return {
            detailType: detailTypev
        };
    }


The detailTypev variable is set using a function called on the beforeEdit event of the sub grid, called via a helper to pass the correct parent grid ID:-

@helper gridTemplateHelper(string uID)
{

    string f = "function(e){Subedit.call(this, e, \"" + uID + "\");}";
    @(f)

}


 function Subedit(e,gridName) {
      
       // alert(gridName);

        var row = e.sender.tbody.find('tr[data-uid="' + e.model.uid + '"]');

        if (lasteditedUID != e.model.uid)
        {
            lasteditedUID = e.model.uid;

            console.log(e.model.uid);

            e.preventDefault();  // prevent default editing
        

      

            $.ajax({
                type: "POST",
                async: true,
                contentType: "application/json;charset=utf-8",
                url: "@Url.Content("~/Home/GetDetailTypeForMetric")",
                data: '{"metricID":"' + gridName + '"}',
            dataType: "json",
            success: function (dataResult) {
                if (dataResult.Success == true) {

                    detailTypev = dataResult.DetailType;

                    
                    e.sender.editRow(row);

                    console.log(detailTypev);

                }
                else {


                    alert('An error has occurred.\n' + dataResult.Error);


                }

            },
            error: function () {

                alert('An error has occurred.');

            }
        });

        }

    }

This function checks if the row id is the same one just called (to prevent an endless loop of starting and cancelling an edit) and then prevents the edit. Then an ajax call is made to obtain the value to filter the drop-down on and the row opened for edit.

This works, but it seems a bit hacky. Is there a more elegant way of passing a filter to a drop-down list in a sub grid?

Thanks

Anton Mironov
Telerik team
 answered on 23 Oct 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Kevin
Top achievements
Rank 2
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
Jason
Top achievements
Rank 2
Iron
Iron
Iron
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
Dominik
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Kevin
Top achievements
Rank 2
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
Jason
Top achievements
Rank 2
Iron
Iron
Iron
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
Dominik
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?