Telerik Forums
UI for ASP.NET MVC Forum
0 answers
180 views


Kendo UI Grid Accessibility Issue

1.Kendo UI Grid is dividing Header and Content part into two different tables due to which when focus is on the data present in the table, screen readers are not linking them to the row/column headers.

2. While using tab key for navigating the Kendo grid,

2.1 focus is going again to the checkboxes after the last record in the  kendo grid . 

2.2 .when focus is on Column 10 , it is narrating the rest of the columns present in the Kendo grid. (Attached a pic for your reference)

 

Kendo Version:  v2020.2.513

Venkat
Top achievements
Rank 1
 updated question on 23 Mar 2023
0 answers
114 views
0 answers
132 views

 

The following is traversal binding. The onDataBound method allows you to bind cells individually, similar to my following writing method of $("# spreadsheet"). data ("kendoPrepadsheet"). activeSheet(). range ("K3"). format ("yyyy MM dd");

 

zhe
Top achievements
Rank 1
Iron
Iron
 asked on 23 Mar 2023
0 answers
129 views

My web application's implementation of the Upload widget does data validation through the component itself (max file size, allowed file types, etc.) as well as some extra validation through the Async.Save() handler's controller action (image validity, checking for animated images, etc.). It's my understanding that there are three potential results from the handler:

  1. Return of an empty string results in success.
  2. Return of a Json string or object also results in success.
  3. Return of anything else results in failure.

During the non-client side validation in my controller, should one of the checks fail we call "return Content(<string>)" and for the most part, this works as intended if the string contains any non-numeric characters. Initially I was simply returning a reference to a resource string defining the error and displaying it to the user in an alert describing what went wrong with the upload (via XMLHttpRequest.responseText); however, in the case of an undefined (by me) error this would result in an alert showing server response details that I don't wish to be displayed to the user. Thus I decided to send error codes and translate those client-side. This made it much easier to check for the error messages I mean to display to the user as well as have a default that displays for any unintended response. My problem is that if I return a string that is strictly numeric the handler doesn't result in an error.

Ex. return Content("Error: Bad File") would result in my error handler being called, and the text "Error: Bad File" being displayed in an alert.

But return Content("2") would result in a "successful" upload. The amount of numbers in the string doesn't matter, but if at any point a letter or symbol is included in the string it once again properly handles as an error.

I've already fixed my code to work by adding "error" into the string with the code number but I figured it was worth asking about since I would prefer to just use a numeric string. I'm puzzled as to what is causing the issue, as I don't believe strings containing only numbers are treated any differently than others unless they're being parsed. If I check the network response in the dev. console it shows the string as the response, which is what leads me to think it's something with the kendo widget. 

Using .NET Framework 4.7.2, ASP.NET MVC 4 and Kendo.Mvc version 2021.2.616.545. 

Jesse
Top achievements
Rank 1
 asked on 22 Mar 2023
0 answers
170 views

Hi,

I have used the tutorial https://demos.telerik.com/aspnet-mvc/grid/server-export in order to do a server export of a grid to excel. My grid has columns that contain text values, numerical values and date values.

I have set the formats accordingly on the .cshtml page, but it seems as though the exporter ignores this and it needs me to set the 'NumberFormat' to 'dd/mm/yyyy' in the SpreadCellFormat in order to show the date correctly. However that then applies the same format to every cell in the spreadsheet, meaning that the numerical columns turn to dates.

Has anyone else found this and have a solution?

Thanks

Becky

Becky
Top achievements
Rank 1
 asked on 22 Mar 2023
2 answers
122 views
Hi

I'm having trouble getting the DataBinding to work on the ScrollView control here is my code:

Razor view
      @(Html.Kendo().ScrollView()
         .Name("svMessages")
         //Afficher la pagination si plus d'un message.
         .EnablePager(Model.NbMessages > 1)
         .DataSource(d => d.Read(r => r.Action("AfficherMessagesAccueil", "Account"))))
Controller

   [AllowAnonymous]
   [HttpGet]
   public ActionResult AfficherMessagesAccueil([DataSourceRequest] DataSourceRequest request)
   {
      var messages = new List<MessageAccueil>();
      return Json(messages.ToDataSourceResult(request));
   }

I got this error message
  1. Request URL:
    http://~/Account/AfficherMessagesAccueil
  2. Request Method:
    POST
  3. Status Code:
    404 Not Found
  4. Remote Address:
    [::1]:80
  5. Referrer Policy:
    strict-origin-when-cross-origin
After I saw that Datasource send POST request ???

