This is a migrated thread and some comments may be shown as answers.

Invalid JSON primitive after bulk update of all date pickers

6 Answers 111 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Gregory
Top achievements
Rank 2
Gregory asked on 03 Dec 2019, 05:32 PM

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

6 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 06 Dec 2019, 12:10 PM

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

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.
0
Gregory
Top achievements
Rank 2
answered on 06 Dec 2019, 07:50 PM

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

0
Eyup
Telerik team
answered on 11 Dec 2019, 09:14 AM

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

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.
0
Gregory
Top achievements
Rank 2
answered on 11 Dec 2019, 08:56 PM

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

0
Accepted
Eyup
Telerik team
answered on 12 Dec 2019, 08:46 AM

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

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.
0
Gregory
Top achievements
Rank 2
answered on 16 Dec 2019, 03:45 PM

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

Tags
DatePicker
Asked by
Gregory
Top achievements
Rank 2
Answers by
Eyup
Telerik team
Gregory
Top achievements
Rank 2
Share this question
or