Questions on Kendo UI for jQuery Forum

1 answer

288 views

Changing slider configuration dynamically

Is there a way to change slider configurations dynamically at run time? One of my requirements is to have a slider with a max that gets bigger and bigger each time the tick hits the right side. For example,

100, 1000, 10000

I've see a widget.refresh() function on some other Kendo widgets.

Slider

answered on 17 Jun 2015

3 answers

824 views

Destroy(remote) - sending IDs

In the following documentation page: docs.telerik.com/kendo-ui/framework/datasource/crud

you state: "The destroy action submits the data item(s) that should be deleted, or just its ID(s)."

Please explain how we can choose to send just the ID(s) and not the data-items (models). If it's a config setting, then please tell me where it should be set. If it has to be done manually by me, please give an example.

Data Source

answered on 17 Jun 2015

3 answers

1.2K+ views

[Solved] Override/Cancel default Form validation.

I'm using validator to validate my html form. My form has two submit buttons Save and Cancel. So now if I click the cancel button it does a validation and prevents the submit. Is it possible to disable of bypass this behavior so that cancel will submit the form without validation?

Validation

answered on 17 Jun 2015

1 answer

568 views

[Solved] PDF Export - Images missing

Hi - I have the following Grid with Images:

@(Html.Kendo().Grid<MvcApplication.Models.Articles>()

.Name("gridSelectedArticles")

.DataSource(dataSource => dataSource // Configure the grid data source

.Ajax() // Specify that ajax binding is used

//.Read(read => read.Action("Articles_Read", "Parts").Data("additionalInfo")) // Set the action method which will return the data in JSON format

.ServerOperation(false)

.PageSize(5)

.Aggregates(a => a.Add(c => c.Price).Sum())

)

.AutoBind(false)

.Columns(columns =>

{

columns.Bound(a => a.StockCode).Title("Artikelnummer");

columns.Bound(a => a.ImageUrl).ClientTemplate("<img src='#=ImageUrl#' alt='#=StockCode #' title='#=StockCode #' width='55' />").Title("Bild");

columns.Bound(a => a.StockBalance).Title("Lagerbestand");

columns.Bound(a => a.Price).Title("Preis").Format("{0:C}")

.ClientFooterTemplate("Total #= kendo.toString(sum, 'C')#");

})

.Pageable() // Enable paging

.Sortable() // Enable sorting

.Selectable(n => n.Mode(GridSelectionMode.Single))

.ToolBar(tools => tools.Pdf())

.Pdf(pdf => pdf

.AllPages()

.FileName("Kendo UI Grid Export.pdf")

.ProxyURL(Url.Action("Pdf_Export_Save", "Parts"))

)

//.Events(e => e.DataBound("fDataChanged"))

)

When I export to PDF, the Images are missing in the PDF File.

Images in the Sample here
http://demos.telerik.com/kendo-ui/grid/pdf-export

are exported though. What am I doing wrong?

Thank you.

Grid

answered on 17 Jun 2015

3 answers

271 views

CheckBox checks his Parents

Hello,

