Questions on UI for ASP.NET MVC Forum

6 answers

842 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

410 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

7 answers

409 views

Grid with SignalR binding and server operations

Hi.

I have a grid bound to SignalR. To be able to use server side operations I use the Kendo.DynamicLinq lib. Fitlering works fine. Aggregates don't.

Problem is: My aggregates field is always null.

My data source request class:

using Kendo.DynamicLinq;

using System.Collections.Generic;

namespace idee5.Dispatcher.Models {

public class CalendarEventGridDataSourceRequest : DataSourceRequest {

public IEnumerable<int> Workplaces { get; set; }

// these are missing in the Kendo Dlinq class

// taken from http://www.telerik.com/forums/problems-with-grid-using-signalr-and-serverfiltering-sorting-and-paging#l1juxVjyvkye5eSO6Z9TrA

public int PageSize { get; set; }

public IEnumerable<Aggregator> Aggregates { get; set; }

}

I took the field names from this post and it's attached soltuion.

The hub method to tetrieve the data:

01.public async Task<DataSourceResult> OperationEvents(CalendarEventGridDataSourceRequest request) {

02. // workaround for ArgumentNullException in ToDataSourceResult

03. if (request.Filter != null && request.Filter.Filters.Count() == 0 && request.Filter.Field == null) request.Filter = null;

04.

05. // SignalR has no session, so get the preferences from the preference service

06. string userId = Context.User.Identity.GetUserId();

07. PreferenceProfile activeProfile = await Task.Run(() => _userSettingService.ReadActiveProfile(userId));

08. IQueryable<CalendarEvent> result = await _schedulerService.OperationEventsAsync(activeProfile);

09.

10. IEnumerable<int> workplaces = request.Workplaces ?? new List<int>();

11.

DataSourceResult retVal = result.Where(ce => ce.Operation.AllowedWorkplaces.Count(awp => workplaces.Contains(awp.WorkplaceId ?? 0)) > 0)

12. .ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter, request.Aggregates);

13. // Late view model creation.

14.

// Kendo.DynamicLinq adds the filters at the end which hits the database for view model creation before filters get applied

15. retVal.Data = retVal.Data.OfType<CalendarEvent>().Select((ce) => _mapper.Map<CalendarEventViewModel>(ce)).ToList();

16. return retVal;

17.}

What is needed to have a signalr bound grid with server filtering, sorting and grouping/aggregation?

Kind regards

Bernd

Grid

answered on 18 Oct 2019

1 answer

1.0K+ views

Grid Columns Command Edit().Template How to pass data item

Hello,

I'm trying to add a custom edit button with dataitem information to grid because I need to check each row property value "Permission" to show the button or not.

I built this code (each comment // Line # identifies one test):

<script id="grid-button-edit-template" type="text/x-kendo-template">

#if(data.Permission >= 3) {#

<a class="k-button k-grid-edit">Edit</a>

#}#

</script>

<script type="text/javascript">

var actionButtonsTemplate = kendo.template($('#grid-button-edit-template').html());

</script>

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

.Name("GridName")

.Columns(columns =>

{

columns.Command(c =>

{

// Line #1

c.Edit().TemplateId("grid-button-edit-template");

// Line #2

c.Edit().Template("#=actionButtonsTemplate(data)#");

// Line #3

c.Edit().Template("grid-button-edit-template");

});

// Line #4

columns.Template("#=actionButtonsTemplate(data)#");

})

...

)

I have a couple of issues:

In Line #4 everything is Ok but

- When I set edition InLine the buttons [Save] & [Cancel] don't appear

- On edition PopUp I can't set [Save] & [Cancel] text values (Like I do with c.Edit().UpdateText("My Text Update"))

Lines #1, #2, #3 don't work, I can't pass the dataitem information to the template.

Which one is the best approach? How I can solve the issues?

Regards,

Ivan

Grid

answered on 18 Oct 2019

3 answers

86 views

No results if too many items

I have a MultiColumnComboBox that works as expected unless the search returns more than a certain number of items. I'm not sure what the limit is, if I get 1500 results, it displays fine, but 5000 results and it is as if nothing matched and I get no items in the combo.

Is this a configurable setting, and is there a way to throw up a message saying something like "too many results, refine your search"?

MultiColumnComboBox

answered on 17 Oct 2019

1 answer

208 views

Gantt - Cant see SampleEntities, GanttTaskService .

First of all, I'm sorry for my bad English.
The company I worked with asked me to create a Telerik mvc gantt demo.

It can be one of 2 gantt samples.

https://demos.telerik.com/aspnet-ajax/gantt/examples/overview/defaultcs.aspx

https://demos.telerik.com/aspnet-mvc/gantt

