Questions on UI for ASP.NET MVC Forum

3 answers

212 views

Custom Editor Template - datePickerAttributes

Trying to prevent the user from typing in the datetime text fields for Start and End. We want the user to use the "picker" widgets and prevent keyboard input. Thought I could add - datePickerAttributes["readonly"] = "true"; to the generateDatePickerAttributes function as in:

public Dictionary<string, object> generateDatePickerAttributes(
string elementId,
string fieldName,
string dataBindAttribute,
Dictionary<string, object> additionalAttributes = null)
{

Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

datePickerAttributes["id"] = elementId;
datePickerAttributes["name"] = fieldName;
datePickerAttributes["data-bind"] = dataBindAttribute;
datePickerAttributes["required"] = "required";
datePickerAttributes["style"] = "z-index: inherit;";
datePickerAttributes["readonly"] = "true";

return datePickerAttributes;
}

This turns the entire datetime/datetimepicker widgets to readonly. If you inspect element you see readonly="readonly" on the input field which seems ok but the pickers are disabled as well.

What is the correct way to achieve this functionality?

Thanks.

Scheduler

answered on 20 Mar 2018

2 answers

160 views

PivotGrid Column/Row showing undefined

Hi,

I am having issue where the pivotgrid's column/row 's headers are showing "[FieldName]&undefined".

I saw one example (http://dojo.telerik.com/@ggkrustev/imokI) provided by Georgi in one of the post (https://www.telerik.com/forums/pivot-grid-showing-nothing), the column's header is also showing "AssetClass&undefined".

Could anyone advise why is it so ?

thanks.

Regards,

Hage

PivotGrid

answered on 20 Mar 2018

1 answer

102 views

Marker with databar

Hello we are using the map to display different icons for some of our objects and we are using some javascript to set the shape of the marker to the right icon.

Now the customer wants to have more information directly displayed on the map. The best tool to display this data is to incorporate a radial or databar into the icon. is that in any way possible for the map.

Map

answered on 19 Mar 2018

6 answers

377 views

Focus first invalid - custom editor template

Trying to set the focus to the first invalid field when the validation fires onClick of the Save button on a Custom Editor template. I found this reference https://www.telerik.com/forums/kendo-validator---focus-on-first-invalid-field which I've used on a standard form successfully but

validate: function () {
$(".k-invalid:first").focus(); // focus first invalid field
}

doesn't seem to work with the Scheduler when using CustomEditorTemplate, Also tried:

validate: function () {
$(".k-invalid-msg:first").focus(); // focus first invalid field
}

to no avail. Is there a solution for this?

Thanks.

Scheduler

answered on 19 Mar 2018

1 answer

230 views

Items per page not refreshed after datasource changed

Hello,

In our grid, we read data dynamically based on an action in C#.

Recently, we noticed that, if first we retrieve less rows and than more, the "Items per page" is not refreshed and less data is displayed:

Example:

1) We read data that returns 2 rows. Items per page is 2, correct.

2) We read data that return 6 rows. Items per page is still 2, and only two items are displayed in grid

3) Changing pagesize manually will display the correct number (chosen value or all values if less than chosen value).

It used to work correct before. What can be the cause of the problem, and which is the solution?

Grid

answered on 16 Mar 2018

12 answers

612 views

Issue with SignalR data source

Hi,

I've been trying to get a scheduler widget working with a signalr datasource, following the example project "scheduler-signalr-server-filtering".

The scheduler doesn't show any data, and the read method in my Hub never gets hit. The javascript console in Chrome shows the following error: "kendo.all.js:13206 Uncaught Error: The "promise" option must be set."

This option is set in the widget, which looks like this:

<script src="@Url.Content("~/signalr/hubs")"></script>

<script>

var lockedRecords = {};

var scheduleHub, hubStart;

