Premium forums

Date and Time Picker examples? Cancel

• Mike

  
  17 Jun 2012 (Link to this post)

  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

  
  17 Jun 2012 (Link to this post)

  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

  
  20 Jun 2012 (Link to this post)

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