Populating a custom control with resources in WS mode

8 posts, 0 answers
  1. Jesper Krejberg Petersen
    Jesper Krejberg Petersen avatar
    70 posts
    Member since:
    Dec 2006

    Posted 14 Feb 2011 Link to this post

    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
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 14 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jesper Krejberg Petersen
    Jesper Krejberg Petersen avatar
    70 posts
    Member since:
    Dec 2006

    Posted 14 Feb 2011 Link to this post

    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
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 15 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Jesper Krejberg Petersen
    Jesper Krejberg Petersen avatar
    70 posts
    Member since:
    Dec 2006

    Posted 15 Feb 2011 Link to this post

    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

  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 15 Feb 2011 Link to this post


    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. Yan
    Yan avatar
    2 posts
    Member since:
    Sep 2011

    Posted 05 Jul 2012 Link to this post

    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.
  9. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 09 Jul 2012 Link to this post

    Hello Yan,

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

    Greetings,
    Peter
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017