Populating a custom control with resources in WS mode

[Jesper Krejberg Petersen]

Hi.

I'm creating a custom control to handle complex relations between 3 resources.
I will consist of 2 Combos and a CheckBoxList.
At what point can I populate these controls with their selectable values in a clientside event?
I'm quite sure I know where to handle the loading, selection and saving of the chosen values to the appointment.

/Jesper

[Peter]

Hi 6-shooter,

Can you please elaborate on your scenario? Are you to integrate your custom user control in the Advanced Form of RadScheduler or will you use it independently? Once we have a clearer idea of your requirement, we will try to suggest a solution.


Kind regards,
Peter
the Telerik team

[Jesper Krejberg Petersen]

Hi Peter.

Thanks for your fast reply.

I'm trying to create an advanced form. I have it working, the standard way, with 2 single- and a multivalue resource. 
Now I need to apply a lot of validation, involving enabling/disabling single values in each resource depending on choices in the others.
To do that I want to create a single custom control to hold the same controls Combo and CheckboxList and isolate all the logic in a module of it's own, and hide/remove the standard resource editors.
Later I plan to make at smarter UI to represent my scenario and that also calls for the separate usercontrol solution.
I hope this is understandable :)

/Jesper

[Peter]

The AdvancedForm.js will automatically handle resources and custom attributes defined in AdvancedForm.ascx, as long as you follow a certain naming convention.

• Resource controls should follow the convention Res[Resource Name] for ID.

Here is the help topic for more details.

This is because the AdvancedForm.js relies uses jQuery and the specific rendering to populate and save the resources on the client:

_saveResources : function (apt)
    {
        var template = this;
        var schedulerResources = this._scheduler.get_resources();

        this._scheduler.get_resourceTypes().forEach(function(resourceType) {
            var resourceTypeName = resourceType.get_name();
            var baseName = template._templateId + "_Res" + resourceTypeName + resourceControlSuffix;
            var resourcesOfThisType = schedulerResources.getResourcesByType(resourceTypeName);

            if (resourceType.get_allowMultipleValues())
            {
                var checkBoxes = $(String.format("input[id*='{0}']", baseName), this._formElement);

                if (checkBoxes.length > 0)
                    apt.get_resources().removeResourcesByType(resourceTypeName);

                for (var i = 0; i < checkBoxes.length; i++)
                {
                    if (checkBoxes[i].checked && resourcesOfThisType.get_count() >= i)
                        apt.get_resources().add(resourcesOfThisType.getResource(i));
                };
            }
            else
            {
                var dropDown = $find(baseName);
                if (!dropDown)
                    return;

                apt.get_resources().removeResourcesByType(resourceTypeName);

                if (dropDown.get_selectedIndex() == 0)
                    return;

                var selectedValue = dropDown.get_selectedItem().get_value();
                var newResource = schedulerResources.findAll(function(res) {
                    return res.get_type() == resourceTypeName &&
                           res._getInternalKey() == selectedValue;
                }).getResource(0) || null;

                if (newResource)
                    apt.get_resources().add(newResource);
            }
        });
    },

*  *  *  *  *
 _populateResources : function ()
    {
        var template = this;
        var resourceTypes = this._scheduler.get_resourceTypes();

        resourceTypes.forEach(function (resType) {
            var baseName = template._templateId + "_Res" + resType.get_name() + resourceControlSuffix;

            if (resType.get_allowMultipleValues())
            {
                // Clear the resource checkboxes
                $(String.format("input[id*='{0}']", baseName), this._formElement)
                    .each(function() {
                        this.checked = false;
                });
            }
            else
            {
                var dropDown = $find(baseName);
                if (dropDown)
                    dropDown.get_items().getItem(0).select();
            }
        });

        this._appointment.get_resources().forEach(function (res) {
            var baseName = template._templateId + "_Res" + res.get_type() + resourceControlSuffix;
            var resType = resourceTypes.getResourceTypeByName(res.get_type());
            if (resType && resType.get_allowMultipleValues())
            {
                var resIndex = template._getResourceIndex(res);
                var checkBox = $get(baseName + "_" + resIndex);

                if (checkBox)
                    checkBox.checked = true;
            }
            else
            {
                var dropDown = $get(baseName);
                if (dropDown)
                    template._selectDropDownValue(dropDown, res._getInternalKey());
            }
        });
    },

So, the bottom line is, as long as you follow the naming convention, you shouldn't need to do any extra work to bind your resource controls in WS binding mode.


All the best,
Peter
the Telerik team

[Jesper Krejberg Petersen]

Thanks Peter.

I will experiment with this.
I'm gonna get back to you when I'm a little wiser myself, because my ultimate goal is a single control to handle 3 resources.

 

Just a thought.
Could it be a solution to use the standard resource-controls as a proxy? And if that's possible, in what event can I copy from the proxies to my All-in-one control. I guess it needs to be as late as possible, so that my control is loaded and accesible from JS.

Cheers /Jesper

[Peter]

I am not sure I understand what approach exactly you plan to use, but as a guiding rule I can suggest you examine how the advanced form renders and to make sure that you successfully loop through the resource elements with jQuery.

Kind regards,
Peter
the Telerik team

[Yan]

I tried your solution but this._scheduler.get_resources().get_count() always returns 0. And on the server side, the "Resources" property is always zero in AppointmentData parameter.

[Peter]

Hello Yan,

Can you open a support ticket and send us a sample of the issue?

Greetings,
Peter
the Telerik team