$(function() {

scheduleHub = $.connection.scheduleHub;

$.connection.hub.qs = {'subscriptionId': subscriptionId}

scheduleHub.client.lockRecord = function(record) {

lockedRecords[record.id] = true;

};

scheduleHub.client.unlockRecord = function(record) {

lockedRecords[record.id] = false;

}

hubStart = $.connection.hub.start();

});

function forRead(data, type) {

var scheduler = $("#scheduler").data("kendoScheduler");

var timezone = scheduler.options.timezone;

var startDate = kendo.timezone.convert(scheduler.view().startDate(), timezone, "Etc/UTC");

var initialEndDate = scheduler.view().endDate();

var augmentedEndDate = new Date(initialEndDate.valueOf());

augmentedEndDate.setDate(initialEndDate.getDate() + 1);

var endDate = kendo.timezone.convert(augmentedEndDate, timezone, "Etc/UTC");

var result = {

Start: new Date(startDate.getTime() - (startDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE)),

End: new Date(endDate.getTime() - (endDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE))

}

console.log(result);

return result;

}

function forCreate(data, type) {

console.log(data);

console.log(type);

}

function onMap(data, type) {

switch (type) {

case "read": {

return forRead(data, type);

}

case "create":

{

return forCreate(data, type);

}

default: {

return data;

}

</script>

<script>

function onDataBound(e) {

this.view().content.on("click", ".k-event-delete", preventEvent);

}

function preventEvent(e) {

var scheduler = $("#scheduler").data("kendoScheduler");

var eventUid = $(this).closest(".k-event").attr(kendo.attr("uid"));

var event = scheduler.occurrenceByUid(eventUid);

if (lockedRecords[event.id]) {

e.stopImmediatePropagation();

alert("Currently the event cannot be deleted");

}

function scheduler_edit(e) {

var salesPersonId = e.container.find("#SalesPersonPicker").data("kendoDropDownList");

salesPersonId.dataSource.data(e.sender.resources[0].dataSource.data());

}

function scheduler_resize(e) {

if (salesPersonIsOccupied(e.start, e.end, e.event, e.resources)) {

this.wrapper.find(".k-marquee-color").addClass("invalid-slot");

e.preventDefault();

}

function scheduler_resizeEnd(e) {

if (!checkAvailability(e.start, e.end, e.events)) {

e.preventDefault();

}

function scheduler_move(e) {

if (salesPersonIsOccupied(e.start, e.end, e.event, e.resources)) {

this.wrapper.find(".k-event-drag-hint").addClass("invalid-slot");

}

function scheduler_moveEnd(e) {

if (!checkAvailability(e.start, e.end, e.event, e.resources)) {

e.preventDefault();

}

function scheduler_add(e) {

if (!checkAvailability(e.event.start, e.event.end, e.event)) {

e.preventDefault();

}

function scheduler_save(e) {

if (!checkAvailability(e.event.start, e.event.end, e.event)) {

e.preventDefault();

}

function occurrencesInRangeByResource(start, end, resourceFieldName, event, resources) {

var scheduler = $("#scheduler").getKendoScheduler();

var occurrences = scheduler.occurrencesInRange(start, end);

var idx = occurrences.indexOf(event);

if (idx > -1) {

occurrences.splice(idx, 1);

}

event = $.extend({}, event, resources);

return filterByResource(occurrences, resourceFieldName, event[resourceFieldName]);

}

function filterByResource(occurrences, resourceFieldName, value) {

var result = [];

var occurrence;

for (var idx = 0, length = occurrences.length; idx < length; idx++) {

occurrence = occurrences[idx];

var resourceValue = occurrence[resourceFieldName];

if (resourceValue === value) {

result.push(occurrence);

} else if (resourceValue instanceof kendo.data.ObservableArray) {

if (value) {

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

if (resourceValue.indexOf(value[i]) != -1) {

result.push(occurrence);

break;

}

return result;

}

function salesPersonIsOccupied(start, end, event, resources) {

var occurrences = occurrencesInRangeByResource(start, end, "SalesPersonId", event, resources);

if (occurrences.length > 0) {

return true;

}

return false;

}

function checkAvailability(start, end, event, resources) {

if (salesPersonIsOccupied(start, end, event, resources)) {

setTimeout(function () {

alert("Verkoper heeft al een afspraak.");

},

0);

return false;

}

return true;

}

</script>

@(Html.Kendo()

.Notification()

.Name("notification")

.Width("100%")

.Position(pos => pos.Top(0).Left(0)))

@(Html.Kendo()

.Scheduler<ScheduleViewModel>()

.Name("scheduler")

.Date(DateTime.Now)

.StartTime(7, 0, 0)

.EndTime(19, 0, 0)

.Height(600)

.Views(views =>

{

views.DayView();

views.WorkWeekView(wv => wv.Selected(true).Title("Werkweek"));

views.MonthView();

views.AgendaView();

})

.Editable(e => { e.TemplateName("ScheduleEditorTemplate"); })

.Height(800)

.Resources(resource =>

{

resource.Add(m => m.SalesPersonId)

.Title("Verkoper")

.Name("SalesPerson")

.DataTextField("Name")

.DataValueField("Id")

.DataSource(ds => ds.Read(read => read.Action("SalesPerson_Read", "Planning")));

})

.Events(events => events

.Add("scheduler_add")

.Save("scheduler_save")

.Resize("scheduler_resize")

.ResizeEnd("scheduler_resizeEnd")

.Move("scheduler_move")

.MoveEnd("scheduler_moveEnd")

.Edit("scheduler_edit")

.DataBound("onDataBound"))

.DataSource(d => d

.SignalR()

.ServerFiltering(true)

.Transport(tr => tr

.ParameterMap("onMap")

.Promise("hubStart")

.Hub("scheduleHub")

.Client(c => c

.Read("read")

.Create("create")

.Update("update")

.Destroy("destroy"))

.Server(s => s

.Read("read")

.Create("create")

.Update("update")

.Destroy("destroy")))

.Schema(schema => schema

.Data("Data")

.Total("Total")

.Model(model =>

{

model.Id(m => m.Id);

model.Field("subscriptionId", typeof(int)).From("SubscriptionId").Editable(false);

model.Field("salesPersonId", typeof(int)).From("SalesPersonId").Editable(false);

model.Field("prospectId", typeof(Guid)).From("ProspectId").Editable(false);

model.Field("location", typeof(string)).From("Location");

model.Field("title", typeof(string)).From("Title");

model.Field("description", typeof(string)).From("Description");

model.Field("isAllDay", typeof(bool)).From("IsAllDay");

model.Field("start", typeof(DateTime)).From("Start");

model.Field("end", typeof(DateTime)).From("End");

model.Field("startTimezone", typeof(string)).From("StartTimezone");

model.Field("endTimezone", typeof(string)).From("EndTimezone");

model.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");

model.Field("recurrenceException", typeof(string)).From("RecurrenceException");

}))))

The hub looks like this:

[HubName("scheduleHub")]

public class ScheduleHub : Hub

{

//private static readonly ConcurrentDictionary<int, ConcurrentDictionary<string, string>> Connections = new ConcurrentDictionary<int, ConcurrentDictionary<string, string>>();

public IEnumerable<ScheduleViewModel> Read(FilterRange range)

{

var scheduleService = GetScheduleService();

return scheduleService.GetRange(range);

}

public void Update(ScheduleViewModel schedule)

{

var subscriptionId = GetSubscriptionId();

var scheduleService = new ScheduleService(subscriptionId);

scheduleService.Update(schedule);

Clients.OthersInGroup(subscriptionId.ToString()).update(schedule);

}

public void Destroy(ScheduleViewModel schedule)

{

var subscriptionId = GetSubscriptionId();

var scheduleService = new ScheduleService(subscriptionId);

scheduleService.Delete(schedule);

Clients.OthersInGroup(subscriptionId.ToString()).destroy(schedule);

}

public ScheduleViewModel Create(ScheduleViewModel schedule)

{

var subscriptionId = GetSubscriptionId();

var scheduleService = new ScheduleService(subscriptionId);

scheduleService.Insert(schedule);

Clients.OthersInGroup(subscriptionId.ToString()).create(schedule);

return schedule;

}

public void LockRecord(int id)

{

Clients.OthersInGroup(GetSubscriptionId().ToString()).lockRecord(new {id = id});

}

public void UnlockRecord(int id)

{

Clients.OthersInGroup(GetSubscriptionId().ToString()).unlockRecord(new {id = id});

}

public override Task OnConnected()

{

var subscriptionId = GetSubscriptionId();

//var sessionId = Context.QueryString["sessionId"];

Groups.Add(Context.ConnectionId, subscriptionId.ToString());

//var subscriptionDictionary = Connections.GetOrAdd(subscriptionId, x => new ConcurrentDictionary<string, string>());

//subscriptionDictionary.GetOrAdd(sessionId, x => Context.ConnectionId);

return base.OnConnected();

}

private ScheduleService GetScheduleService()

{

var subscriptionId = GetSubscriptionId();

return new ScheduleService(subscriptionId);

}

private int GetSubscriptionId()

{

return Convert.ToInt32(Context.QueryString["subscriptionId"]);

}

Scheduler

answered on 16 Mar 2018

6 answers

1.3K+ views

Kendo Grid UI - Column Locked not working

Hi .. I am trying to lock first 3 columns in my grid and have the rest scroll horizontally as I have too many columns to display on screen. Below are the code snippets I am using but the columns are not getting locked. Please help.

@(Html.Kendo().Grid<BCM.CurriculumSchedule.Web.Models.StatusReports.StudentProfileHistory>()

.Name("List")

.Columns(columns =>

{

columns.Bound(u => u.DueDate).Locked(true).Lockable(false).Title("Due Date");

columns.Bound(u => u.ReceivedDate).Locked(true).Title("Received Date");

columns.Bound(u => u.TwoMonthNoticeSent).Locked(true).Title("60 Day Notice Sent");

columns.Bound(u => u.OneMonthNoticeSent).Title("30 Day Notice Sent");

columns.Bound(u => u.StudentEmailAddress).Title("Student Email");

columns.Bound(u => u.GSYear).Title("GS Year");

columns.Bound(u => u.OnLOA).Title("On LOA");

columns.Bound(u => u.Program).Title("Program");

columns.Bound(u => u.TimeLineSubmitted).Title("Timeline Submitted");

columns.Bound(u => u.AdHocMemberPresent).Title("EO Present?");

columns.Bound(u => u.AdHocMemberReport).Title("EO Report Received");

columns.Bound(u => u.PermissionToWriteGiven).Title("Permission Given?");

columns.Bound(u => u.PermissionToWriteDate).Title("Date Permission Given");

columns.Bound(u => u.SevenYrExtensionGranted).Title("7Yr Ext Granted?");

columns.Bound(u => u.SevenYrEffectiveDate).Title("Effective Date");

columns.Bound(u => u.DefenseDate).Title("Defense Date");

columns.Bound(u => u.ExtensionGranted).Title("Dean Ext Granted?");

columns.Bound(u => u.ExtensionDateGranted).Title("Ext Date Granted");

columns.Bound(u => u.MentorName).Title("Mentor Name");

columns.Bound(u => u.MentorEmail).Title("Mentor Email");

columns.Bound(u => u.MentorNotificationSentDate).Title("Mentor Notification Sent On");

columns.Bound(u => u.ProgramAdminEmail).Title("Program Administrator Email");

columns.Bound(u => u.PANotificationSentDate).Lockable(false).Title("Program Administrator Notification Sent On");

})

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("StudentProfileHistoryData", "StatusReports", new { id = Model.StudentId }))

.PageSize(10)

)

Grid

answered on 15 Mar 2018

5 answers

739 views

kendo.all.js is missing in bower package

I started working on a new asp.net core application and I have to use also telerik. The project was started by someone else and now I have to change how the scripts are loaded. I have installed the kendo-ui package with bower.

The application is using the kendo.all.min.js but I can not find it in the kendo-ui package. How do I generate it? Is there a page that provides instruction on how to created it?

Installer and VS Extensions

answered on 14 Mar 2018

3 answers

2.7K+ views

Right Align Aggregates Columns and Export Excel

Hi,

I'm aggregating some of my columns, and using the ClientGroupFooterTemplate and aligning some of them using:

<div style='text-align:right'>#= kendo.format('{0:C}', sum)#</div>

because the HtmlAttributes doesn't seem to work:

.HtmlAttributes(new { style = "text-align:right;" });

So the issue I'm facing is when i Export to Excel it prints the "<div style='text-align:right'></div>" which is unneeded and a massive pain as the Data doesn't format correctly.

Is there a better way to achieve what i need and not printing the div tag in the exported excel file?

Thanks,
Lee.

Grid

answered on 14 Mar 2018

1 answer

494 views

kendo grid MVC aggregate issue

Hi i have created a dynamic grid in MVC. the grid datasource will be setup in javascript.

everything works fine in creating the grid and populating the grid data if there is no grouping

However, if i want to group the record and calculate the total.The total value became "undefined".

Also, i found that in the "aggregate" in DataSourceRequest is always null. is it normal ?

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

.Name("grid")

.Columns(columns =>

{

columns.LoadSettings((List<GridColumnSettings>)TempData["ColumnSettings"]);

})

.Events(e =>

{

e.DataBound("DataBound");

e.DataBinding("DataBinding");

e.ColumnMenuInit("ColumnMenuInit");

})

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.PageSize(50)

.Aggregates(agg => {

var ds = (List<System.Data.DataColumn>)TempData["dataAgg"];

if (ds != null && ds.Count() > 0)

{

foreach (System.Data.DataColumn column in (List<System.Data.DataColumn>)TempData["dataAgg"])

{

agg.Add(column.ColumnName, column.DataType).Sum().Count().Max().Min();

}

})

.Model

(model =>

{

var ds = (List<System.Data.DataColumn>)TempData["dataType"];

if (ds != null && ds.Count() > 0)

{

foreach (System.Data.DataColumn column in (List<System.Data.DataColumn>)TempData["dataType"])

{

model.Field(column.ColumnName, column.DataType);

}

)

.Events(e => e.ExcelExport("ExcelExport"))

.ColumnMenu(menu => menu.Columns(false))

.Filterable(f => f.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Contains")

.StartsWith("Starts With")

.EndsWith("Ends With")

.IsEqualTo("Exact Match"))

.ForNumber(num => num.Clear()

.IsEqualTo("Equals")

.IsGreaterThan("Greater Than")

.IsLessThan("Less Than"))

))

.Groupable()

.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))

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

.Reorderable(reorder => reorder.Columns(true))

.Excel(excel => excel

.FileName("MyGrid.xlsx")

.AllPages(true)

)

.Scrollable(s => s.Enabled(true).Height("auto"))

.NoRecords("There is no record")

.HtmlAttributes(new { style = "min-width:200px;max-width:900px;" })

)

the grid data will be populated from the front end

var ds = new kendo.data.DataSource({

type: "aspnetmvc-ajax",

transport: {

read: "/GetGridData?DataUid=" + DataUid,

dataType: "json"

},

schema: {

data: "Data",

total: "Total",

errors: "Errors"

},

pageSize: 20,

serverGrouping: true,

serverPaging: true,

serverFiltering: true,

serverSorting: true,

});

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

grid.setDataSource(ds);

Grid

answered on 14 Mar 2018