Kendo - tips and tricks

Set read only on grid

// sets the Read Write access in a Kendo grid when called
// SetTableAccess(e.sender.table, $("#accessSpan").html().trim());
function SetTableAccess(table, readWrite) {
    if (readWrite == "Read") {
        $(table).find(".k-grid-edit").parent().each(function () {
            $(this).css("text-align", "center");
            $(this).find(".k-grid-edit").css("display", "none");
            $(this).find(".k-grid-delete").css("display", "none");
            $(this).append("<div title='Read only' class='readOnly' >&nbsp;</div>");
        });
    }
}

Grid

To show checkboxes for a separate column of data

template:'<input type="checkbox" disabled #= data.SystemGenerated? checked="checked" : "" #>'

Format numbers

currency

format: "{0,0c}",

Turn off a Numeric input on edit

 edit: function(e) {
    if (!e.model.isNew()) {
      // Disable the editor of the "id" column when editing data items
      var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
      numeric.enable(false);
    }
  }

When add / edit and you don't want a number widget

function EspritIDEditor(container, options) {
 
        $('<input style="width:75px" data-bind="value:' + options.field + '"/>').appendTo(container);
 
    }

using editor and template for a field

  sortable: true,
        batch: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 2
        },
        selectable: "row",
        width: "400px",
        editable: "inline",
        //editable: "incell",
        columns: [
            {
                field: "MfrCategoryTypeMastID",
                hidden: true
            }, {
                field: "VendorGroupID",
                width: 100,
                editable: false
            }, {
                field: "AutoGenerate",
                editor: YesNoEditor,
                defaultValue: "1",
                template: "#= YNXlate(data.AutoGenerate) #",
                width: 90
            }, {
                field: "IntrinsicID",
                format: "{0:#.##}",
                title : "HierarchyID",
                editable: true,
                width: 90
            }, {
                field: "Status",
                editor: StatusDropDownEditor,
                template: "#= StatusDetails(data.Status) #",
                // StatusDropDownEditor is in uimain
                width: 80
 
 
            }, {
                field: "Levels",
                format: "{0:#.##}",
                width: 65
            }, {
                field: "Name",
                width: 250
 
            }, {
                field: "Description",
                title: "Description"
 
 
            }, {
                field: "UpdateBy",
                title: "UpdateBy",
                width: 100,
                editable: false
            }, {
 
                field: "UpdateDate",
                title: "UpdateDate",
                format: "{0:MM/dd/yy}",
                width: 100,
                editable: false
            },
        { command: ["edit", "destroy"], title: " ", width: "60px" }]
 

Then the functions and editors to support

Drop down editor

function StatusDropDownEditor(container, options) {
    $('<input required data-text-field="Name" data-value-field="Code" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            dataSource: {
                type: "json",
                transport: {
                    read: "/GetLookup/30"
                }
            }
        });
 
}

Simple drop down with no remote call

function YesNoEditor(container, options) {
    var data = [
        { Name: "No", Code: "0" },
        { Name: "Yes", Code: "1" }
    ];
 
    $('<input required data-text-field="Name" data-value-field="Code" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            dataSource: data
        });
 
}

Function to support 'translating' data in a grid

// for uie in categories and mfr categories etc.
function StatusDetails(data) {
 
    var retval = ""
    if (data.Status == 0 || data.Status == "0" || data.CategoryStatus == 0 || data.CategoryStatus == "0") {
        retval = "I";
    }
    else if (data.Status == 1 || data.Status == "1" || data.CategoryStatus == 1 || data.CategoryStatus == "1") {
        retval = "A";
    }
    else {
        retval = "P";
    }
    return retval;
}

Combined translate and dropdown

function TrueFalseEditor(container, options) {
    var data = [
        { Name: "False", Code: "0" },
        { Name: "True", Code: "1" }
 
    ];
 
    $('<input required data-text-field="Name" data-value-field="Code" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            dataSource: data
        });
}
 
 
function TFXlate(dataIn) {
 
    if (dataIn == 0) {
        return "False";
    }
    else {
        return "True"
    }
}
 

code

code