After select time update method isn't fired

7 posts, 0 answers
  1. Adrian
    Adrian avatar
    13 posts
    Member since:
    Aug 2018

    Posted 12 Sep 2018 Link to this post

    I have a strange issue while working with jquery kendo grid.Here is my schema :

                    fields: {
                        id: "id",
                        shopID: {editable: false},
                        workStartHour: { type: "date"},
                        workEndHour: { type: "date" },
                    }

    Here are columns from my grid :

         {
                        field: "shopID"
                    },
                    {
        
                        field: "workStartHour",
                        editor: timePicker,
                        format: "{0:HH:mm}"
                    },
                    {
                        editor: timePicker,
                        field: "workEndHour",
                        format: "{0:HH:mm}"
                    },
                    { command: ["edit"], title: " " }

    After I change startHour and click 'Update' my update method isn't called.
    But when I set 
    `editable : true`
    for shopID then change it in my line, click update my update method is fired.

    What may cause this ?

    Here is my timepicker :

        var timePicker = function (container, options) {
            var input = $("<input/>");
            var value;
            var property;
            for (var key in options.model) {
                if (options.field.toString() == key.toString()) {
                    value = options.model[key];
                    property = key;
                }
            }
            input.attr(options.field, value);
            input.appendTo(container);
        
            input.kendoTimePicker({
                change: function () {
                    value = this.value();
                    options.model[property] = new Date(value);
                },
                value: value,
                format: "{0:HH:mm}",
                dateInput: true
            });
        }
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 14 Sep 2018 Link to this post

    Hello Adrian,

    Could you please provide the configuration of the Grid and its dataSource or create a dojo example that replicates the issue:
    You can replace the remote binding with local array that matches your data.

    Looking forward to your reply.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Adrian
    Adrian avatar
    13 posts
    Member since:
    Aug 2018

    Posted 17 Sep 2018 in reply to Konstantin Dikov Link to this post

    Add parameter map isn't resolve the problem. 

    Here is my grid :

    $("#grid-" + shopID).kendoGrid({
            dataSource: dataSource,
            height: 550,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [
                {
                    field: "scheduleDay",
                    format: "{0:yyyy/MM/dd}",
                },
                {
     
                    field: "workStartHour",
                    editor: timePicker,
                    format: "{0:HH:mm}",
                },
                {
                    editor: timePicker,
                    field: "workEndHour",
                    format: "{0:HH:mm}"
                },
                { command: ["edit"], title: " " }
            ],
            editable: "inline"
        });

     

     

    Here is my data source. When I test api urls It via postman it works fine.

     

     

    var dataSource = new kendo.data.DataSource({
            transport: {
                read: function (option) {
                    apiHandler.Custom('GET', 'api url?' + 'month=' + month + '&year=' + year + '&userid=' + userID, function (result) {
                        option.success(result);
                    });
                },
                update: function (option) {
                    convertDateFormat(option.data.models[0]);
                    $.ajax({
                        url: 'some api url',
                        dataType: 'json',
                        type: 'POST',
                        data: option.data.models[0],
                        success: function (result) {
                            options.success(result);
                        }
                    });
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        shopID: { editable: false },
                        shopWorkingHourID: "shopWorkingHourID",
                        protectionWorkingHourID: "protectionWorkingHourID"
                    }
                }
            }
        });

     

     

    When I enable to change shopID inline and change it. Update method s fired. But this property cannot by modified.

  4. Preslav
    Admin
    Preslav avatar
    503 posts

    Posted 18 Sep 2018 Link to this post

    Hello Adrian,

    Based on the provided code, I noticed the following:

    1) The dataType of the update request should be jsonp if you are sending cross-domain requests. If the request is in the same domain, you can leave it as json

    2) I see that you are using the "id" field as an id for the model. Could you please confirm that there is an "id" field in the data items?

    3) The definitions of the fields in the schema.model are not correct. Please check this article:

    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Adrian
    Adrian avatar
    13 posts
    Member since:
    Aug 2018

    Posted 18 Sep 2018 in reply to Preslav Link to this post

    This issue is caused by TimePicker. Because whenever I remove editor: timepicker, I can pass date as string and It works just fine.

    In my opinion my schema model is defined properly because my data is camel case or do you mean something else ?

    It wasn't because I got json instead of jsonp because I have tried that as well in meantime. 

  6. Adrian
    Adrian avatar
    13 posts
    Member since:
    Aug 2018

    Posted 18 Sep 2018 in reply to Adrian Link to this post

    I have no idea where the problem might be, but there is date format which I receive : 400
    workEndHour:"2018-09-05T15:00:00"
    workStartHour:"2018-09-05T11:30:00"

    Like I said before the problem is cause by timepicker. Grid doesn't detect change somehow. I've tried with date format as well but I hope you'll find solution for that.

  7. Preslav
    Admin
    Preslav avatar
    503 posts

    Posted 20 Sep 2018 Link to this post

    Hi Adrian,

    I checked the provided code again, and unfortunately, I am still not able to understand the cause of this faulty behavior.

    Thus, I prepared a sample ASP.NET MVC project with the Kendo UI for jQuery Grid, and it seems that the dates are updated as expected with the TimePicker.

    Could you please check the above project and modify it? This will help me fully understand the case, and I will be able to provide assistance to the best of my knowledge. If this is not doable, you could share another project/page that I could examine locally.


    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top