Invalid JSON primitive after bulk update of all date pickers

[Gregory]

Hello,

I have a RadGrid used in EditMode. One of the column has a RadDatePicker in the EditItemTemplate. I want to update all these RadDatePicker on the client side when the value of another RadDatePicker is changed. I manage to update all the date picker in the grid with JQuery doing this:

function rdpPaymentDate_ClientClick() {
    var rdp = $find("<%= rdpPmtDate.ClientID %>");
    var date = rdp.get_selectedDate();

    $("input[id*='rdpPaymentDate_dateInput']").val(date.mmddyy());
}

Date.prototype.mmddyy = function () {
    var mm = this.getMonth() + 1; // getMonth() is zero-based
    var dd = this.getDate();

    return [
        (mm > 9 ? '' : '0') + mm,
        (dd > 9 ? '' : '0') + dd,
        this.getFullYear()
    ].join('/');
};

 

When i submit my page to update my data, it says Invalid JSON primitive: 29/2019. Where 29 and 2019 are the day and year of the new date I had selected.

How can I update client side all the RadDatePicker controls at once please?

Thank you

Gregory

[Eyup]

Hi Gregory,

 

You need to access the Telerik object of the pickers:
https://www.telerik.com/support/kb/aspnet-ajax/details/access-telerik-controls-on-client-side

And then use their own API the change the selected date:
https://docs.telerik.com/devtools/aspnet-ajax/controls/datepicker/client-side-programming/raddatepicker-object

I hope this will prove helpful. Feel free to give it a try and let me know how it goes.

 

Regards,
Eyup
Progress Telerik

[Gregory]

Hy Eyup,

Thanks for your answer. Setting the date of the date pickers on the client sides is definitely the easier part of my problem.

What I am missing is how to get access to all the date pickers nested inside the radgrid. 
If I use 
var textBox = $telerik.findControl(document.documentElement, "txtTrackingNumber");

It gives me access to only the date picker of the first row of the grid.

Trying to use the second method from your link, i see that RadDatePicker does not have OnClientLoad available in its declaration.

Using the third method $find seems also challenging since there is a random quantity of date pickers in the grid and they do not have a defined id.

Could you describe further how to have access to all the date pickers nested in the grid?

Thank you

[Eyup]

Hello Gregory, 

 

Here are the various ways you can do that:

1. Traverse grid items and get the pickers one by one:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/onrowcreated

2. Use the global approach suggested here:
https://www.telerik.com/forums/how-to-get-all-rad-date-picker-id-on-a-page#jiRqJHOEvkatU2xEkKC5bA
3. Use jQuery selector to get all DOM picker elements and then use $find(pickerEl.id) or pickerEl.control to access their Telerik objects.

All of these options should be viable in your case. The syntax itself can seem unfamiliar at first, but once you get used to it you will see that it is actually pretty logical and straightforward.

Let me know which approach you prefer so I can prepare a code sample for it.

Regards,
Eyup
Progress Telerik

[Gregory]

Hi Eyup,

I think the third option (lQuery selector then $find) would be the best way to go about this. I am not sure how to do that, so a code sample would be definitely appreciated. 

Thank you very much for your time.

Gregory

[Eyup]

Hi Gregory,

 

As mentioned, you can use jQuery selectors to achieve this requirement:
https://api.jquery.com/category/selectors/

And here is a working code snippet which accesses every picker inside RadGrid and set its selected date to be Today:

            function buttonClick() {
                $(".RadGrid .RadPicker > input:first-of-type").each(function (i) {
                    var picker = $find(this.id);
                    picker.set_selectedDate(new Date());
                });
            }

 

Regards,
Eyup
Progress Telerik

[Gregory]

Hello Eyup,

Thanks for the snippet, it works great. I did not have a chance to test it on a big sample but i think it will accommodate most of our customers.

Thanks for the support.

Gregory