kendo-ui grid column template function field-name

Question

I would like find out, what is the field name in a template function like:

{ 
field: "country", 
template: function(e){
               var tmp  = "";
               var guid     = kendo.guid();
               $.each( e.country, function( key, value ) {
                  tmp += '<span class="xyz">' + value.text + '</span>';
               });
               return tmp;
          }, 
}

Sample: Associative array in grid cell

I don't have the field name "country" in the template: function(e). There are only the field data in the function from template. Is there a method, like kendo.guid(), that I have the field name "country" for sample in the function.

Shai · Accepted Answer · 2018-01-14T15:28:01.237

See if this answers your needs:

{
    field: "country",
    title: "Country",
    template: function(e, field = "country") {
        console.log("Field name:", field);
        console.log(e[field]);
        return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
    },
}

You can see an example of how this can be used in the snippet.

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    

</head>
<body>

<div id="example">
    <div id="grid"></div>
      <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            No data found. Do you want to add new item - '#: instance.input.val() #' ?
        </div>
        <br />
        <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
    </script>
    <script>
        function getTemplate(e, fieldName) {
            if (fieldName === "country") {
               return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
            } else {
                return e[fieldName];
            }
        }
      
        $(document).ready(function () {
           var data = [
                      {
                        'id':'wpErpOs_1', 
                       'name': 'Rolf', 
                       'country': [{ 'text':'Schweiz','id':'1'}], 
                       'flag':false
                      }, {
                        'id':'wpErpOs_2', 
                       'name': 'Hans', 
                       'country': [
                                    { 'text':'Deutschland','id':'2'},
                                    { 'text':'Schweiz','id':'1'},
                               { 'text':'Österreich','id':'3'}
                                   ], 
                       'flag':false
                      }, {
                        'id':'wpErpOs_3', 
                       'name': 'Esther', 
                       'country': [{ 'text':'Schweiz','id':'1'}], 
                       'flag':false
                      }, {
                        'id':'wpErpOs_4', 
                       'name': 'Daniela', 
                       'country': [{ 'text':'Österreich','id':'3'}], 
                       'flag':false
                      }
                    ];
          
           var dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  function(e){
                                   e.success(data); 
                                },
                                update:function(e){
                                   e.success(); 
                                },
                                destroy: function(e){
                                   e.success(); 
                                },
                                create: function(e){
                                   e.success(); 
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "id",
                                    fields: {
                                        id: { editable: false, nullable: true },
                                        name: { validation: { required: true } },
                                        country: { type: "object" },
                                        flag: { type: "boolean" }
                                    }
                                }
                            }
                        });

          
            $("#grid").kendoGrid({
                dataSource: dataSource,
               toolbar: ["create"],
                columns: [
                  {
                    field: "name",
                    title: "Name",
                    template: function(e) {return getTemplate(e, "name");}
                }, {
                    field: "country",
                    title: "Country",
                   template: function(e) {return getTemplate(e, "country");}
                }, {
                    field: "flag",
                    title: "Flag",
                   editor: wpErpOs_GridBoolean,
                   template: function(e) {return getTemplate(e, "flag");}
                },
               ],
               editable: "popup",
            });
        });


      
      function wpErpOs_GridBoolean(container, options){
        var guid = kendo.guid();
        $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
        $('<label class="k-checkbox-label" for="' + guid + '">&#8203;</label>').appendTo(container);
      };
    </script>
</div>
</body>
</html>

Thank you so very much, ist a perfect solution for me. I search to days without any solution. — Severin, Jan 14 '18 at 15:27

score 2 · Answer 2 · edited Aug 16 '21 at 20:00

Since column is javascript object, could use a getter to build the template. This allows you to get values of other properties in object (e.g. field). (Self-references in object literals / initializers)

{
  field: "country",
  title: "Country",
  get template() {
      var fieldName = this.field;
      return function(e) {
        var tmp = "";
        var guid = kendo.guid();
        $.each(e[fieldName], function(key, value) {
            tmp += '<span class="k-button" style="line-height:1.25em; cursor:default;">' + value.text + '</span>';
        });
        return tmp;
      }
  },
}

Since my formatting needs were simpler I just created a string template.

{
    field: "Date",
    get template() {
        return "# if (" + this.field + ") { # #= kendo.toString(kendo.parseDate(" + this.field + ",'yyyy-MM-dd'), 'MM/dd/yyyy') # # } #"
    }
}

Thank you John for this nice solution – Severin Jan 27 '21 at 18:54 — Severin, Jan 27 '21 at 18:54

kendo-ui grid column template function field-name

2 Answers2