Add new record not working when I use more than one template for the grid column

[hary]

Hi,

I am trying to include a dropdownlist in some cells, and a special template for the fields, but that made my ADD-New-Record to stop working in all situations (inline - incell - popup) I tried them all but the button looks like it is not firing when I click it.

So I start searching the whole web to find the problem but could'nt.

endly I figured out that when I keep only one template in my grid then the create button is working fine, but when I have more than one it stops.

 

Another problem I am facing is, the delete and edit functions work perfectly, but when I try to post to the db it looks fine and I can see in dev-tools a response 200/green, but nothing is saved to the db, and after a lot of tries I just found that when I am choosing any from the drop down on the new record it takes the result as an object, but if I edit a not empty cell from the dropdown list it takes it as a number as supposed.

So may can somebody help me to figure it out?

Here is my script.js:

$(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 } }
            }
        },

    },
});
}



});

Here is insert.php

<?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';
}

Thanks in advance

[Neli]

Hello,

There should be no issue in case multiple templates are used in Kendo Grid. I used the provided snippet to test locally, but the popup editor for adding a new record is opened as expected on my end. Here is the Dojo example I used for the tests. Also, a new record can be added without any issue in case the editable mode is changed to 'incell' or 'inline'. Please let me know if I am missing something. Could you please check for any errors in the browser console?

Regarding the issue with the selected value of the DropDownList, note that the DropDownList value is by default the entire selected data item. To make the DropDownList return only the value field entry, set valuePrimitive: true in its options.

I hope this helps.

Regards,
Neli
Progress Telerik