Date and Time Picker examples?

[Mike]

Hi, Do you have any example of Date or Time pickers in an editable grid? I can't find one on the net. Please help

[Mike]

Hi, I tried doing it myself, but the column does not submit itself when creating or editing. Can you please help me with this?


Here's the grid:

$("#grid").kendoGrid({

                       dataSource: dataSource,

                       pageable: true,

                       height: 340,

                       toolbar: ["create"],

                       columns:

                           [{"field":"firstName","title":"First name"},{"field":"nickName","title":"Nick Name","template":"#= kendo.toString(nickName,'MM/dd/yyyy') #"},{"field":"lastName","width":"150px","editor":lastNameEditor},{"command":"destroy","title":" ","width":"110px"}]                            ,

                            

                       editable: true

                   });

               });

Here's the DataSource: 

  var dataSource = new kendo.data.DataSource({

                         

                                parameterMap: function(options, operation) {

         

        //alert(operation);

             return kendo.stringify(options);

                                    if (operation !== "read" && options.models) {

                                        return {models: kendo.stringify(options.models)};

                                    }

                                   

                                    },

                 

                transport: {

                     

         read: {

url: "http://localhost/EditableCrudGrid/gridtest.php?table=gridTest&mode=Read",

dataType: "json",

 type: "POST",

data: {"SQLCMD":"SELECT * FROM gridTest","Table":["firstName","nickName","lastName"],"PrimaryKey":"peopleID"}

},

         update: {

            url: "http://localhost/EditableCrudGrid/gridtest.php?table=gridTest&mode=Update",

            type: "POST"

         },

         destroy: {

             url: "http://localhost/EditableCrudGrid/gridtest.php?table=gridTest&mode=Destroy",

             type: "POST"

          },

          create: {

              url: "http://localhost/EditableCrudGrid/gridtest.php?table=gridTest&mode=Create",

              type: "POST",

               data: {

                req: ["firstName","nickName","lastName"]                }

               

               

           }

         },

                

         // determines if changes will be send to the server individually or as batch

         batch: false,

         //...

 

 

                       pageSize: 30,

                       data: blankData,

                       autoSync: true,

                       schema: {

                           model: {

                             id: "peopleID",

                             fields:

                                {"peopleID":{"editable":false,"nullable":true},"firstName":{"type":"string","validation":{"required":true},"nullable":false,"defaultValue":""},"nickName":{"type":"date","validation":{"required":true},"nullable":false,"parse":function(value) { return kendo.toString(value) }},"lastName":{"type":"string","validation":{"required":true},"nullable":false}}                             }

                           ,  parse: function (data) {

        // alert(data);

            return data;

        }

                       }

                    });

Please, I hope you can help me. Thanks! 

[pawan]

Hello Mike.


we were facing a similar issue and used the following workaround.
Add the "parameterMap" to "transport" and set dataType : "json", type: "POST" .

The model data(alongwith the date) will bind to the model object in the action method of the contoller.
Converting P_DATE to P_DATE.toUTCString(); works.

 var dataSource = new kendo.data.DataSource({
                            transport: {
                                 create: {
                    url: "@Url.Action("CreatePrintDetails", "Home")", //specify the URL which should create new records. This is the Create method of the HomeController.
                    dataType : "json",
                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                },
                read: {
                    url: "@Url.Action("ReadPrintDetails", "Home")"+"?personId="+currentPersonID, //specify the URL which should return the records. This is the Read method of the HomeController.
                    dataType : "json",
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                update: {
                    url:"@Url.Action("CreatePrintDetails", "Home")", //specify the URL which should update the records. This is the Update method of the HomeController.
                    dataType : "json",
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                destroy: {
                    url: "@Url.Action("DeletePrintDetails", "Home")", //specify the URL which should destroy the records. This is the Destroy method of the HomeController.
                    dataType : "json",
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                parameterMap: function(options, operation) {
                   
                    if (operation !== "read") {
                         options.PERSON_ID = currentPersonID;
                         options.P_DATE = options.P_DATE.toUTCString();
                         return options;
                    }
                }
}