Questions on UI for ASP.NET MVC Forum

3 answers

1.5K+ views

I have some experience with Kendo Grids, and I know that the standard implementation of the checkbox feature will select any row that is checked; however, my current project necessitates that there be a distinction between "Selected" rows and "Checked" rows.

I have a Splitter, with contents as follows:

    Top pane: contains a set of Kendo Controls (TextBoxes, DropDownLists, NumericTextBoxes, etc.)
    Bottom pane: contains a Kendo Grid
            GridSelectionMode = Single
            GridSelectionType = Row
            First column = checkboxes (excluding the "select all" checkbox)

Each row on the grid represents an order for a spare part. When a row is selected (not "checked" but simply "selected" by clicking on the row itself), the controls in the Top Pane have their values set according to the values of the columns in the selected row. Then, if the value of a control is changed by the user, the corresponding grid cell of the selected row is updated accordingly (the update occurs on the "onblur" event of the control). The user may go through multiple rows, one at a time, changing grid cell values as needed. Because of this behavior, GridSelectionMode must be set to "Single".

The final step is for the user to "submit" any orders that need to be submitted. At this point, the user will use the checkboxes in the first column to "check" all rows to be submitted (the user will almost always be submitting multiple rows, but rarely or never will the user be submitting all rows). Once all desired rows have been checked, the user will click a "Submit" button, which needs to get all "checked" rows, then send these to the server via an ajax call, at which point the database is updated. I can get all of this to work easily with a single "selected" row, but I really need to be able to submit multiple "checked" rows that are not also "selected".

Since GridSelectionMode must be "Single", the action of checking a checkbox cannot also cause the corresponding row to be "selected", which I know is the default behavior of the checkbox selection in the Grid control. Since the "select" behavior seems to be built into the k-checkbox class, my best idea at the moment is to use non-kendo checkboxes in the first column, which I have done; however, I haven't been able to figure out how to get all "checked" rows (which needs to happen on the "Submit" button's "click" event).

I can provide some sample code if needed, but I'm hoping the provided info will be enough to go on. I'm open to any creative ideas, but I'm hoping the solution will be more simple than I'm making it.

Any assistance would be greatly appreciated!

Grid

answered on 22 Mar 2018

3 answers

341 views

Get "checked" rows (not "selected" rows)

Selectable(selectable => selectable

When a grid row is "selected" (not "checked" - just selected, by clicking on the row itself),

Grid

answered on 21 Mar 2018

1 answer

203 views

.TagMode(TagMode.Single) doesn't work in mvc

I am trying to use kendo.multiselect (). TagMode (single) and I can not because it gives me the error, it will be that the license that I have (commercial) is not included in the package because I thought it was that way.

Here the Error:

MultiSelect

answered on 20 Mar 2018

4 answers

299 views

Refreshing an unknown number of child grids

wn nI have a parent grid that contains n number of children grids. When a child grid has a value updated, the backend will change many values in the children grid but only the child that was selected by the user will be visually updated.

How do I force a refresh on all children grid that the child whom's data was updated without collapsing every grid? I know this should be using the "RequesEnd()" call but how do I iterate through an unknown # of children with relation to the parent the child belongs to? s

Grid

answered on 20 Mar 2018

3 answers

261 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

179 views

[Solved] 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

126 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

447 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

257 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

648 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