Reusing Kendo UI settings to make your app's UI patterns consistent

Kendo UI components have LOTS of settings and options. For most web apps, you'll pick a set of options and stick with common UI patterns throughout the app.

Will your app's grids use paging or infinite scrolling of grid data? If paging, how many records should you show on each page? Which UI style should your app's date pickers use? What format should your app's numeric text boxes use by default - whole number or decimal?

One technique for sharing common settings across all Kendo UI components within your app is to set up your defaults and wrap with the jQuery extend function.

Here is a date picker:

import $ from "jquery";
import "@progress/kendo-ui/js/kendo.datepicker";

export function extend(settings) {
    const commonSettings = {
        componentType: "modern"
    };

    return $.extend(true, {}, commonSettings, settings);
}

Here is a drop down list where the server returns a text and a value field to populate the drop down:

import $ from "jquery";
import "@progress/kendo-ui/js/kendo.dropdownlist";

export function extend(settings) {
    const commonSettings = {
        dataSource: {
            sort: [{ field: "text" }] // Sort by the field called "text" every time
        },
        dataTextField: "text", // Assume the text field is always called "text"
        dataValueField: "value",  // Assume the value field is always called "value"
        optionLabel: "- Please Select -",
        autoBind: false, // Don't bind the drop down on initialization
        valuePrimitive: true // Use primitives for values, like 123, not objects, like { value: 123, text: "Active" }
    };

    return $.extend(true, {}, commonSettings, settings);
}

Here is a numeric text box for positive whole numbers:

import $ from "jquery";
import "@progress/kendo-ui/js/kendo.numerictextbox";

export function extend(settings) {
    const commonSettings = {
        min: 0,
        step: 1,
        decimals: 0,
        round: true,
        format: "{0:0}"
    };

    return $.extend(true, {}, commonSettings, settings);
}

Use these default app settings by importing the module, referencing the extend method exported by that module, then using, adding to, or overriding the UI defaults needed for that date picker, drop down list, or numeric text box:

import * as datePicker from 'common/datePicker';
import * as dropDownList from 'common/dropDownList';
import * as numericTextBox from 'common/numericTextBox';

$("#myDatePicker").kendoDatePicker(datePicker.extend({})); // No change to default values
$("#myDropDown").kendoDropDownList(dropDownList.extend({
    dataSource: "/api/myDropDown" // Add to, rather than change, default values
}));
$("#myNumericTextBox").kendoNumericTextBox(numericTextBox.extend({
    min: -100 // Override default values
}));

This is a good way to have a consistent UI without always copy-pasting key-value pairs across files.

It also allows you to quickly change how your app looks and works across pages and components with a change to the common Kendo UI defaults.