Questions on UI for ASP.NET MVC Forum

1 answer

98 views

Issue With Styling/Layout of Custom Editor Template

I'm having an issue styling a custom editor template.

I want to resize the button bar section at the bottom of the view, so that it better fits / aligns with the rest of the view controls. All of my attempts to do so thus far have resulted in various issues with the layout of the other controls.

I've read through the documentation, but haven't been able to find a solution.

The view is fairly simple, and I'm using an internal style section until I get the design firmed up.

I've attached a copy of the custom Donor view, as well as a screen shot.

Any feedback/advice would be greatly appreciated.

View

answered on 28 Oct 2019

4 answers

3.1K+ views

Reduce Grid Font Size

I've just started a project using the R3 2019 version of Kendo UI for MVC, with the bootstrap v4 theme.

I've got a grid inside a bootstrap card, but setting the font style on the div that contains the grid, doesn't affect the grid font-size, where it has using past framework version using the original bootstrap theme.

What's the easiest way to reduce a specific grids font size on a page?

Thanks

Grid

answered on 25 Oct 2019

1 answer

599 views

Cannot read property 'uid' of undefined when Cancel Button click

I alert taking "Cannot read property 'uid' of undefined" when Cancel Button click. I am using .Editable(editable => editable.Mode(GridEditMode.PopUp).

This error's detailed exist images belows

I waiting your reply/solve short time,

thanks telerik group.

Grid

answered on 24 Oct 2019

6 answers

332 views

Kendo Grid globalization and validation not working

So I've made a hundred Kendo Grids with MVC so far and I have zero success with globalization and validation. To give a little bit more details: If we look at the demo presented here https://demos.telerik.com/aspnet-core/grid/globalization and the "Unit Price" column. You can clearly enter only numerics with only 1 delimiter depending on the culture. If you try to enter any non-numerical letter, it doesn't let you. Neither does it let you insert more than 1 delimiter (",,,,,,") or the wrong delimiter. So there's some kind of "on the fly validation" going on.

My grids don't have this. For example I have decimal columns and I can enter all letters, even non-numerics. I can type "03,,.awd923..." in a decimal column within the grid. What I have tho is culture. I think the culture I have set up works properly because when I check the kendo.cultures within JS console I can see all the info of the current culture (check image in attachments for more info).

Here's an example of one of my grids:

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

.Name("ItemGrid")

.AutoBind(false)

.Pageable(pager => pager.Refresh(false))

.Filterable(filterable => filterable.Enabled(true))

.Sortable(sortable => sortable.Enabled(true))

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

.AllowCopy(true)

.Scrollable(a => a.Height("auto"))

.Resizable(resize => resize.Columns(true))

.Navigatable()

.NoRecords(t.GetString("No records in table"))

.Mobile(MobileMode.Auto)

.Editable(editable => editable.Mode(GridEditMode.InCell).Enabled(true).DisplayDeleteConfirmation(false))

.Events(events => events.Edit("onEdit"))

.ToolBar(toolbar =>

{

toolbar.Template(@<text><span id="addItem" onclick="addItem('ItemGrid')"

style='float:left' class='btn btn-xs btn-default'>

<span class='k-icon k-add'></span>@t.GetString("Add new item")

</span></text>);

}

)

.Columns(columns =>

{

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

columns.ForeignKey(p => p.Type, (System.Collections.IEnumerable)ViewData["FItemTypeEnum"], "IDForSysClient", "Name").EditorTemplateName("FItemTypeEnumDropDown");

columns.Bound(c => c.Val).Visible(false);

columns.Bound(c => c.MaterialString).Title(t.GetString("Value")).Width(200);

columns.Bound(c => c.Quantity);

columns.ForeignKey(p => p.RewardType, (System.Collections.IEnumerable)ViewData["GPriceTypeEnum"], "IDForSysClient", "Name").EditorTemplateName("GPriceTypeEnumDropDown");

columns.Bound(c => c.RewardVal);

columns.Command(commands =>

{

commands.Destroy().Text(t.GetString("Delete")).HtmlAttributes(new { @class = "btn btn-xs btn-danger" });

}).Title(t.GetString("Commands")).Width(110);

})

.DataSource(dataSource =>

dataSource.Ajax()

.ServerOperation(false)

.Batch(false)

.PageSize(3)

.Model(model =>

{

model.Id(gridMainAlias => gridMainAlias.No);

model.Field(gridMainAlias => gridMainAlias.No).Editable(false);

model.Field(gridMainAlias => gridMainAlias.Type);

model.Field(gridMainAlias => gridMainAlias.Val);

})

.Events(events =>

{

events.Change("ItemGridChange");

})

)

Grid

answered on 23 Oct 2019

5 answers

474 views

Dynamic window content not being read by screenreader

I am having some problems with the Kendo Window and getting the content of the window being read by a screen reader (testing on NVDA).

The contents of the window is from a partial view and the window is created via jquery. The code is:

<div id="TopNavKendoWindow" style='display:none'></div>

$("#TopNavKendoWindow").kendoWindow();

var testWindow = $("#TopNavKendoWindow").data("kendoWindow");

testWindow.setOptions({

content: {url:'@Url.Action("ReportIssue", "Support", new { area = "Hub" })'},

title: 'Window Title Here',

height: '300px',

width: '300px'

});

testWindow.center().refresh().open();

When testing with a screenreader, the reader will read out the title of the window but not the content of it.

If I change the div to have the content in it and not pass through the 'content' to setOptions, then the screenreader will readout the title and the content successfully.

<div id="TopNavKendoWindow" style='display:none'>this is a test</div>

$("#TopNavKendoWindow").kendoWindow();

var testWindow = $("#TopNavKendoWindow").data("kendoWindow");

testWindow.setOptions({

title: 'Window Title Here',

height: '300px',

width: '300px'

});

testWindow.center().refresh().open();

Is anyone able to help me so that I can use the content url of setOptions and get the screenreader to read out the dynamic content?

Thanks

Window

answered on 23 Oct 2019

2 answers

460 views

Validation incorrectly showing up when initial value in multiselect

When using a MultiSelectFor, I am having a problem with kendo validator if there is already a value in the model for that multiselect.

For example:

Below is the code for the MultiSelectFor. On my form I am checking to see if a property of a model exists, if so I am adding the validator with the message "Required" to it. It is my understanding that this should only occur if the multiselect is empty. Attached is a picture of the required validator showing when there is a selection in the multiselect. The problem is when there is an initial value on the first load, after that it works as intended where it is removed when a value is selected and is shown when there is no value.

In the attachment you will see that it is only this multiselect that has a problem. everything else works fine with an initial value.

How do I go about making sure that if there is an initial value that the validator is not shown? Is there an event that fires after the value is populated so that I can run a validation function to clear out the validation?

01.validateForm: function() {

02. var validator = $('#' + this.formName).kendoValidator({

03. messages: {

04. required: "Required"

05. }

06. }).data("kendoValidator");

07.

08. if (validator != null)

09. return validator.validate();

10. else return null;

11.}

@(Html.Kendo().MultiSelectFor(m => m.SelectedResources).DataTextField("Text").DataValueField("Value").Placeholder("No Resources Selected").DataSource(source => { source.Read("ReadActiveUsers", "_System");}))

MultiSelect

answered on 22 Oct 2019

1 answer

325 views

Selected Tags are lost when Filter is applied to Kendo MultiSelect Control

I need to apply a filter to a MultiSelect control that already has selected items within Kendo-UI 2016 R3 SP1 (2016.3.1028) . I am able to apply the filter but once I do all of the selected items are no longer tagged as selected even though they still exist in the list.
I have tried using every version of Kendo-UI (the latest being Kendo UI 2019 R3, 2019.3.917) to see if a patch has been created to resolve this issue. None work. I have tried amending the "onFiltering" method as is described in the following post:

https://www.telerik.com/forums/how-to-hold-selected-elements-in-multiselect-after-filtering

Nothing has worked to this point. I have created a snippet in Dojo that shows this exact issue:

https://dojo.telerik.com/aWiviPAw

Please note that within this example "Star Wars: The Empire Strikes Back" should be tagged as selected. If you click on the drop down list it is listed as selected. However, it is not tagged as selected when the drop down list is minimized even though it is selected. Please also note that if I make a change and remove the filter from the MultiSelect control that it will be correctly tagged as selected.

If anyone can offer a workaround or point to a patch that will resolve this issue then I would be very grateful.

MultiSelect

answered on 21 Oct 2019

1 answer

206 views

How Do You Access Model And/Or Viewmodel properties/data on the client

Hello,

I have a hierarchy of data bound from several tables unioned together in the controller. Each level of nodes is bound to a view model so they all have the same properties. The treeview works fine, but I want to access the viewmodel properties on the select method of the treeview and I cannot find a resource that explains this well. Can anyone please provide a complete and simple example of how to accomplish this?

Thanks

General Discussions

answered on 21 Oct 2019

6 answers

797 views

SignalR datasource with server sorting/filtering

Hi,

I have a Kendo Grid that is using a SignalR datasource. The grid is also using server filtering, paging and sorting. Paging works fine, however filtering and sorting don't.

Here is the JavaScript datasource:

01.this.datasourceLog = await new kendo.data.DataSource({

02. type: "signalr",

03. transport: {

04. signalr: {

05. hub: hubLog,

06. promise: hubStart,

07. server: {

08. read: "read",

09. create: "create"

10. },

11. client: {

12. read: "read",

13. create: "create"

14. }

15. }

16. },

17. push: (e) => {

18. let items = this.datasourceLog.data();

19.

20. let n = items.pop();

21. items.pop();

22. items.unshift(n);

23. },

24. pageSize: 10,

25. serverPaging: true,

26. serverFiltering: true,

27. serverSorting: true,

28. schema: {

29. total: "total",

30. data: "data",

31. model: {

32. fields: {

33. customer: { type: "string" },

34. timestamp: { type: "date" },

35. machine: { type: "string" },

36. action: { type: "string" },

37. info: { type: "string" },

38. data2: { type: "string" }

39. }

40. }

41. },

42. sort: { field: "timestamp", dir: "desc" }

43. });

And here is the server side method in the SignalR Hub:

1.public async Task<DataSourceResult> Read(DataSourceRequest request)

2. {

3. return (await new LogRepository().GetLogsAsync()).ToDataSourceResult(request);

4. }

As you can see, the method in the Hub does not use the DataSourceRequestModelBinder from Telerik, because modelbinders can't be used in a SignalR hub. This is also the reason why server sorting and filtering doesn't work, because the modelbinder changes the fields in the DataSourceRequest from 'sort' to 'Sorts' and 'filter' to 'Filters'.

What the client sends to the server for example (link is from another grid):

api/customer/get?take=10&skip=0&page=1&pageSize=10&sort%5B0%5D%5Bfield%5D=companyName&sort%5B0%5D%5Bdir%5D=asc

While the server requests a DataSourceRequest object containing the fields 'Sorts' and 'Filters'.

I have also tried to change the properties in the ParameterMap method:

1.parameterMap: function(options, type) {

2. if(type === "read"){

3. (<any>options).filters = options.filter;

4. (<any>options).sorts = options.sort;

5. }

6. return options;

7. }

Then the 'Sorts' property in the DataSourceRequest object actually contains data, but however this is still not correct because the property 'Member' in the Kendo.Mvc.SortDescriptor is null (see attached file).

And I get an error:

[11:07:13 GMT+0100 (Romance Standard Time)] SignalR: At least one object must implement IComparable.
at System.Collections.Comparer.Compare(Object a, Object b)
at System.Collections.Generic.ObjectComparer`1.Compare(T x, T y)
at System.Linq.EnumerableSorter`2.CompareKeys(Int32 index1, Int32 index2)
at System.Linq.EnumerableSorter`1.QuickSort(Int32[] map, Int32 left, Int32 right)
at System.Linq.EnumerableSorter`1.Sort(TElement[] elements, Int32 count)
at System.Linq.OrderedEnumerable`1.<GetEnumerator>d__1.MoveNext()
at System.Linq.Enumerable.<SkipIterator>d__30`1.MoveNext()
at System.Linq.Enumerable.<TakeIterator>d__24`1.MoveNext()
at Kendo.Mvc.Extensions.QueryableExtensions.Execute[TModel,TResult](IQueryable source, Func`2 selector)
at Kendo.Mvc.Extensions.QueryableExtensions.CreateDataSourceResult[TModel,TResult](IQueryable queryable, DataSourceRequest request, ModelStateDictionary modelState, Func`2 selector)
at Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(IEnumerable enumerable, DataSourceRequest request)
at LicensingServer.API.Helpers.LogHub.<Read>d__0.MoveNext() in C:\Projects\LicensingServer\Aurelia\LicensingServerAPI\LicensingServer.API\Helpers\LogHub.cs:line 21
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNet.SignalR.Hubs.HubPipelineModule.<>c__DisplayClass0_0.<<BuildIncoming>b__0>d.MoveNext().

Any help or suggestions are welcome.

Grid

answered on 21 Oct 2019

1 answer

397 views

How Do I Bind TreeView To Stored Procedure Through Entity Model Framework

Hello, I have a stored procedure which has the both the parent Key/Id and Text/Name fields along with the child Key/Id and Text/Name fields. For example here are rows from sample table

Parent_Key_Id Parent_Text_Name Child_Key_Id Child_Text_Name

================================================================

1 Red 1 A

1 Red 2 B

1 Red 3 C

2 Green 4 D

2 Green 5 E

and I would like the tree view to look like the following if all nodes were expanded:

Red

A

B

C

Green

D

E

I've been trying to follow the demos in:

https://docs.telerik.com/aspnet-mvc/helpers/navigation/treeview/how-to/expand-node-async

https://demos.telerik.com/aspnet-mvc/treeview/remote-data-binding

and the ExpandSelectedItemAsync solution available on your git repository, but I have not seen a good example of what I'm trying to do. I cannot bind to the tables directly because the two tables in the stored procedure are several joins away in entity model and I only want these two items. I want the child items to load only when the parent is expanded. Can someone please provide a complete and detailed example of how to accomplish this?

TreeView

answered on 18 Oct 2019