$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read:           { url: "fun.php?action=api" },
        
                create:         { url: "insert.php?action=insert_channel", type: "POST",
                                complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } },
                update:         { url: "update.php?action=upd", type: "POST",
                                complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } },
                destroy:        { url: "destroy.php?action=del_channel",type: "POST",
                                complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } }
            },

            schema: {
                data:"data",
                model: {
                    id:"id",
                    fields: {
                        nr:                             { type:"string", editable:false },
                        name:                           { type:"string" , validation : { required : true }},
                        pic:                            { type:"string", editable:false, validation : { required : true } },
                        link:                           { type:"string", validation : { required : true } },
                        group:                          { type:"int", validation : { required : true } },
                        lang:                           { type:"int", validation : { required : true } },
                        status:                         { type:"int", validation : { required : true } },
                        up:                             { type:"string" }
                    }
                }
            },
            pageSize: 10
        },
        height:750,
        scrollable: true,
        sortable: true,
        pageable: true,
        groupable: {
            messages: {
                empty: "Drag any column name here to group your channels"
            }
        },
        editable: {
            mode: "popup",
            update: true,
            destroy: true,
            confirmation: "Are you sure you want to remove this Channel?" //text for the confirmation message
        },
        columns: [
            {
                template: "<center><div class='#: data.class #'>#: nr #</div></center>",
                field: "nr",
                title: "Nr",
                width: 50
            },
            {
                template: "<img width='64' height='64' style='vertical-align:middle; border-radius: 15%;' src='pics/#: data.pic #' alt=''>&nbsp<span class='#: data.class #'>#: data.pic # </span>",
                field: "pic",
                title: "pic"
            },
            {
                template: "<div class='#: data.class #'>#: name #</div>",
                field: "name",
                title: "name",
                width: 100
            },
            {
                template: "<div class='#: data.class #'>#: link #",
                field: "link",
                title:"link",
                width:650
            },
            {
                template: "<div class='#: data.class #'>#: group #</div>",
                field: "group",
                title:"group",
                editor:groupEditor
            },
            {
                template: "<div class='#: data.class #'>#: lang #</div>",
                field: "lang",
                title: "lang",
                editor:langEditor
            },
            {
                template: "<div class='#: data.class #'>#: status #</div>",
                field: "status",
                title: "status",
                editor:statusEditor
                //template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
            },
            // adding command in the columns, name - the command name, text - text to be set on the button
            { command: [
                {
                    name: "edit",
                    text: { // sets the text of the "Edit", "Update" and "Cancel" buttons
                        edit: "",
                        update: "Update",
                        cancel: "Cancel"
                    }
                }, 
                { name: "destroy", text: "" } // sets the text of the "Delete" button
            ],
            // sets the title and the width of the commands column
            title: "Action", 
            width: "300px"
        }
        ],
        toolbar: [
            //name - name of the available commands, text - text to be set on the button
            { name: "create", text: "New" },
            { name: "save", text: "Save" },
            { name: "cancel", text: "Cancel" },
            { name: "excel", text: "Export to Excel" }
        ],
        // filter menu settings
        filterable: {
            name: "FilterMenu",
            extra: true, // turns on/off the second filter option
            messages: {
                info: "Custom header text:", // sets the text on top of the filter menu
                filter: "CustomFilter", // sets the text for the "Filter" button
                clear: "CustomClear", // sets the text for the "Clear" button
                
                // when filtering boolean numbers
                isTrue: "custom is true", // sets the text for "isTrue" radio button
                isFalse: "custom is false", // sets the text for "isFalse" radio button
                
                //changes the text of the "And" and "Or" of the filter menu
                and: "CustomAnd",
                or: "CustomOr"
            },
            operators: {
                //filter menu for "string" type columns
                string: {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    startswith: "Custom Starts with",
                    contains: "Custom Contains",
                    endswith: "Custom Ends with"
                },
                //filter menu for "number" type columns
                number: {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    gte: "Custom Is greater than or equal to",
                    gt: "Custom Is greater than",
                    lte: "Custom Is less than or equal to",
                    lt: "Custom Is less than"
                },
                //filter menu for "date" type columns
                date: {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    gte: "Custom Is after or equal to",
                    gt: "Custom Is after",
                    lte: "Custom Is before or equal to",
                    lt: "Custom Is before"
                }
            }
        }
    });

