RadScheduler AdvancedForm

[Miguel]

On my project, i'm using RadScheduler. 


In result of the needs, i had to create a custom edit "window". 


Basically in the main page i have:

<telerik:RadScheduler runat="server" ID="radScheduler" SelectedView="TimelineView"
                EnableExactTimeRendering="True" DayStartTime="00:00:00" DayEndTime="23:59:59"
                DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"
                DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentId"
                AllowInsert="false" AllowDelete="False" AllowEdit="false" ColumnWidth="100px"
                OnAppointmentCreated="radScheduler_AppointmentCreated" AdvancedForm-Modal="true"
                Width="100%" FirstDayOfWeek="Monday" ShowHoursColumn="False" Skin="Telerik" ShowsConfirmationWindowOnDelete="False"
                OnFormCreated="radScheduler_FormCreated">
                <TimelineView UserSelectable="true" GroupingDirection="Vertical" NumberOfSlots="24"
                    ColumnHeaderDateFormat="HH:mm" ShowInsertArea="false" StartTime="00:00:00" SlotDuration="01:00:00"
                    GroupBy="Room" />
                <DayView UserSelectable="false" />
                <MonthView UserSelectable="false" />
                <WeekView UserSelectable="false" />
                <AdvancedEditTemplate>
                    <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Edit"/>
                </AdvancedEditTemplate>
            </telerik:RadScheduler>

and also a RadAjaxManager.

<scheduler:AdvancedForm>

points to AdvancedForm.ascx


In AdvancedForm.ascx i have this javascript block 


   

<script type="text/javascript">


        var chart; // global

        /*
         * Request data from the server, add it to the graph
         */
        function requestData() {
            $.ajaxSetup({ cache: false });
            $.getJSON('exampleurl', function (data) {


                //Clear the "old" series
                while (chart.series.length > 0) {
                    chart.series[0].remove(true);
                }


                //declare Json
                var jsonObj = {
                    series: []
                };


                //Cycle through each JSONobjcect returned by the url
                $.each(data, function (i, item) {
                    var key = item['tag'];
                    var value = item['data']['Velocity'];


                    jsonObj.series.push({
                        "name": key,
                        "data": value
                    });
                });


                //Add each of the key:value pair to the series
                for (var i in jsonObj.series) {
                    chart.addSeries(jsonObj.series[i]);
                }


                // call it again after ten seconds
                setTimeout(requestData, 10000);
            });
        }


        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column',
                    events: {
                        load: requestData
                    }
                },
                title: {
                    text: 'Test Chart'
                },
                xAxis: {
                    title: {
                        text: 'Viaturas'
                    },
                    categories: ['']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Velocidade (Km/h)'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                            this.series.name + ': ' + this.y + ' Km/h';
                    }
                },
            });
        });
</script>

the problem i have is that the $(document).ready is never called...


Thanks in advance for the help..

[Peter]

Hello Miguel,

Please, use the following code:

$telerik.$(document).ready(function () { alert(1); });

For more information on using jQuery with RadControls, please see this help topic -
http://www.telerik.com/help/aspnet-ajax/introduction-using-jquery.html.



Best wishes,
Peter
the Telerik team

[Miguel]

My solution was instead of having a UserControl, i paste all the code between <AdvancedEditTemplate> :)

But i've tried your suggestion and it also works :)

I now have another doubt, so i'll recycle this thread.

It's possible to pass the appointment user as a parameter in the function that's fired onclientappointmentclick??

[Miguel]

I've found the answer so i'll share it:

function example(sender, eventArgs) {

            //Get the userID of the appointment that fired the event
            var apt = eventArgs.get_appointment().get_resources().getResource(0).get_text();

            alert(apt);

Thanks anyway for all the help :)

[Peter]

Hi Miguel,

I assume you have defined a resource type with called "User". If that's the case, you can call get_resources() of the Appointment client object and use the API of the SchedulerResourceCollection to access the user information.

Greetings, Peter
the Telerik team