after adapting your TreeView CheckBox sample (http://demos.telerik.com/kendo-ui/treeview/checkboxes),
I'm experiencing some troubles when using the TreeView with CheckBoxes in 'checkChildren' mode.
The problem is that some items seem to be checking their parent nodes after checking them.
The children are checked correctly, but I don't think that checking the PARENTS does make any sense.
I already tried it with a lot of different nodes, this occurs not all the time.
It seems to happen only with the second root node and the first few children of it.

At first I suspected my items for having equivocal IDs, but they seem to be set appropriately.

I also tried to comment the "onCheck" and the "checkedNodeIds" function but this does not affect the behavior in any way either.

I hope you can provide help on this issue,
thanks in advance.

Ronald

TreeView

answered on 17 Jun 2015

1 answer

176 views

MultiSelection filtering in TreeList?

Hi!

I know that Kendo Grid supports multiselection filtering for columns. Is it possible to have this in TreeList also? If yes, then how can I configure this?

TreeList

answered on 17 Jun 2015

2 answers

445 views

Remove events from Kendo UI Scheduler shown an error

Hi,

I have kendo UI schedule where events have been set from a data source. when I remove events from the scheduler following error has shown in console.

Uncaught TypeError: Cannot read property '$destroy' of undefined

please find below scheduler configuration

$scope.schedulerTimeLineOptions = {

date: new Date(),

majorTick: 1440,

minorTickCount: 1,

editable: {

template: $("#editor").html(),

confirmation: "Are you sure you want to delete this event?"

},

views: [

"timelineWeek",

{

type: "timelineWeek",

selected: true,

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

},

],

edit: schedulerDialyCalendarTimeLine_edit,

add: schedulerDialyCalendarTimeLine_add,

save: schedulerDialyCalendarTimeLine_save,

remove: schedulerDialyCalendarTimeLine_remove,

timezone: "Etc/UTC",

dataBound: function (e) {

var view = this.view();

if (view.name.indexOf("timeline") > -1) {

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

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

};

var scheduler = this;

view.table.find("td[role=gridcell]").each(function () {

var element = $(this);

var slot = scheduler.slotByElement(element);

if (slot.startDate.getDay() == 0) {

element.removeClass("k-nonwork-hour");

element.addClass("scheduler-sunday");

}

else if (slot.startDate.getDay() == 6) {

element.removeClass("k-nonwork-hour");

element.addClass("scheduler-saturday");

}

});

},

eventTemplate: "<div class='k-event-template'>#if (data.image) {# <img src='#= image #'>#}# #= title #</div>",

group: {

resources: ["Priests"],

orientation: "vertical"

},

resources: [

{

field: "priest",

name: "Priests",

dataSource: $filter('orderBy')($scope.ActivePriestList, 'OrderIndex'),

multiple: true,

title: "Priests"

},

{

field: "color",

dataColorField: "color",

dataValueField: "color",

dataSource: $scope.ActiveLabelList.concat($scope.MedarbeiderenLabelList)

}

],

navigate: function (e) {

$scope.schedulerTimeLine_navigate(e, {

Id: newValue,

PriestList: $scope.ActivePriestList

});

}

};

Events have been added as below

angular.forEach(resp.WorkPlanElements, function (WorkPlanElement) {

angular.forEach(cacheData.get('AllLabels'), function (Label) {

if(Label.Id===WorkPlanElement.LabelId){

var WorkPlanElementItem={

Id:WorkPlanElement.Id,

image : "",

priest: WorkPlanElement.PriestId,

start: new Date(DateUtilsService.JSONdateToString_yyyyMMdd(WorkPlanElement.Start)),

end: new Date(DateUtilsService.JSONdateToString_yyyyMMdd(WorkPlanElement.End)),

title:Label.Name,

isAllDay: true,

color: "#" + Label.ColorCode.substr( 3, Label.ColorCode.length),

colorItem:{

Id:Label.Id,

name:Label.Name,

hex: "#" + Label.ColorCode.substr( 3, Label.ColorCode.length)

},

state:"Planned",

duration:DateUtilsService.dateDiff(WorkPlanElement.Start, WorkPlanElement.End),

comment:WorkPlanElement.Comment

};

WorkPlanElementList.push(WorkPlanElementItem);

};

});

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

var dataSource = new kendo.data.SchedulerDataSource({

data: WorkPlanElementList

});

if (!angular.isUndefined(scheduler)){

scheduler.setDataSource(dataSource);

$scope.CurrentElements = WorkPlanElementList;

};

please help...!!!

Thanks

Lilan

General Discussions

answered on 17 Jun 2015

6 answers

1.5K+ views

How do I change or disable DatePicker animations for selecting months and years?

I've disabled animation for opening and closing the date picker via animation:false. This unfortunately doesn't stop animations when selecting a month or year. How do I disable or change these animations?

DatePicker

answered on 17 Jun 2015

3 answers

133 views

bindToKNgModel - unnecessary $apply

Hi,

is it possible that you have one unnecessary $apply function inside mentioned method. In there you have:

// keep in sync

scope.$apply(function() {

var watchHandler = function(newValue, oldValue) {

if (newValue === undefined) {

// because widget's value() method usually checks if the new value is undefined,

// in which case it returns the current value rather than clearing the field.

// https://github.com/telerik/kendo-ui-core/issues/299

newValue = null;

}

if (updating) {

return;

}

if (newValue === oldValue) {

return;

}

widget.$angular_setLogicValue(newValue);

};

if (kendo.ui.MultiSelect && widget instanceof kendo.ui.MultiSelect) {

scope.$watchCollection(kNgModel, watchHandler);

} else {

scope.$watch(kNgModel, watchHandler);

}

});

this is causing issues for us as we have some wrapper around kendo-tooltip where we manually compile content of it because it's dynamic (we get $digest already in progress issue).

So, to get back on the code, why are you using $apply here? You only have two watch statements assigned, which don't require $apply around it.

General Discussions

answered on 17 Jun 2015

5 answers

832 views

[Solved] CustomEditor in Kendo Grid

I want to implement a combo box editor in the kendo drid, for which I've followed this link: Grid / Editing custom editor

The issue is I am having is, in the column (with combo box editor) the grid shows the ID instead of the text field while its not in edit mode. The "../api/Users?uid=1" will return JSon: [ { ID: 1, UserName: "aaa" }, { ID: 2, UserName: "bbb" } etc....

Here is the code:

var gridContainer = $('<div id="grdSelectedWorkers" />');

gridContainer.appendTo($(element));

var dataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: {

url: "../api/Workers",

dataType: "json",

data: { id: arrWorkerIDs }

},

update: {

url: "../api/Workers",

dataType: "json",

type: "PUT",

contentType: "application/json"

},

destroy: {

url: "../api/Workers",

dataType: "json",

type: "DELETE",

contentType: "application/json"

},

create: {

url: "../api/Workers",

dataType: "json",

type: "POST",

contentType: "application/json"

},

parameterMap: function (options, operation) {

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

return JSON.stringify(options.models) ;

} else {

return options;

}

},

schema: {

model: {

id: "WokerID",

fields: {

WokerID: { editable: false, nullable: true },

FirstName: { type: "string" },

LastName: { type: "string" },

UserID: { type: "number" },

UserName: { type: "string" }

}

},

data: function (data) {

return data;

},

total: function (data) {

if (data != undefined) {

if (data.length > 0) { return data[0].Total; }

return data.length;

}

},

batch: true,

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true

});

gridContainer.kendoGrid({

dataSource: dataSource,

toolbar: ["create", "save", "cancel"],

editable: true,

saveChanges: function(e) {

if (!confirm("Are you sure you want to save all changes?")) {

e.preventDefault();

} else {

this.dataSource.read();

}

},

pageable: true,

change: function (e) {

var selectedRow = this.select();

contentItem.screen.WorkerID = parseInt(selectedRow[0].cells[0].innerHTML);

},

columns: [{

field: "FirstName",

title: "First Name"

}, {

field: "LastName",

title: "Last Name"

}, {

field: "UserID",

title: "User",

filterable: {

extra: false,

ui: userFilter

},

editor: userDropDownEditor

}, {

command: ["destroy"], title: " ", width: 150

}]

});

function userFilter(element) {

element.kendoDropDownList({

dataSource: {

transport: {

read: "../api/Users/"

}

});

}

function userDropDownEditor(container, options) {

$('<input id=cmbUsers required data-text-field="UserName" data-value-field="ID" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoComboBox({

autoBind: false,

dataSource: {

transport: {

read: "../api/Users?uid=1"

}

});

}

Grid

answered on 17 Jun 2015