/* ***********************group**************************** */
function groupEditor(container, options) {
$('<input name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        optionLabel: "Group...",
        dataTextField: "group",
        dataValueField: "id",  

        dataSource: {
            transport: {
            read:           { url: "fun.php?action=cat_channels" }
        },
        schema: {
           data: "data",
           model: { id: "id",
                    fields: {group:         {editable: false } }
            }
        },

    },
});
}
/* ***********************language**************************** */
function langEditor(container, options) {
$('<input name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        optionLabel: "Language...",
        dataTextField: "lang",
        dataValueField: "id",  

        dataSource: {
            transport: {
            read:           { url: "fun.php?action=lang_channels" }
        },
        schema: {
           data: "data",
           model: { id: "id",
                    fields: {lang:         {editable: false } }
            }
        },

    },
});
}
/* ***********************status**************************** */
function statusEditor(container, options) {
$('<input name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        optionLabel: "Status...",
        dataTextField: "state",
        dataValueField: "id",  

        dataSource: {
            transport: {
            read:           { url: "fun.php?action=state_channels" }
        },
        schema: {
           data: "data",
           model: { id: "id",
                    fields: {state:         {editable: false } }
            }
        },

    },
});
}



});

<?php
include 'config.php';

/* **************************************insert channels*************************** */
function insert_channel() {
    global $conn;
    if(isset($_POST['submit']))
  {
    $name       =htmlspecialchars($_POST['name'] ?? '');                               
    $pic        =htmlspecialchars($_POST['pic'] ?? '');                   
    $link       =htmlspecialchars($_POST['link'] ?? '');                                           
    $group      =htmlspecialchars($_POST['group'] ?? '');                 
    $lang       =htmlspecialchars($_POST['lang'] ?? '');  
    $status     =htmlspecialchars($_POST['status'] ?? '');               

    $sql="INSERT INTO channels (
                                name,
                                pic,
                                link,
                                cat_id,
                                language_id,
                                status
                                )
                                VALUES 
                                (
                                '$name',
                                '$pic',
                                '$link',
                                '$group',
                                '$lang',
                                '$status'
                                )";
    $query=mysqli_query($conn, $sql);

    if ($sql) {
      echo json_encode($sql);
    }
    else {
      header("HTTP/1.1 500 Internal Server Error");
    }

}

}




/* -------------------------------switch($_GET['action'])| page.php?action=x ------------------------------------------- */    
switch($_GET['action'])
{
    case 'insert_channel': insert_channel();
    break;

    default :
    echo 'Please check the parameters';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vat Grid</title>
    <link rel="stylesheet" href="styles/kendo.common.min.css">
    <link rel="stylesheet" href="styles/kendo.default.min.css">
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    
        <div id="grid"></div>
    

    <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
        </div>
        <br/>
        <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
    </script>

    <script>
        $(document).ready(function(){
            var dataSource = new kendo.data.DataSource({
                data: categories
            });

            var gridDataSource = new kendo.data.DataSource({
                data : [ {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "Some Comment",
                    "Confirmed": 1,
                    "Stat": 1
                }]
            });

            $("#grid").kendoGrid({
                dataSource: gridDataSource,
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                        field: "Stat",
                        title: "Status"
                    }, {
                        field: "Confirmed",
                        title: "Confirmed",
                        template: " <input name='Confirmed' class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/>"
                    }, {
                        field: "Commen",
                        title: "Comment",
                        editor: commentCategoryEditor,
                        template:  "#=Commen#",                      
                        //template: "<input id='Commen'>",
                        width: 450,
                        nullable : true
                    }]
            }); 

        });

        var categories = [{
            "CategoryName": "-"
        },{
            "CategoryName": "Category 1"
        }, {
            "CategoryName": "Category 2"
        }];

        function commentCategoryEditor(container, options){
        $('<input name="Commen">')
                .kendoDropDownList({
                    filter: "startswith",
                    dataTextField: "CategoryName",
                    dataValueField: "CategoryID",
                    dataSource: dataSource,
                    noDataTemplate: $("#noDataTemplate").html()
            });
        }

        function addNew(widgetId, value) {
            var widget = $("#" + widgetId).getKendoDropDownList();
            var dataSource = widget.dataSource;

            if (confirm("Are you sure?")) {
                dataSource.add({
                    CategoryID: 0,
                    CategoryName: value
                });
                dataSource.one("sync", function() {
                    widget.select(dataSource.view().length - 1);
                });
                dataSource.sync();
            }
        };
            
                
            

    </script>
</div>


    

</body>
</html>