I changed my controler method to


   [AllowAnonymous]
   [HttpPost]
   public ActionResult AfficherMessagesAccueil([DataSourceRequest] DataSourceRequest request)
   {
      var messages = new List<MessageAccueil>();
      return Json(messages.ToDataSourceResult(request));
   }

And I got same error!

What I doing wrong ?
FranckSix
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 21 Mar 2023
1 answer
180 views

Hi,

 

I am trying to implement Kendo Captcha. I tried to implement same way as in this article.

ASP.NET MVC Captcha Component Validation - Telerik UI for ASP.NET MVC

But I am getting below error. what am I doing wrong?

 

 

My code is like this

 


@(Html.Kendo().Captcha()
                            .Name("Captcha")
                            .CaptchaImage((string)ViewData["Captcha"])
                            .CaptchaId((string)ViewData["CaptchaID"])
                            .DataCaptchaField("Captcha") // The field containing the Captcha from the server-side should be called Captcha.
                            .DataCaptchaIdField("CaptchaID") // The field containing the Captcha's ID from the server-side should be called CaptchaID.
                            .Handler(handler => handler.Action("Reset", "IUA"))
                            .ValidationHandler(handler => handler.Action("Validate", "IUA"))
                            .ValidateOnBlur(true)
                        )


namespace Portal.Controllers
{
    public class IuaController : Controller
    {
        // GET: Iua
        public ActionResult Index ( string pin )
        {
            var model = portalServices.getExistingData();


            if (string.IsNullOrEmpty(model.CaptchaID))
            {
                GenerateNewCaptcha();
            }
            else
            {
                CaptchaImage captchaImage = (CaptchaImage)Session["captcha" + model.CaptchaID];

                if (captchaImage != null && CaptchaHelper.Validate(captchaImage, model.Captcha.ToUpperInvariant()))
                {
                    ModelState.Clear();
                    GenerateNewCaptcha();
                }
            }

            //return View();

            return View(model);
        }

        private void GenerateNewCaptcha()
        {
            CaptchaImage captchaImage = CaptchaHelper.GetNewCaptcha();

            Session["captcha" + captchaImage.UniqueId] = captchaImage;

            ViewData["Captcha"] = GetCatchaImage(captchaImage.UniqueId);//Url.Action("image", "IUA", new { captchaId = captchaImage.UniqueId });
            ViewData["CaptchaID"] = captchaImage.UniqueId;
        }

        public ActionResult Reset()
        {
            CaptchaImage newCaptcha = CaptchaHelper.GetNewCaptcha();

            Session["captcha" + newCaptcha.UniqueId] = newCaptcha;

            return Json(new
            {
                captcha = GetCatchaImage(newCaptcha.UniqueId),//Url.Action("image", "IUA", new { captchaId = newCaptcha.UniqueId }),
                captchaId = newCaptcha.UniqueId
            }, JsonRequestBehavior.AllowGet);
        }

        public ActionResult Image(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)Session["captcha" + captchaId];
            var image = CaptchaHelper.RenderCaptcha(captcha);
            byte[] bmpBytes;

            using (MemoryStream ms = new MemoryStream())
            {
                image.Save(ms, ImageFormat.Png);
                bmpBytes = ms.ToArray();
            }

            return File(bmpBytes, "image/png");
        }

        public ActionResult GetCatchaImage(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)Session["captcha" + captchaId];
            var image = CaptchaHelper.RenderCaptcha(captcha);
            byte[] bmpBytes;

            using (MemoryStream ms = new MemoryStream())
            {
                image.Save(ms, ImageFormat.Png);
                bmpBytes = ms.ToArray();
            }

            return File(bmpBytes, "image/png");
        }

        public ActionResult Audio(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)Session["captcha" + captchaId];
            byte[] bmpBytes;

            using (MemoryStream audio = CaptchaHelper.SpeakText(captcha))
            {
                bmpBytes = audio.ToArray();
            }

            return File(bmpBytes, "audio/wav");
        }

        public ActionResult Validate(string captchaId, string captcha)
        {
            CaptchaImage captchaImage = (CaptchaImage)Session["captcha" + captchaId];

            return Json(CaptchaHelper.Validate(captchaImage, captcha.ToUpperInvariant()), JsonRequestBehavior.AllowGet);
        }
    }
}

