Datepicker in grid not working

[Tony]

Hi,

I've got a set of editable grids on a page. One contains a date field (mysql) that is editable. When the grid runs a datepicker is shown in the popup editor for that field, dates can be selected and the grid is updated with the new date selected. However, the update on the database doesn't work. All of the other editable fields work fine, just the datepicker is failing.

I have attached a screenshot of the Firebug post info showing that the BillDate is posting as BillDate  Wed Jan 30 2013 00:00:00 GMT-0500 (Eastern Standard Time). Based on the docs I have the BillDate field set to format: "{0:yyyy-MM-dd}" and assumed this formatting would be submitted in the post. It's not and that appears to be the problem.

So, can you tell me how to get the datepicker to submit the date selected in Y-m-d format?

I'm using PHP/MYSQL and have a the very simple update script for the grid with the datepicker:

<?php include('dbcon.php'); ?>
<?php
$id = mysql_real_escape_string($_POST["contractID"]);
$billable = mysql_real_escape_string($_POST["Billable"]);
$billed = mysql_real_escape_string($_POST["Billed"]);
$billdate = mysql_real_escape_string($_POST["BillDate"]);


$rs = mysql_query("UPDATE contracts SET Final = '" .$billable. "', billed = '".$billed."', billed_date = '" .$billdate. "' WHERE contractID = '" .$id."'");
    if ($rs) {
    header("Content-type: application/json");
    echo json_encode($rs);
    }
    else {
    header("HTTP/1.1 500 Internal Server Error");
    echo "Failed on update: " .$billable;
    }
?>

I have also tried converting the date submitted with $billdate = date('Y-m-d', strtotime("".$_POST["BillDate"]."")); and that doesn't work either.

Here is the grid code:

   
    var billableDataSource = new kendo.data.DataSource({
                       transport: {
                        read: "data/billable-options.php"
                        }
                });
    var billedDataSource = new kendo.data.DataSource({
                       transport: {
                        read: "data/billed-options.php"
                        }
                });
    
     function typeDropDownEditor(container, options) {
                    $('<input data-text-field="label" data-value-field="item" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billableDataSource
                        });
                }
    function billedDropDownEditor(container, options) {
                    $('<input data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billedDataSource
                        });
                }
   $("#past").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "data/unbilled-fetch.php?start=<?php echo $_GET['start']; ?>",
                                update: {url:"data/unbilled-update.php", type:"POST"}
                                                                
                            },
                            schema: {
                                model: {
                                   id: "contractID",
                                    fields: {
                                        contractID: { type: "number", editable: false, nullabe: false },
                                        Artist: { type: "string", editable: false},
                                        PlayDate: { type: "date", editable: false},
                                        Venue: { type: "string", editable: false},
                                        Fee: {type: "number", editable: false},
                                        Overage: {type: "number", editable: false},
                                        Actual: {type: "number", editable: false},
                                        Deposits: {type: "number", editable: false},
                                        Commission: {type: "number", editable: false},
                                        MgmtComm: {type: "number", editable: false},
                                        Net: {type: "number", editable: false},
                                        Billable: {type: "string", editable: true},
                                        BillableText: {type: "string"}
                                                    
                                     }
                                }
                            },
                            batch: false,
                        pageSize: 10
                        },
                        sortable: true,
                        groupable: true,
                        resizable: true,
                        scrollable: {
                             virtual: true //false
                             },
                        pageable: {
                            refresh : true
                            },
                        toolbar: ["save", "cancel"],
                        columns: [
                        { field:"contractID", title: "ID", width: "50px" },
                        { field:"Artist", title: "Artist", width: "100px" },
                        { field:"PlayDate", title: "Date", width: "75px", format: "{0:MM/dd/yyyy}" },
                        { field:"Venue", title: "Venue", width: "150px" },
                        { field:"Fee", title: "Fee", width: "60px" },
                        { field:"Overage", title: "Overage", width: "60px" },
                        { field:"Actual", title: "Actual", width: "60px" },
                        { field:"Deposits", title: "Deposits", width: "75px" },
                        { field:"Commission", title: "Commission", width: "75px" },
                        { field:"MgmtComm", title: "MgmtComm", width: "70px" },
                        { field:"Net", title: "Net", width: "60px" },
                        { field:"Billable", title: "Billable",  width: "160px", editor: function (container, options) {
                    $('<input data-text-field="label" data-value-field="item" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billableDataSource
                        });
                }},
                        ],
                        editable: true
                    });
                    
                    
                    
                // current billing cycle data based on the search criterea    
                $("#billable").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "data/billing-cycle-fetch.php?start=<?php echo $_GET['start']; ?>&end=<?php echo $_GET['end']; ?>",
                                update: {url:"data/billing-cycle-update.php", type:"POST"}
                                                                
                            },
                           schema: {
                                model: {
                                   id: "contractID",
                                    fields: {
                                        contractID: { type: "number", editable: false, nullabe: false },
                                        PlayDate: { type: "date", editable: false},
                                        Artist: { type: "string", editable: false},
                                        Venue: { type: "string", editable: false},
                                        Fee: {type: "number", editable: false},
                                        Overage: {type: "number", editable: false},
                                        Actual: {type: "number", editable: false},
                                        Deposits: {type: "number", editable: false},
                                        Commission: {type: "number", editable: false},
                                        MgmtComm: {type: "number", editable: false},
                                        Net: {type: "number", editable: false},
                                        Billable: {type: "string", editable: true},
                                        Billed: {type: "number", editable: true},
                                        BillDate: {type: "date", editable: true},
                                        Label: {type: "string"}
                                                    
                                     }
                                }
                            },
                            parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                },
                            batch: false,
                        pageSize: 20
                        },
                        sortable: true,
                        resizable: true,
                        filterable: true,
                        columnMenu: true,
                        groupable: true,
                        pageable: {
                            refresh : true,
                            pageSizes: [10,20,50,100],
                            },
                        /* toolbar: ["save", "cancel"], */
                        columns: [
                        { field:"contractID", title: "ID", width: "75px" },
                        { field:"PlayDate", title: "Date", width: "75px", format: "{0:MM/dd/yyyy}" },
                        { field:"Artist", title: "Artist", width: "100px" },
                        { field:"Venue", title: "Venue", width: "150px" },
                        { field:"Fee", title: "Fee", width: "75px" },
                        { field:"Overage", title: "Overage", width: "75px" },
                        { field:"Actual", title: "Actual", width: "75px" },
                        { field:"Deposits", title: "Deposits", width: "75px" },
                        { field:"Commission", title: "Commission", width: "75px" },
                        { field:"MgmtComm", title: "MgmtComm", width: "75px" },
                        { field:"Net", title: "Net", width: "75px" },
                        { field:"Billable", title: "Billable",  width: "125px", editor: function (container, options) {
                    $('<input data-text-field="label" data-value-field="item" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billableDataSource
                        });
                }},
                        { field:"Billed", title: "Billed", width: "75px", editor: function (container, options) {
                    $('<input data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billedDataSource
                        });
                }},
                        { field:"BillDate", title: "Bill Date", width: "100px", format: "{0:yyyy-MM-dd}" },
                        
                         { command: ["edit"], title: "&nbsp;", width: "210px" }],
                        editable: "popup"
                    });   
 
Thanks in advance,
Tony 

[Petur Subev]

Hello Tony,

You can use the parameterMap function to re-map how the values are send to the server.

Regards,
Petur Subev
the Telerik team