Questions on Kendo UI for jQuery Forum

4 answers

356 views

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

272 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

87 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

338 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

808 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

11 answers

1.1K+ views

Unable to download pdf in iphone and ipad

Hi,

I am using Kendo UI v2016.2.714. We have an issue in downloading the pdf in iphone and ipad. It is working perfectly in all other systems.

The method we are using to generate pdf is as below.

Have any one of you faced similar issue? Please help us to fix this.

Thanks,

Anusha

General Discussions

answered on 19 Mar 2018

3 answers

884 views

Edit Cells on Double-Click in Grid

I have found the expected behavior in the following link

https://docs.telerik.com/kendo-ui/knowledge-base/grid-edit-cell-on-double-click

here the issue is , when i do changes in on cell (cell-1) and double click on the another cell (cell-2 may be another row) , the changes are not retaining in edited cell (cell-1). Could you please suggest the method or event to call to retain the changes.

Grid