Questions on UI for ASP.NET Core Forum

1 answer

388 views

How to populate the data in grid on the client

Hello.

There is a grid in PartialView:

@(Html.Kendo().Grid(Model.SpokesmanList)

.Name("grid1")

.Columns(columns =>

{

columns.Bound(p => p.LastName);

columns.Bound(p => p.DocumentType);

columns.Bound(p => p.Position);

})

)

How can I fill this table with data on the client by calling the javascript function without serverside requests?

Grid

answered on 02 May 2018

1 answer

204 views

Grid Server-Side Error Handling

I'm trying to figure out how to handle errors when updating data (inline-editing). I can't bind events.error for the grid, as GridEventBuilder does not include an definition for Error. Whats wrong? I see it in the online demos, but can't use it in VS2017.

Grid

answered on 01 May 2018

3 answers

141 views

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

874 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

195 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

174 views

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

302 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

160 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.2K+ 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

173 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