Questions on Kendo UI for jQuery Forum

3 answers

176 views

Hi

i'm new using kendo and i'm trying to use the markers in the map and I juts got the example from https://demos.telerik.com/kendo-ui/map/remote-markers (copy) and put it in my project and the markers don't show in the map. Using same datasource https://demos.telerik.com/kendo-ui/content/dataviz/map/store-locations.json What am I missing?

Map

answered on 21 Mar 2018

3 answers

282 views

Issue with ComboBox MVVM

Hi all!

I've an unexpected behavior with ComboBox in case MVVM usage

The issue exists for the case when I have preselected data.SelectedFolder value - see below

shtml code (template for 'Edit' popup window, I've deleted extra text fields from the template):

<script id="editMessageDetailsTemplate" type="text/x-kendo-template">

<form id="editMessageDetailsForm">

<div class="wrapperClass">

<div class="col-md-4" style="padding-top:15px;">

<label class="control-label" for="FolderID">@Global.Folder</label>

</div>

<div class="col-md-11">

<select id="FolderID" name="FolderID"

data-val-required="@Global.FieldFolderMustBeSet"

data-val-number="@Global.FolderDoesNotExist"

data-bind="value: data.SelectedFolder"

placeholder="@Global.PleaseSelect"

data-val="true"

data-value-update="keyup"></select>

<span class="k-invalid-msg" data-for="FolderID" style="width: 100%;"></span>

</div>

<div class="dialogButtons">

<button data-bind="click: onSave, disabled: data.isNotValid"

id="buttonOk" type="submit" data-role="button" class="k-button k-button-icontext" role="button" aria-disabled="false" tabindex="0">

<span class="k-icon k-i-save"></span>

@Global.Save

</button>

<button data-bind="click: onCancel" id="buttonCancel" type="button" data-role="button" class="k-button" role="button" aria-disabled="false" tabindex="0">@Global.Cancel</button>

</div>

</form>

</script>

js code - popup dialog

var $editMessageDetailsDiv = $("<div>", { "id": self.uid });

$("body").append($editMessageDetailsDiv);

var dialog = $("#" + self.uid).kendoWindow(

{

"close": destroyDialog,

"modal": true,

"iframe": true,

"draggable": true,

"scrollable": true,

"pinned": false,

"title": "Edit",

"appendTo": "body",

"resizable": true,

"width": 450,

"height": 350,

"minWidth": 450,

"minHeight": 350,

"actions": ["Maximize", "Close"],

"content": {

template: $("#" + self.contentTemplate).html()

}

}).data("kendoWindow");

dialog.center();

dialog.open();

var formViewModel = new EditMessageDetailsFormViewModel({

FolderID: 123, // !!! existing folder ID from data source !!!

submitCallback: function (model) {

//

},

submitUpdate: function (response) {

//

},

submitError: function (model) {

//

}

});

kendo.bind($editMessageDetailsDiv, formViewModel);

js code - model

function EditMessageDetailsFormViewModel(options) {

var self = this;

self.data = kendo.observable({

SelectedFolder: options.FolderID

});

self.onCancel = function (event) {

options.closeCallback();

kendo.destroy();

};

self.init = function () {

self._initKendo();

var allFoldersPromise = self._getAllFoldersPromise();

allFoldersPromise.done(function (folders) {

self.FolderID.data(folders);

});

};

self._initKendo = function () {

kendo.inputTrimEnabled();

var validatable = self._getValidator();

validatable.validate();

validatable.hideMessages();

$("#FolderID").kendoComboBox({

dataTextField: "FolderName",

dataValueField: "FolderID",

filter: "Contains"

});

self.FolderID = self._getComboBox('FolderID').dataSource;

};

self.onSave = function (event) {

event.preventDefault();

if (self.validate()) {

var params = {

FolderID: self.data.get('SelectedFolder'),

};

// save func

}

};

self.validate = function () {

return self._getValidator().validate();

}

self.resetValidator = function () {

var validator = self._getValidator();

validator.hideMessages();

}

self._getValidator = function () {

return $("#editMessageDetailsForm").kendoValidator().data("kendoValidator");

}

self._getComboBox = function (id) {

return $("#" + id).data("kendoComboBox");

}

self._getAllFoldersPromise = function () {

var promise = $.get(UrlUtils.URL("Messages", "GetFolders")); // back end func to get folders

promise.fail(function () {

showError("err!");

});

return promise;

}

self.init();

}

When popup window opened -> Folder preselected -> this is expected, ok

But a user can't clear this selection using embedded 'clear' cross into ComboBox area.

Any thoughts or suggestions would be useful.

Thanks.

ComboBox

answered on 21 Mar 2018

10 answers

1.1K+ views

Grid freezes during scrolling (works extremely slow)

Grid scrolling works extremely slow in case of using it with virtualization and sorting.

Link to reproduce an issue: https://dojo.telerik.com/@WA_PMak/IzevIzaV

Steps to reproduce:

Follow the link https://dojo.telerik.com/@WA_PMak/IzevIzaV
Push the Run button
Sort by any column (for example by First Name)
Scroll grid till it loaded next virtual page

Actual result: grid freezes during scrolling.
Expected result: grid scrolling work fast as it do if it has unsorted data.

Grid

answered on 21 Mar 2018

2 answers

239 views

How to turn off group resource in Month view

Hi

In day view, I got group resource. It working fine.

But I want to turn off group resource in Month view.

I didn't find this kind of API in the schedule.

Does someone know how to do that?

Scheduler

answered on 21 Mar 2018

1 answer

120 views

Scheduler daily rule

Is it possible to use the value of recurrenceRule FREQ=DAILY with BYDAY, e.g. "FREQ=DAILY;COUNT=4;INTERVAL=3;BYDAY=MO,TU,WE,TH,FR"?
I reproduced the situation when have an incorrect result http://dojo.telerik.com/oqiJAKoR and received dates «16, 19, 22, 28» instead of «16, 21, 26, 29».

Scheduler

answered on 20 Mar 2018

4 answers

398 views

[Solved] weird paging footer

Hi,

Within re-implementing app to Kendo we're using kendo grid where all used grids unfortunately have an invalid paging footer. Buttons around page numbers (like Go to the next page, etc.) are disabled and next to it are rendered again as properly working.

Do you have any ideas or similar cases why it is happening?

Thanks much,
Martin

Grid

answered on 20 Mar 2018

2 answers

311 views

The useful validationMessage parameter is totally undocumented for Model.define()

We found that following features are totally undocumented , where <text> is a custom string :

options.fields.fieldName.validation.<attribute> = value; is generally passed-through like ad HTML attribute when kendo.ui.Editable is involved for editing corresponding model field <fieldName>
And so on options.fields.fieldName.validation.validationMessage = "My custom message"; is generally passed-through like ad HTML attribute onto the corresponding INPUT dom element and it is very usefull when you need a custom validation message avoiding to deal with direct DOM manipulation
No document in your online KB mentions this behaviour associated to the Model.define() instead a KB page could be find related to the Validator https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#application-of-custom-message-attributes , I think could save time to developers know that it is possibile and should be documented

Proofs in your code :

The CreateAttributes assembles object which contains the name:value pair from model field validation :

function createAttributes(options) {

var

field = (options.model.fields || options.model)[options.field], type = fieldType(field), validation = field ? field.validation : {}, ruleName, DATATYPE = kendo.attr(

'type'), BINDING = kendo.attr('bind'), rule, attr = {

name: options.field,

title: options.title

};

for (ruleName in validation) {

// ruleName can contains a custom string that is not a validation rule

// and rule will contain its value, for example validationMessage='MyMessage ....'

rule = validation[ruleName];

if (inArray(ruleName, specialRules) >= 0) {

attr[DATATYPE] = ruleName;

} else if (!isFunction(rule)) {

attr[ruleName] = isPlainObject(rule) ? rule.value || ruleName : rule;

}

attr[kendo.attr(ruleName + '-msg')] = rule.message;

}

if (inArray(type, specialRules) >= 0) {

attr[DATATYPE] = type;

}

attr[BINDING] = (type === 'boolean' ? 'checked:' : 'value:') + options.field;

return attr;

}

The editor choosed by the kendo.ui.Editable sets DOM attributes via attr() and the previously assembled object

var editors = {

'number': function (container, options) {

var attr = createAttributes(options);

$('<input type="text"/>').attr(attr).appendTo(container).kendoNumericTextBox({ format: options.format });

$('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);

},

'date': function (container, options) {

var attr = createAttributes(options), format = options.format;

if (format) {

format = kendo._extractFormat(format);

}

attr[kendo.attr('format')] = format;

$('<input type="text"/>').attr(attr).appendTo(container).kendoDatePicker({ format: options.format });

$('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);

},

'string': function (container, options) {

var attr = createAttributes(options);

$('<input type="text" class="k-input k-textbox"/>').attr(attr).appendTo(container);

},

'boolean': function (container, options) {

var attr = createAttributes(options);

$('<input type="checkbox" />').attr(attr).appendTo(container);

},

'values': function (container, options) {

var attr = createAttributes(options);

var items = kendo.stringify(convertItems(options.values));

$('<select ' + kendo.attr('text-field') + '="text"' + kendo.attr('value-field') + '="value"' + kendo.attr('source') + '=\'' + (items ? items.replace(/\'/g, ''') : items) + '\'' + kendo.attr('role') + '="dropdownlist"/>').attr(attr).appendTo(container);

$('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);

}

};

The validator looks the ruleKey validationMessage directly on DOM element of a INPUT tag

var Validator = Widget.extend({

// ...

_extractMessage: function (input, ruleKey) {

var that = this, customMessage = that.options.messages[ruleKey], fieldName = input.attr(NAME), nonDefaultMessage;

if (!kendo.ui.Validator.prototype.options.messages[ruleKey]) {

nonDefaultMessage = kendo.isFunction(customMessage) ? customMessage(input) : customMessage;

}

customMessage = kendo.isFunction(customMessage) ? customMessage(input) : customMessage;

return kendo.format(input.attr(kendo.attr(ruleKey + '-msg')) || input.attr('validationMessage') || nonDefaultMessage || input.attr('title') || customMessage || '', fieldName, input.attr(ruleKey) || input.attr(kendo.attr(ruleKey)));

}

// ...

})

With this technique you can customize one validation message for a model field

Validation

answered on 20 Mar 2018

3 answers

105 views

Calculated Cell not rendering new value

I have a cell that is not editable, it displays a value from the datasource. While editing the row and changing other cells, a new value is calculated. The datasource reflects the new value but the cell does not render it.

    export function init(columns: any) {
        var ds = new nkfDataSources.FilterByJobQuickEntryDistribution();
        ds.group = { field: "PropertyName" };
        grid = $("#jobQuickEntryDistributionGrid").kendoGrid({
            columns: columns,
            groupable: false,
            pageable: true,
            sortable: true,
            filterable: true,
            toolbar: kendo.template($("#grid_jobQuickEntryDistribution_toolbar").html()),
            dataSource: ds.get(onGridparameterMap),
            editable: true,
            edit: function (e) {
                e.model.unbind("change", model_change).bind("change", model_change);
            }
        }).data("kendoGrid");
    }

function model_change(e) {

var model = this;

       model.NetFee = nkfCommon.Calculate.netFee(
            model.GrossFee,
            nkfCommon.Calculate.departmentOffset(model.GrossFee, model.DepartmentOffset),
            nkfCommon.Calculate.expenses(model.ClientReimbursedExpenses, model.NonClientReimbursedExpenses, model.DirectBilledExpenses));

}

Grid

answered on 20 Mar 2018

2 answers

381 views

Actions to change View: how to render as dropdown

Hi,

how can we render the Buttons to select another view (Daily, Weekly, Monthly, etc in the Header-Area of the Scheduler) as dropdown? Is there a template for that purpose so we would be able to render customized markup?

Thanks and regards
Hans

Scheduler

answered on 20 Mar 2018

4 answers

873 views

Hide vertical scrollbar in widgets

Hello

I wanted to hide the vertical scrollbar in several widgets but still allowing the scrolling functionality. This doesn't seem to be an easy task since browser providers do not support officially.

Im looking now for a solution for the following widgets:
- kendoDropDownList
- kendoDialog

I have checked the forums here so far but could only find a proper solution for the window widget (which I couldn't make working for the mentioned widgets above). In between I've checked Stackoverlow and found an easy solution: Hide scrollbar
It works great for all standard HTML windows/tags I'm using in my project but I don't know how to apply this (or a similar) solution to the mentioned KendoUI widgets? Is there any solution?

Regards

DropDownList

answered on 20 Mar 2018