Questions on UI for ASP.NET MVC Forum

7 answers

371 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

917 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

74 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

190 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

104 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

67 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

114 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

616 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

2 answers

848 views

MVC Readonly property

The readonly property from MVC only appears to be available on the Switch control. I have reviewed the TextBox flavors, Combobox, dropdownlist, and MultiSelect, I required to control the readonly property from Javascript.

I was looking for the product feedback/suggestion area, as I think this should be posted there.

FYI

General Discussions

answered on 11 Oct 2019

2 answers

313 views

Pass parameter to Read Method during Exports

A common problem with exporting to excel is you often may have columns that contain HTML or other content that doesn't work well with Excel.

A GENIUS friend of mine suggested that we just change the grid read when exporting so that it only provides the HTML or other non-friendly-to-Excel content during reads that aren't for an excel export. Thank you, Crankshaw! Here's how it works.

Just create a global parameter in javascript to identify when you're doing an excel export. Pass that parameter to the grid's Read.

Then give your standard excel export button an ID, so that you can tie events to it other than the normal excel export.

// toolbar.Excel().HtmlAttributes(new { id = "WIPDetailToXL" })

Then create two events in javascript.

NOTE: MouseDown happens prior to the Click event, but so does MouseUp. So use MouseDown and MouseOut, both on the ExcelExport button.

So when you Click to export, the mousedown will set the variable to let your read know that this is an "Excel Read". This happens BEFORE the export. And when you move your cursor off the Export button, the variable will change back so that subsequent reads will render your html correctly within your grid.

    $("#WIPDetailToXL").mousedown(function (e) {
        exportExcelFlag = 1;
    });

    $("#WIPDetailToXL").mouseout(function (e) {
        exportExcelFlag = 0;
    });

</script>

Hope this helps someone as much as it did me!

Grid

answered on 10 Oct 2019