Questions on UI for ASP.NET Core Forum

3 answers

164 views

[Solved] Group By Header Text

Is it possible to show text in the Group Panel at the top of the grid? i.e., "Drag a column header here for grouping"

Or better yet a way to define the area as some template.

Grid

answered on 25 Apr 2018

2 answers

929 views

Remote validation always stopping submit of form

I've set up remote validation using asp mvc core and I am using the kendo validator. I set up some javascript based on the remote validation code I found both in the samples online and some other searches and I added some code to support sending additional parameters.

I am using the validator to verify that a name is not already in use for a form input. What I have now actually mostly works, if the name exists then the validator adds the text below the input that the name is already used. The issue is that when I enter a unique name, the validation message goes away but I still can't submit the form. Something in the validation is still stopping the submit even though it appears to be validating correctly.

This is what I am using to set up a remote rule for the validator:

$.validator.methods.remote = function () { /* disabled */ };

$('#formName').kendoValidator({

onfocusout: true,

onkeyup: true,

rules: {

remote: function (input)

{

var remoteAttr = input.attr("data-val-remote-url");

if (typeof remoteAttr === typeof undefined || remoteAttr === false)

{

return true;

}

var isValid = false;

var data = {};

var additionalFieldsAttribute = input.attr('data-val-remote-additionalfields');

var parts = additionalFieldsAttribute.split(',');

for (var i = 0; i < parts.length; i++)

{

var piece = parts[i].replace('*.', '');

data[piece] = $('#' + piece).val();

}

$.ajax({

url: remoteAttr,

mode: "abort",

port: "validate" + input.attr('name'),

dataType: "json",

type: input.attr("data-val-remote-type"),

data: data,

async: false,

success: function (response)

{

isValid = response.result;

}

});

return isValid;

}

},

messages: {

remote: function (input)

{

return input.data('val-remote');

}

});

The controller code that it calls (this works correctly and returns the desired result):

public IActionResult IsSubstitutionNameAvailable(string Name, int? MergeDocumentSubstitutionTypeId)

{

var existing = _context.MergeDocumentSubstitutionTypes

.Where(l => l.Name == Name)

.FirstOrDefault();

if (existing == null || (existing != null && MergeDocumentSubstitutionTypeId == existing.MergeDocumentSubstitutionTypeId))

{

return Json(new { result = true });

}

else

{

return Json(new { result = false });

}

The viewmodel where the remote attribute is added:

[Required]

[Remote("IsSubstitutionNameAvailable", "MergeDocumentSubstitutionTypes", AdditionalFields = "MergeDocumentSubstitutionTypeId", ErrorMessage = "Entered name is already in use.")]

public string Name { get; set; }

Again, the controller does get called, returns the correct response and I see the correct value come back from the javascript debugger. After entering a unique name the validation message goes away but the submit is still blocked. When I inpecty the properties of the validator in the debugger it appears there are no errors.

Thanks,

Brian

General Discussions

answered on 24 Apr 2018

3 answers

212 views

I want to using multi-select in spreadsheet validation custom

In demo https://demos.telerik.com/kendo-ui/spreadsheet/custom-editors

cells: [

{ value: "Select item:", bold: true },

{ background: "#fef0cd",

validation:{

dataType: "list",

showButton: true,

comparerType: "list",

from: '{ "Foo item 1", "Bar item 2", "Baz item 3" }',

allowNulls: true,

type: "reject"}

}]

I need to choose multi item.

How do i fix it?

Thanks !

MultiSelect

answered on 23 Apr 2018

8 answers

194 views

[Solved] List items appear with no margin on left

When I drop down a dropdown list (DropDownListFor) , it's items are not margined and are truncating to the left. Can anyone suggest a style to override or a way to set this?

Thanks

DropDownList

answered on 23 Apr 2018

1 answer

340 views

ContextMenu for ListBox

I have a number List Boxes with a single context menu that is shared across them.

The context menu correctly displays when I right click the list box item but it doesn't seem to set the target value of the Select or Open events.

The menu configuration is:

@(Html.Kendo().ContextMenu()

.Name("listbox_contextmenu")

.Target("[role=listbox]")

.Filter("[role=option]")

.Orientation(ContextMenuOrientation.Vertical)

.Animation(animation =>

{

animation.Open(open =>

{

open.Fade(FadeDirection.In);

open.Duration(500);

});

})

.Items(items =>

{

items.Add().Text("Escalate to Management");

items.Add().Separator(true);

items.Add().Text("Email Allocated User");

})

.Events(events =>

{

events.Open("contextMenuOpen").Select("contextMenuSelect");

})

)

The java script function do nothing at the moment:

function contextMenuOpen(e) {

alert('e.item is ' + JSON.stringify($(e.item)));

alert('e.target is ' + JSON.stringify($(e.target)));

}

function contextMenuSelect(e) {

alert('e.item is ' + JSON.stringify($(e.item)));

alert('e.target is ' + JSON.stringify($(e.target)));

}

I'm hoping you can point out what I'm doing wrong here.

Many Thanks,

Rob

Menu

answered on 20 Apr 2018

3 answers

175 views

Intercepting the Update action of the Editor

I am trying to plan a way to negate the update process if the value the user has entered on a new record would be a duplicate.

This is in a custom editor on a popup so I could have an Ajax action when the user exits and/or changes the field value but I am not sure how to check if it is in edit or insert mode inside the custom editor.

Is there a suggested pattern to use here for this?

Thanks

Grid

answered on 19 Apr 2018

1 answer

3.3K+ views

The data passed through an AJAX call to the controller is null

Good day,

I have a question since all solutions I've found so far didn't work in my case. Hre's a brief description of what I have... So, I have my kendoGrid with all the info displayed. I'm trying to make a button for certain rows which will call a method in my Controller. Here's the code on my page:

@(Html.Kendo().Grid<DisplayEntitiesViewModel>()

.Name("CustomersGrid")

.Columns(columns =>

{

columns.Bound(c => c.CustomerId).Hidden(true);

columns.Bound(c => c.CustomerName)

.Width(150);

columns.Bound(c => c.CustEmail)

.Width(800);

columns.Command(command => command

.Custom("Add Contact")

.Visible("showButton")

.Click("AddContact")).Width(180);

})

.HtmlAttributes(new {style = "height: 580px; width: 1133px; margin-left: 16px"})

.Scrollable()

.Groupable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("ReadCustomers", "MyController"))

.PageSize(20)

)

Here's my script with the AJAX call:

function AddContact(c) {

var row = $(c.target).closest("tr");

var grid = $('#acombaGrid').data('kendoGrid');

var dataItem = grid.dataItem(row);

$.ajax({

url: '@Url.Action("DispalyEntities", "MyController")',

dataType: "json",

contentType: "application/json",

data: {

customerId: dataItem.CustomerId

},

cache: false,

type: "POST"

});

}

Here's in brief my Controller:

public IActionResult DispalyEntities(string customerId)

{

return View();

}

My problem is, no matter what I've done so far... my costomerId passed to the controller is always null. Could you please point me what's wrong with it. Thanks in advance for doing so.

Grid

answered on 18 Apr 2018

1 answer

185 views

Help me, I want to using multi-select in spreadsheet validation custom

https://demos.telerik.com/kendo-ui/spreadsheet/custom-editors

cells: [

{ value: "Select item:", bold: true },

{ background: "#fef0cd", validation: { dataType: "list", showButton: true, comparerType: "list", from: '{ "Foo item 1", "Bar item 2", "Baz item 3" }', allowNulls: true, type: "reject"} }]

MultiSelect

answered on 18 Apr 2018

1 answer

601 views

binding two dimensional string data dynamically to kendo mvc grid

Hello, I have a two-dimensional string array that I want to bind to kendo mvc grid. It contains two rows. It's able to display the first row as Header, but it's no not showing the second row. Following is my code for the view which receives the said two-dim string array:

@using Kendo.Mvc.UI

@model string[][]

@if (Model != null)
{

var grid = Html.Kendo().Grid<dynamic>(Model)
.Name("importGridHeader")
.Columns(columns =>
{
var row = Model[0];
foreach (var col in row)
{
columns.Bound(col).Width(200);
}
}
)
.HtmlAttributes(new { style = "min-height: 450px; max-height:1250px;" })
.Sortable()
.Scrollable(s => s.Enabled(true))
.Resizable(r => r.Columns(true))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
);
grid.Render();
}

Grid

answered on 18 Apr 2018

1 answer

403 views

Scaffolder not appearing

This had previously worked Ok. Now when I add a controller or a new scaffolded item the scaffolder does not appear. In VS2017CE in Tools >Extensions and Updates it lists Telerik ASP.NET Core VSExtensions with Version 2018.1.215.2 as being installed.

The only documentation I could find:

https://docs.telerik.com/aspnet-mvc/getting-started/scaffolding

The requirements listed in the doc:

Requirements
Visual Studio 2013 (with Update 2 or higher) or Visual Studio 2015
ASP.NET MVC 4 or ASP.NET MVC 5
C#
Entity Framework Data Model

Not exactly applicable to my set up. We do not use EF but that hasn't been an issue in the past. Please advise.

Installer and VS Extensions