Questions on Kendo UI for jQuery Forum

1 answer

2.6K+ views

Custom Columns Inside Kendo Grid To Trigger a Javascript Function

I would like to add a custom column to this grid and i tried the template method as in the code below but the code does not even compile and i get thrown an error which i have provided below as well. I want to create a custom column inside the kendo grid and then have a clickable link inside that column which call a javascript function. Is it possible?

@ModelType IEnumerable(Of Gatekeeper.SystemGroupMembers)@Code ViewData("Title") = "DisplayMembers"End Code @(Html.Kendo().Grid(Model) _ .Name("SystemGroupMembers") _ .Columns(Sub(c) c.Bound(Function(p) p.Name) c.Bound(Function(p) p.Class) c.Bound(Function(p) p.ParentName) c.Template(@<text>blah</text>).Title("blah")End Sub) _ .Sortable() _ .DataSource(Sub(c) c.Ajax() _ .ServerOperation(False)End Sub))<div>@Html.ActionLink("Back to List", "DisplayGroups")</div>
Error:
Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. Compiler Error Message: BC30201: Expression expected. Source Error: Line 8: .Name("SystemGroupMembers") _ Line 9: .Columns(Sub(c) Line 10: c.Template(@<text>Click here</text>) Line 11: c.Bound(Function(p) p.Name) Line 12: c.Bound(Function(p) p.Class)

Menu

answered on 29 Mar 2018

3 answers

121 views

Clearing RadEditor content causes High CPU consumption

Hi,

I am facing an issue with a RadEditor control inside my web application. This is the line of code:

var editor = $("#editor").data("kendoEditor");

editor.value("");

When I run this code the cpu consumption increases up to 50% and the page ends crashing. This only occurs in firefox, even in its latest version. I was able to make a workaround for this, setting an blank space instead of an empty string, but the issue also happens when I clear the text manually through the UI.

Please your support for this issue.

Editor

answered on 29 Mar 2018

9 answers

253 views

Popup edit click button twice after invalid value

Hi,

I am trying to use the telerik popup editor for a grid but I have discovered an inconvenience and I was wondering if there are solutions to this.

On the demo page of the telerik grid try to add a new row with only one invalid value. Press update button. The invalid message appears by changing the size of the popup. Also the position of the Update button has changed. Write a valid value and do not leave the control. Press the update button. The invalid message disappears but the popup remains open and the Update button changes position again. So you as a user have to press again the update button.

Is there a recommended solution for this?

Grid

answered on 29 Mar 2018

2 answers

383 views

Disable Time slot in Scheduler for angularjs

I was able to create a scheduler in jquery with vertical grouping and I also disabled timeSlot in it but I'm facing some issues in Angularjs.

I'm not able to disable timeSlot in angularjs

$scope.schedulerOptions = {

eventHeight: 20,

majorTick: 1440,//set major tick to full day and leave the default startTime/endTime

minorTickCount: 1,//show only one minor tick

majorTimeHeaderTemplate: "",

ShowTimeRuler :false,

timeSlot:false,

editable: {

template: $("#customEditorTemplate").html()

},

date: new Date("2013/6/13"),

startTime: new Date("2013/6/13 07:00 AM"),

height: 600,

views: [

{

type: "week",

selected: true ,

dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M')#</span>"

}

],

timezone: "Etc/UTC",

dataSource: {

batch: true,

transport: {

read: {

url: "https://demos.telerik.com/kendo-ui/service/tasks",

dataType: "jsonp"

},

update: {

url: "https://demos.telerik.com/kendo-ui/service/tasks/update",

dataType: "jsonp"

},

create: {

url: "https://demos.telerik.com/kendo-ui/service/tasks/create",

dataType: "jsonp"

},

destroy: {

url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

schema: {

model: {

id: "taskId",

fields: {

taskId: { from: "TaskID", type: "number" },

title: { from: "Title", defaultValue: "No title", validation: { required: true } },

start: { type: "date", from: "Start" },

end: { type: "date", from: "End" },

startTimezone: { from: "StartTimezone" },

endTimezone: { from: "EndTimezone" },

description: { from: "Description" },

recurrenceId: { from: "RecurrenceID" },

recurrenceRule: { from: "RecurrenceRule" },

recurrenceException: { from: "RecurrenceException" },

ownerId: { from: "OwnerID", defaultValue: 1 },

isAllDay: { type: "boolean", from: "IsAllDay" }

}

},

filter: {

logic: "or",

filters: [

{ field: "ownerId", operator: "eq", value: 1 },

{ field: "ownerId", operator: "eq", value: 2 }

]

}

},

dataBound: function(e) {

//hide the times row from the date/time header:

var view = this.view();

view.datesHeader.find("tr:last").prev().hide();

view.timesHeader.find("tr:last").prev().hide();

//Required: remove only last table in dataBound when grouped

var tables = $(".k-scheduler-times .k-scheduler-table");

tables = tables.last();

var rows = tables.find("tr");

rows.each(function() {

$(this).children("th:last").hide();

});

},

group: {

resources: ["Rooms"],

orientation: "vertical"

},

resources: [

{

field: "roomId",

name: "Rooms",

dataSource: [

{ text: "Room 101", value: 1, color: "#6eb3fa" },

{ text: "Room 201", value: 2, color: "#f58a8a" },

{ text: "Room 301", value: 3, color: "#2c0eca" },

{ text: "Room 401", value: 4, color: "#ed8312" },

{ text: "Room 501", value: 5, color: "#2cdeca" },

{ text: "Room 601", value: 6, color: "#c3ff42" },

{ text: "Room 701", value: 7, color: "#3aeeca" },

{ text: "Room 801", value: 8, color: "#21d187" },

{ text: "Room 901", value: 9, color: "#5371a0" },

],

title: "Room"

},

{

field: "ownerId",

title: "Owner",

dataSource: [

{ text: "Alex", value: 1, color: "#f8a398" },

{ text: "Bob", value: 2, color: "#51a0ed" },

{ text: "Charlie", value: 3, color: "#56ca85" }

]

}

]

};

Scheduler

answered on 29 Mar 2018

7 answers

290 views

Spreadsheet - Data validation - export to JSON

Hello,

I am using the asp.mvc spreadsheet control and I like it very much. It saved me lot of time. I have a small question regarding the data validation.

Scenario:

1. I set the row and column headers.(Row 1, Column A)

2. Range B2:Z10 is used for data cells - user will provide decimal values here

3. I style the sheet, header cells differ from data cells.

3. For all data cells I set the validation: (From menu I choose Data validation - Criteria: Number, Comparer: greater than, Min:0,)

4. I save the sheet as Json and store it in the database.

5. I recreate the spreadsheet from JSON and ask user to fill the data cells(B2:Z10) - Headers and values are set properly, colors too but validation is missing.

Could you advice me how should I proceed so data cells will be check with validation and user will be forced to put decimal values greater that 0? The step where I store the JSON in the database is obligatory.

Thank you for your quick response.

Spreadsheet

answered on 29 Mar 2018

2 answers

107 views

High CPU Consumption when clearing Editor content

Hi,

I am facing the following issue when I clear the value of the kendoEditor control. This happens only in Firefox (version 59.0.2) even using jquery or clearing the content manually through the UI. This is the code...

var editor = $("#editor").data("kendoEditor");

editor.value("");

When I clear the content the CPU consumption raises up to 50% and the browser ends up crashing.

Please your support for this issue.

Editor

answered on 29 Mar 2018

13 answers

369 views

Use switch in non-mobile application

Hello,

We would like to use the mobile switch without doing an entire mobile application (i.e. within an HTML5/CSS3 application using Kendo Web UI). I have managed to determine the minimum integration with Kendo Mobile to get a switch control to work, but unfortunately, by running new kendo.mobile.Application, it affects other controls, like kendo drop-down-lists (see the attached graphic for a sample of what happens to a kendo drop-down list).

I tried localizing the scope of the effects by defining a <div> just around the switch and calling new kendo.mobile.Application($("#divAroundTheSwitches")), but this didn't work -- no switches were created.

Is it feasible to try to use mobile platform widgets in a non-mobile HTML5/CSS3 application? Any direction you could give would be greatly appreciated.

Thank you!

Switch (Mobile)

answered on 29 Mar 2018

24 answers

6.5K+ views

Dropdownlist should take size of biggest option

We have a dropdownlist with an option that is very long. When you open the dropdownlist it displays the option wrapped(broken over more than one line). We want to change this behaviour so the dropdown takes on the size of the biggest option, like a normal HTML select does, with no wrapping, no ellipsis etc.
In the screenshot, we want the green area to stay the same, but the red area needs to adjust it's size to fit the widest option without wrapping

DropDownList

answered on 29 Mar 2018

2 answers

233 views

filter popup immediately closes angularjs

How can I convert "popup:{appendto: $("#winComments")}" to angularjs "k-popup: {??????}"? Thanks.

$("#ddMonth").kendoDropDownList({
dataSource: $scope.mthList,
dataTextField: "name",
dataValueField: "name",
filter: "contains",
popup: { <=====
appendTo: $("#winComments") <=====
} <========
});

<select data-ng-show="filterMth" kendo-drop-down-list
k-data-text-field="'name'"
k-data-value-field="'name'"
k-filter="'contains'"

??????????
k-data-source="mthList"></select>

DropDownList