Hi,

I have a Kendo grid setup and I would like my controller's update action to assign a custom error to the ModelState and have that picked up on the client side. This is not an actual error, but more of a flag I can catch on the client side to initiate a redirect to another page (similar to the concept posted here: Redirect to another page after update in Kendo grid with inline edit in UI for ASP.NET MVC | Telerik Forums

My issue is that I cannot get the error handler to fire on the client side. Here is my controller action (I've reduced it down to just the error handling for simplicity):

[HttpPost]
 public JsonResult Status_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<StatusViewModel> changedEntries)
 {
     ModelState.AddModelError("UserRedirect", "UserRedirect needed");
     var result = ModelState.ToDataSourceResult();
     return Json(result);
 }

Here is my grid setup:

@(Html.Kendo().Grid(Model)
            .Name("status-grid")
            .Columns(c =>
            {
              // snip column setup
            })
            .ToolBar(toolbar =>
            {
                toolbar.Custom().Text("Save changes and submit").HtmlAttributes(new { id = "saveButton" });
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Scrollable(s => s.Height(850))
            .Navigatable()
            .Events(events =>
            {
                events.Edit("onEdit");
                events.Navigate("onNavigate");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                .Events(events => events.Error("onError"))
                .Model(model =>
                {
                    // snip model fields
                })
                .Update("Status_Update", "Status"))
            )

Finally, here is my error handler function:

<script type="text/javascript">
    function onError(e) {
        alert("Error handler fired");
    }
</script>

I feel like this is a pretty vanilla setup, so I'm not sure why it isn't working. I've tried quite a few variations and the error handler never executes. I have no errors in the console. Here is the JSON that is being received on the client side. Can anyone see anything I am doing wrong, or tell me a better way to redirect the user to another page after the AJAX Update action finishes running? Thanks!!

{errors: {ValidationRedirect: {errors: ["ValidationRedirect needed"]}}}
errors: {ValidationRedirect: {errors: ["ValidationRedirect needed"]}}
ValidationRedirect: {errors: ["ValidationRedirect needed"]}
errors: ["ValidationRedirect needed"]
0: "ValidationRedirect needed"

Hello,

The change event of the Grid not working in version 2022.3.1109

Not working when selectable set mode Single and type row.

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

Thanks.

(Edited- pivoted back to using [Remote] validation, but need to figure out how to keep popup in place after ModelState validation failure if user clicks submit)

Hi all,

I am working on a PopUp Editor for a Grid widget that displays user account information.  The PopUp Editor is a custom template, and has Telerik TextBox widgets for the user account's data, including UserName.  We want to validate the UserName by making a clientside call to the server to see if the UserName is already in use.

I am using  [Remote] validation in our view model that makes a call from the clientside to a method in our controller that checks if the UserName is already in use.  As has been the case with other people, this call is made even if a user clicks through the UserName Textbox and doesn't change the value for UserName, but our use case is such that I can work around this issue.

The problem is that if a user changes the username to an existing username, the Remote validation fires, but does not prevent the user from clicking Update on the PopUp- the user can click Update.  On the server side, the Update will fail due to ModelState.IsValid = false, and a failure message is returned, but the user is not notified of the failure- the PopUp just fades out.  If the user clicks "Edit" again, the username has the updated value in the PopUp, even though the update failed.

I was expecting that if the user clicks Submit, then the failure message that's returned would be displayed, and the PopUp would not fade out.   I suspect it may have to do with using an custom Editor Template,  but I'm hoping somebody can point out whatever it is I might be missing.

I used the following as guides:

• https://demos.telerik.com/aspnet-mvc/grid/editing-remote-validation
• https://www.telerik.com/forums/remote-validation-of-fields-in-grid-popup
• https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/editing/popup#handling-modelstate-errors

Has anybody been successful in using a custom template for PopUpEditor on a Grid, with a [Remote] validation, with the returned ModelState errors preventing the PopUpEditor from disappearing, instead displaying the returned error(s)?

Thanks in advance!

Taylor

Hi,

I am using System.Text.Json and Kendo UI in a .NET Core 6.0 project. I have followed this article in order to solve the property name casing issue: https://docs.telerik.com/aspnet-core/installation/json-serialization.

However, I am also using a JsonStringEnumConverter as follows:

c.JsonSerializerOptions.Converters.Add(new JsonStringEnumConverter());

.AddJsonOptions(c =>
{
      c.JsonSerializerOptions.PropertyNamingPolicy = null;
      c.JsonSerializerOptions.Converters.Add(new JsonStringEnumConverter());
      c.JsonSerializerOptions.DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull;
})

This results in all enums being serialised as null in grids when read using an Ajax DataSource call. How can I get Kendo to serialise enums as strings?

Kind regards,

David 

So now there is R1 2023.

how can i prevent Localization folders to be copied to publish folder ?

im using Telerik.UI.for.AspNet.Core 2023.1.314

Regards

NoobMaster

I have a grid that is inline editable

My problem is when the drop down appears it looks like this

Some of the items wrap around to two rows.  I would like the drop down to expand to fit the width of the text.

I looked in Chrome and I see the item is in an unnamed div that starts with this

<div class="k-animation-container"

I have tried the following in my .css to override the width of the container

.k-animation-container {
	width: auto;
}

and that doesn't seem to have any effect.

Is there a way to change the width of the drop down when it appears without changing the width of the containing column in the grid?

Hi everyone,

I'm using the Telerik UI for ASP.NET Core Editor to add my content from a Word file, but I'm encountering an issue. When I copy content from the Word file and paste it into the editor, additional CSS classes are being added to the tags.

For example: I copied paragraph from Word File and its looking like this (Class of MsoNormal and other style properties are added)

<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">Drivida Marketplace provides a comprehensive guide to school owners with tools to manage their educational institutions effectively.</p>
<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">&nbsp;</p>
<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">This comprehensive guide aims to provide school owners with a clear understanding of the suite of tools available within the platform, enabling them to manage their educational institution effectively. Here's what you can do with the School Portal:</p>
<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">&nbsp;</p>
<p class="MsoNormal" style="margin:0pt 0pt 0.0001pt;font-family:Calibri;font-size:medium;">&nbsp;</p>

Is there any way to Remove these Class and other properties from Telerik Editor HTML Code? 

Can anyone help me resolve this issue?

I am also attaching sample Word File

Thank you!

Hello guys,

is it possible to define a conditional formatting on a whole column? E.g. if you want to set the background of a cell to yellow if the value is greater than 0 (see screenshot, column 'Fehlend').

In my case it's even more difficult because my whole datasource is coming from the server.

@(Html.Kendo().Spreadsheet()
	.Name("bestandsliste")
	.Columns(3)
	.HtmlAttributes(new { style = "width:100%" })
	.Sheets(x =>
	{
		x.Add()
			.Name("Bestandsliste")
			.Columns(y =>
			{
				y.Add().Width(400);
				y.Add().Width(120);
				y.Add().Width(120);
				y.Add().Width(120);
			})
			.DataSource<Fahnenbestand>(y => y
				.Custom()
				.Sort(z => z.Add(a => a.Fahnenkategorie))
				.Transport(z => z.Read("spreadsheet_onRead"))
			)
			.FrozenRows(1)
			.Rows(y =>
			{
				y.Add().Height(30).Cells(z =>
				{
					z.Add().FontSize(20).TextAlign(SpreadsheetTextAlign.Center);
					z.Add().FontSize(20).TextAlign(SpreadsheetTextAlign.Center);
					z.Add().FontSize(20).TextAlign(SpreadsheetTextAlign.Center);
					z.Add().FontSize(20).TextAlign(SpreadsheetTextAlign.Center);
				});
			});
	})
	.Sheetsbar(false)
	.Toolbar(false)
)

function spreadsheet_onRead(options) {
	$.ajax({
		url: `@ViewData[ViewDataVariables.UrlWebApi]/FlagCategory/GetOverviewAllFlagsAsSpreadsheet`,
		headers: { 'Authorization': '@token' },
		success: function (result) {
			var sheet = kendoSpreadSheetBestandsliste.activeSheet();
			sheet.resize(result.Total + 5, 3);

			options.success(result.Data);
		},
		error: function (result) {
			options.error(result);
		}
	});
}

I already check the css of the cells. Indeed I can simply set the background color of the cells of a specific column by a condition via jquery (like "if value greater 0, set background yellow"), but the cells carry very little informations. It's not possible to prove if the cell I'm currently looking is belonging to correct column. It would be easy if there would be an attribute like aria-labeledby="COLUMNHEADERCELL" but that's not the case.

<div class="k-spreadsheet-cell" style="[..]"><div class="k-vertical-align-bottom">1</div></div>

Maybe there is a solution to get all cells of one column via the api of my spreadsheet object? Looking forward to hearing from you.

Best regards,

Daniel

Is there a way to refresh an Asp.Net Core PivotGri?

i.e.: I have a PivotGrid open.  I know that there are changes to the underlying tables and I want to see the changes in the PivotGrid without having to close it and then re-open it.

Using Asp.Net Core 6, C# and Telerik 2323.1.307

Thanks