How to edit two field in one column and display them like one field in kendo grid?

Question

I have a data source with two field like Year and Month, and I have to combine them together to display just like one field in one column, and each field will have their own dropdownlist separately when edit button is clicked.

for example, I have data like { Year: "2019", Month: "08" } and them should be displayed like 201908 or 2019/08 in one column

all I know is to use column template like:

template: "<span>#= Year ##= Month #</span>"

or

template: "<span>#= Year #</span><span>#= Month #</span>"

but it seems like I can't edit two or more field in one column, all the examples I can find are just edit one field in one column.

Is there any solusion?

<div id="TargetDiv">
    <table id="Grid" data-bind="source: dataSource" class="gridtable"></table>
</div>

This is for Kendo-grid with HTML5, TypeScript and MVVM framwork.

I have define the grid table in cshtml

<div id="TargetDiv">
    <table id="Grid" data-bind="source: dataSource" class="gridtable"></table>
</div>

and removed noises on my code in order to make it easier to read. Year and Month are contained in different HTML tags, I tried to use edit-template in "edit" but it seems doesn't work for me.

Source setting like:

let vm = {
    dataSource: new kendo.data.DataSource({
        data: [
            { SN: 1, Year: "2019", Month: "01", Title: "Project1" },
            { SN: 2, Year: "2020", Month: "04", Title: "Project2" },
            { SN: 3, Year: "2020", Month: "09", Title: "Project3" }
        ],
        schema: {
            model: {
                id: 'SN',
                fields: {
                    SN: {
                        type: 'number',
                        editable: false,
                        nullable: false
                    }
                    , 'Year': { type: 'string' }
                    , 'Month': { type: 'string' }
                    , 'Content': { type: 'string' }
                }
            }
        }
    }),
}

Grid setting like:

$('#Grid').kendoGrid({
    columns: [
        "SN",
        {
            title: "YearMonth",
            template: "<span>#= Year #</span><span>#= Month #</span>"
        },
        {
            command: {
                name: 'edit',
                text: { edit: "", update: "", cancel: "" }
            },
            title: "edit"
        }
    ],
    editable: {
        mode: "inline"
    },
    edit: function (e) {

    }
});

kendo.bind('#TargetDiv', vm);

Answer 1

Here is a simple dojo for you that should allow you to bind a custom inline editor.

https://dojo.telerik.com/uficAxOz/6

All I did was bind the field you wanted to edit to one of the values. Ultimately it doesn't matter what field we bind it to, it just needs one to know it should be bound and then we apply a custom editor function that is then appended to the cell. In order to make the editing of the editor easier i have extracted this out into a template for you and then got the function to append this html to the container object.

so your field would look something like this:

 {
            title: "YearMonth",
            field:"Year", 
            template: "<span>#= Year #</span><span>#= Month #</span>" ,
            editor: customEditor

        }

then the editor function is like this:

 function customEditor(container, options) {
   var template = $('#editorTemplate').html();
   $(template).appendTo(container);
 }

and the template is like this:

     <script id="editorTemplate" type="text/x-kendo-template"> 
       <div> <select data-role="dropdownlist" name="Year">
    <option>2010</option>
    <option>2011</option>
    <option>2012</option>
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
    <option>2019</option>
    <option>2020</option>
    <option>2021</option>
    <option>2022</option>
    <option>2023</option>
    <option>2024</option>


  </select> <select data-role="dropdownlist" name="Month">
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>



  </select> </div>

      </script>

All I have done is made sure that the name of the controls matches the property field for the model properties you have provided in your datasource.