Model class

    public class IuaModel
    {
        [Key]
        public string Pin { get; set; }

        [Display(Name = "Ticket #")]
        public long Id { get; set; }

        [Required]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Display(Name = "Middle Initial")]
        public string MiddleInitial { get; set; }

        [Required]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Display(Name = "Facility Name")]
        public string FacilityName { get; set; }

        private string _captchaValue;

        public string Captcha
        {
            get
            {
                return string.IsNullOrEmpty(_captchaValue) ? "" : _captchaValue;
            }
            set
            {
                _captchaValue = value;
            }
        }

        public string CaptchaID { get; set; }
    }

Anton Mironov
Telerik team
 answered on 20 Mar 2023
2 answers
4.3K+ views

I used the upgrade wizard to download the latest version and I'm getting this error message on pages that have the components:

Could not load file or assembly 'Telerik.SvgIcons, Version=1.0.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8' or one of its dependencies. The system cannot find the file specified.

VISHAAL
Top achievements
Rank 1
Iron
 updated question on 16 Mar 2023
0 answers
130 views

Value column has an inline validation of max and min. On entering the correct values also I am getting this error. 

I am using this JS code for custom input control. Please suggest me some approach to resolve this error.

if (e.model.UnitTypeCode === "UNIT_LOOKUP_FLOAT") {

                var dataItem = $("#DesignMaterialSystemAttribute").data("kendoGrid").dataSource.get(e.model.DesignMaterialSystemAttributeId);
                console.log(dataItem)

                var min = parseFloat(dataItem.MinAcceptableText);
                var max = parseFloat(dataItem.MaxAcceptableText);
                var input = $("<input data-val='true' autocomplete='off' onblur='Value_validate()' onclick='setTwoNumberDecimal(this)' min = '" + min + "' max='" + max + "' type='number' step='0.01' data-validate='false' name='AttributeValue' id='AttributeFloatId' data-bind='value: AttributeValue' style='width: 70% ; outline:none' />");

                
                var grid = $("#DesignMaterialSystemAttribute").data("kendoGrid");
                var AttributeNumberValue = null;
                var data = grid.dataSource.data();
                var gridRowTr = grid.dataItem($(e.container).closest("tr"));
                var currentRowIndex = data.indexOf(gridRowTr);
                $(document).on('input', '#AttributeFloatId', function () {
                    AttributeNumberValue = $("#AttributeFloatId").val();
                    data[currentRowIndex].set("AttributeValue", AttributeNumberValue);
                    data[currentRowIndex].set("AttributeText", AttributeNumberValue);
                })

            

 

 

 

n/a
Top achievements
Rank 1
 asked on 16 Mar 2023
1 answer
207 views

Hello,

I am trying to understand the best way to update a submodel that is part of the composition of a grid's row model.

I tried to outline an example below. If I have a PersonViewModel that is part of a CompanyViewModel.

I want to be able to update the PersonViewModel's Name, Id and Email by querying using their email.


public class PersonViewModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
}

public class CompanyViewModel { public string CompanyId { get; set; } public string CompanyName { get; set; } public PersonViewModel Owner { get; set; } }

public IActionResult GetPersonByEmail([DataSourceRequest] DataSourceRequest request, string email)
{
	PersonViewModel person = _userService.GetUserInfoByEmail(email);
	return Json(person.ToDataSourceResult(request));
}

@(Html.Kendo().Grid<CompanyViewModel>()
	.Name("companyGrid")
	.Columns(columns =>
	{
		columns.Command(command => { command.Edit();}).Locked(true);
		columns.Bound(c => c.CompanyId );
		columns.Bound(p => p.CompanyName );
		columns.Bound(c => c.Owner.Name);
		columns.Bound(c => c.Owner.Email).EditorTemplateName("PersonEditor");
	})
	.Scrollable(s => s.Height("auto"))
	.DataSource(dataSource => dataSource
		.Ajax()
		.Read(read => read.Action("CompanyRead", "Company"))
		.Model(model =>
		{
			model.Id(p => p.CompanyId);
			model.Field(p => p.Owner).DefaultValue(new PersonViewModel() { Name = "", UserId = "", Id = "" });
		})
	)
)

PersonEditor Template would look something like this?

@model PersonViewModel
@(Html.TextBoxFor(model => model))
@(Html.Kendo().Button()
    .Name("PersonLookupButton")
    .Content("Search")
    .Events(ev => ev.Click("personLookupOnClick"))
)


I could get the dataItem from the grid and set the Id, Name, and Email values via jQuery, but that feels like it is working against the point of using composition in my viewmodel. Is there a way to get the PersonViewModel that is returned by GetPersonByEmail() and bind that directly to the row instead?

 

Thank you!

Eyup
Telerik team
 answered on 07 Mar 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?