I downloaded the Telerik Demo and couldn't see these examples. I wanted to add, but I could not add error.

Can you help me ?

Thanks.

Gantt

answered on 16 Oct 2019

3 answers

117 views

Show tags without delete option

I have a multi-select widget showing check-boxes, on a page, controlling a grid filter. The requirement is to allow multiple selections before the filter is applied. I've done this by applying the filter on the close event, and setting autoclose to false.

This works, but I would like to display all the selected items, but not any to be deleted, except by opening the control up, and unchecking the boxes.

How can I show multiple tags, but remove the delete icon from them? I've tried a tag template, but the icon still shows.

Thanks

MultiSelect

answered on 15 Oct 2019

2 answers

75 views

Customserverbinding Groupable Statistics Problem

Grid Custom Server Binding Data

Group statistics have no data ，ClientGroupHeaderTemplate() do not work；

GroupHeaderTemplate(g=>g.Count)，g.Count is Null

Custom Server Binding the way How to implement group statistics？

Examples Code：

@model System.Collections.IEnumerable
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Order>()
.Name("Grid")
.EnableCustomBinding(true)
.BindTo(Model)
.Columns(columns => {
columns.Bound(o => o.OrderID).Groupable(false);
columns.Bound(o => o.ShipCity).GroupHeaderTemplate(g=>g.Count);
columns.Bound(o => o.ShipCountry).ClientGroupHeaderTemplate("ShipCountry: #= value # (Count: #= count#)");
columns.Bound(o => o.ShipName);
})
.Pageable()
.Sortable()
.Filterable()
.Scrollable()
.Groupable()
.DataSource(dataSource =>dataSource
.Server()
.Total((int)ViewData["total"])
.Aggregates(aggregates =>
{
aggregates.Add(p => p.ShipCountry).Count();
}
)
)
)

Grid

answered on 15 Oct 2019

1 answer

123 views

Clickable but not selectable

Hi, I would like for the listview items to be clickable but not selectable. By that I mean that a user can click on one, and the OnChange event to occur. However, I do not want the item to take on the "selected" styles. I would like the styles to remain the same as an unselected item. How might I accomplish this?

Thanks!

ListView

answered on 15 Oct 2019

10 answers

635 views

Grid popup edit template with dropdownlist with no FK

Hi Guys

I have a grid with popup edit template with a dropdownlist that has to be populated based on a column value from the grid which is not the FK one.

My problem is that the model is empty at the time of populating the dropdown. Could you please help me how to achieve this?

here is the edit template:

@using PartnerLink.Models

@model AssignmentDocTypesExt

@{

Layout = "~/Views/Shared/_EmptyLayout.cshtml";

ViewBag.Title = "Customer Document - "+Model.documentDescription;

var currentUserId = ((TBL_USER)(ViewBag.LoggedUser)).USER_ID;

bool isAdmin = ((TBL_USER)(ViewBag.LoggedUser)).LEAD_PROVIDER_ID == null;

EntitiesModel entities = new EntitiesModel();

var DocumentStatusList = entities.TBL_DOCUMENT_TYPE_Status

.Where(d => !d.OUT_OF_USE && d.DOCUMENT_TYPE_ID == Model.DOCUMENT_TYPE_ID)

.Select(d => new

{

d.DOCUMENT_TYPE_STATUS_ID,

d.DOCUMENT_TYPE_STATUS_DESCRIPTION

}

).ToList();

}

@Html.HiddenFor(model => model.ASSIGNMENT_DOCUMENT_TYPE_ID)

@Html.HiddenFor(model => model.DOCUMENT_TYPE_ID)

<div class="grid-popup">

@Html.LabelFor(m=>m.DOCUMENT_TYPE_STATUS_ID,"Type Status")

@Html.Kendo().DropDownListFor(m => m.DOCUMENT_TYPE_STATUS_ID).Name("DOCUMENT_TYPE_STATUS_ID").BindTo(DocumentStatusList).DataValueField("DOCUMENT_TYPE_STATUS_ID").DataTextField("DOCUMENT_TYPE_STATUS_DESCRIPTION")

<br />

@Html.Kendo().CheckBoxFor(m => m.COMPLETE_FLAG).Name("COMPLETE_FLAG").Label("Complete")

</div>

<br />

<div class="grid-popup">

@(Html.Kendo().Upload()

.Name("files")

.Messages(m => m.Select("Select File"))

.Async(a => a

.Save("ClientDocUpload", "Home")

.AutoUpload(true)

)

.Files(files =>

{

var fs = new List<CreditCheckFileToParse>();

foreach (var f in fs)

{

files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);

}

})

