Questions on UI for ASP.NET MVC Forum

4 answers

1.1K+ views

DropDownList - change ServerFiltering based on initial call to load data

Hi

I am using the @Html.Kendo.DropDownList in a MVC application (.NET Core). The code works perfectly. I have a weird request though. I get my data from a backend system which cannot filter any fields that are less than 1001 entries long (long story but unfortunately true) - so this is what happens: the page loads and then calls source.read to get the first 1001 entries - this works perfectly each time. If the user then does as typeahead search in a field that is < 1001 entries the search does not work i.e. the DB returns all the entries again. If there are more that 1001 entries all is well. My question is this: is there a way for me to change the

.ServerFiltering(true);

to

.ServerFiltering(false);

at runtime?

My idea is that once the initial data has been loaded I check how many entries have been received and then set the .ServerFiltering flag appropriately.

Alternatively I could load all the dropdown first (before showing the page) and then have an if statement on the .cshtml file => this would/has worked but it experience is worse for the users - using ServerFiltering (true) loads the page and the users see the spinning blue thingy and know that data is being loaded (I can have up to 100 dropdown on the page (the users decide how many per page themselves)), otherwise, once they have pressed open they need to wait while the dropdown are being loaded.

Thank you in advance for any help given.

Ursus

@(Html.Kendo().DropDownList()
   .Name(kendoFieldName)
   .MinLength(3)
   .Value(Model.Fields[i].Values[j])
   .HtmlAttributes(new {style = "width: 100%"})
   .Filter(FilterType.Contains)
   .DataSource(source =>
   {
   source.Read(read =>
   {
   read.Action("TypeAhead", "Document", new
   {
   docId = Model.DocId,
   docType = Model.DocType,
   fieldNumber = Model.Fields[i].FieldIndex,
   row = j
   });
   })
   .ServerFiltering(true);
   })
)

DropDownList

answered on 29 Oct 2019

1 answer

108 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.3K+ 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

618 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

350 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

496 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

501 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

344 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

218 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

830 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