kendo-grid-editors

    1.1.2 • Public • Published

    kendo-grid-editors

    Additional grid editors for kendo-ui library.

    Demo

    A demo is available on the Github Pages webpage for kendo-grid-editors here.

    Basic Usage

    // create grid
    var grid = $grid.kendoGrid({
                dataSource: dataSource,
                columns: [{               //column settings
                    field: "type",
                    title: "Type",
                    editor: function(container, options) {      // create custom editors
                        // setup required options
                        options.text = 'text';
                        options.value = 'value';
                        //  some data
                        var list = [{
                            value: 0,
                            text: "Jarry"
                        }, {
                            value: 1,
                            text: "Mike"
                        }, {
                            value: 2,
                            text: "Jane"
                        }];
                        KendoGridEditors.dropDownEditor(container, options, list);   // use specific editor
                    },
                    template: function(dataItem) {    // how to dispay in grid cell
                      options = {};
                      options.field = field;
                      return KendoGridEditors.dropdownTemplate(dataItem, options); // use specific value template
                    },
                    width: 90
                },
                ... // setup other columns

    Editors

    stringEditor

    template is not required

    columns:[{
    ...
     editor: KendoGridEditors.stringEditor
    ...
    }]

    numericEditor

    template is not required

    columns:[{
    ...
     editor: function(container, options) {
                    options.format = "n";
                    options.decimals = 20;
                    KendoGridEditors.numericEditor(container, options);
                }
    ...
    }]

    dateEditor

    columns:[{
    ...
      template: function(dataItem, field) {
                    options = {};
                    options.field = field;
                    options.format = "dd.MM.yyyy";
                    return KendoGridEditors.dateTemplate(dataItem, options);
                },
      editor: function(container, options) {
                    options.format = "dd.MM.yyyy";
                    KendoGridEditors.dateEditor(container, options);
                }
    ...
    }]

    timeEditor

    columns:[{
    ...
     template: function(dataItem, field) {
                    options = {};
                    options.field = field;
                    options.format = "HH:mm";
                    return KendoGridEditors.timeTemplate(dataItem, options);
                },
      editor: function(container, options) {
                    options.format = "{0:HH:mm}";
                    KendoGridEditors.timeEditor(container, options);
                }
    ...
    }]

    memoEditor

    template is not required

    columns:[{
    ...
      editor: function(container, options) {
                    KendoGridEditors.textAreaEditor(container, options);
                }
    ...
    }]

    boolEditor

    columns:[{
    ...
      template: function(dataItem, field) {
                    options = {};
                    options.field = field;
                    return KendoGridEditors.boolTemplate(dataItem, options);
                },
      editor: function(container, options) {
                    KendoGridEditors.boolEditor(container, options);
                }
    ...
    }]

    colorEditor

    columns:[{
    ...
      template: function(dataItem, field) {
                    options = {};
                    options.field = field;
                    return KendoGridEditors.colorTemplate(dataItem, options);
                },
      editor: function(container, options) {
                    KendoGridEditors.colorEditor(container, options, 'basic', 7);
                }
    ...
    }]

    dropdownEditor

    columns:[{
    ...
      template: function(dataItem, field) {
                    options = {};
                    options.field = field;
                    return KendoGridEditors.dropdownTemplate(dataItem, options);
                },
      editor: function(container, options) {
                    options.text = 'text';
                    options.value = 'value';
                    var list = ... //some dataSource
                    KendoGridEditors.dropDownEditor(container, options, list);
    ...
    }]

    dropDownImageEditor

    columns:[{
    ...
      template: function(dataItem, field) {
                    var options = {};
                    options.field = field;
                    options.value = 'value';
                    options.image = 'image';
                    options.text = 'text';
                    return KendoGridEditors.dropdownImageTemplate(dataItem, options);
                },
      editor: function(container, options) {
                    options.text = 'text';
                    options.value = 'value';
                    options.image = 'image';
                    var list = ... //some images dataSource
                    KendoGridEditors.dropDownImageEditor(container, options, list);
                }
    ...
    }]

    multiSelectEditor

    columns:[{
    ...
      template: function(dataItem, field) {
                    options = {};
                    options.field = field;
                    options.text = 'text';
                    return KendoGridEditors.multiSelectTemplate(dataItem, options);
                },
      editor: function(container, options) {
                    options.text = 'text';
                    options.value = 'value';
                    var list = ...// some dataSource
                    KendoGridEditors.multiSelectEditor(container, options, list);
     
                }
    ...
    }]

    License

    This code is provided under the MIT license.

    Install

    npm i kendo-grid-editors

    DownloadsWeekly Downloads

    4

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • northerneyes