.Events(c => c

.Success(@<text>

function() {

$(".k-grid-update").trigger('click');

}

</text>)

.Error(@<text>

function() {

alert("File Upload Failed");

}

</text>)

.Upload(@<text>

function(e) {

e.data = { id: $("#ASSIGNMENT_DOCUMENT_TYPE_ID").val() };

}

</text>)

)

</div>

<script>

function onSuccessfilesClientDocs(e)

{

$(".k-grid-update").trigger('click');

}

function onErrorfilesClientDocs(e) {

alert("Failed to upload file");

}

</script>

here is the main grid:

@using PartnerLink.Models

@using Telerik.OpenAccess.SPI

@model Tuple<TBL_ASSIGNMENT, IQueryable<TBL_ASSIGNMENT_EXPENDITURE_VALUE>, IQueryable<TBL_ASSIGNMENT_INCOME_VALUE>, IQueryable<TBL_ASSIGNMENT_VEHICLE>>

<div style="height:500px">

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

.Name("gridCaseDocuments")

.Columns(columns =>

{

columns.Bound(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID).Hidden(true);

columns.Bound(p => p.ASSIGNMENT_ID).Hidden(true);

columns.Bound(p => p.DOCUMENT_TYPE_ID).Hidden(true);

columns.Bound(p => p.WHICH_APPLICANT).Hidden(true);

columns.Bound(p => p.DOCUMENT_TYPE_STATUS_ID).Hidden(true);

columns.Bound(p => p.CREDITOR_ID).Hidden(true);

columns.Bound(p => p.numOfUploadedFiles).Hidden(true);

columns.Bound(p => p.documentDescription).Title("Document").Width(350);

columns.Bound(p => p.whichApplicant).Title("Applicant").Width(100);

columns.Bound(p => p.documentTypeStatusDescription).Title("Type Status").Width(200);

columns.Bound(p => p.COMPLETE_FLAG).Title("Complete").ClientTemplate("<input type='checkbox' #= COMPLETE_FLAG ? checked='checked' :'' # disabled />").Width(90);

columns.Bound(p => p.autoCompleteOnUpload).Title("Auto Complete").ClientTemplate("<input type='checkbox' #= autoCompleteOnUpload ? checked='checked' :'' # disabled />").Hidden(true);

columns.Command(command => { command.Edit().Text("Upload"); }).Width(230);

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientDocumentUpload").Window(w => w.Events(e => e.Close("onCloseClientDocumentUpload"))))

.Sortable()

.Scrollable()

.ClientDetailTemplateId("gridCaseDocumentsDetails")

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

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

.HtmlAttributes(new { style = "height:500px;" })

.Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handlerCaseDocuments"))

.Model(model => model.Id(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID))

.Read(read => read.Action("CaseDocuments_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))

.Update(update => update.Action("CaseDocuments_Update", "Home"))

)

</div>

<script id="gridCaseDocumentsDetails" type="text/kendo-tmpl">

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

.Name("gridCaseDocuments_#=ASSIGNMENT_DOCUMENT_TYPE_ID#")

.Columns(columns =>

{

columns.Bound(m=>m.ASSIGNMENT_DOCUMENT_ID).Hidden(true);

columns.Bound(m => m.FILE_NAME).Title("File Name");

columns.Bound(m => m.uploadedBy).Title("Uploaded By").Width(210);

columns.Bound(m => m.DATE_CREATED).Title("Upload Date").Format("{0:dd/MM/yyyy}").Width(110);

columns.Command(c => c.Custom("Download").Click("onClickDownloadClientDoc")).Width(110);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Model(model => model.Id(m => m.ASSIGNMENT_DOCUMENT_ID))

.Read(read => read.Action("gridCaseDocumentsDetails_Read", "Home", new { id = "#=ASSIGNMENT_DOCUMENT_TYPE_ID#" }))

)

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

.Sortable()

.Scrollable()

.ToClientTemplate()

)

</script>

<script type="text/javascript">

function error_handlerCaseDocuments(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

$("#gridCaseDocuments").find(".k-grid-content").height(421);

function onClickDownloadClientDoc(e)

{

alert(e.ASSIGNMENT_DOCUMENT_ID);

}

function onRowDataBoundgridCaseDocuments(e) {

var grid = $("#gridCaseDocuments").data("kendoGrid");

var gridData = grid.dataSource.view();

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

var currentUid = gridData[i].uid;

if (gridData[i].COMPLETE_FLAG) {

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).css("background-color", "rgb(164,198,57)");

} else if (gridData[i].numOfUploadedFiles > 0)

{

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).css("background-color", "rgb(255,191,0)");

}

function onCloseClientDocumentUpload()

{

alert("onCloseClientDocumentUpload");

}

</script>

Grid

answered on 11 Oct 2019