Modifying default resource appearance

[inchcape]

I have a DbProvider that allows me to assign users to appointments, but what I really want to do is change how the control auto-generates the checkbox list. I have a lot of users and it is a bit cumbersome when the user list extends down several pages.. is there a way to hide it, or group it (an exotic example would be to structure it like a TreeView)?

[Peter]

Hi Joe,

The Customizing the Advanced Template example and its accompanying help topic give you unlimited flexibility in editting the advanced form. The user control which you will need for the resources functionality is MultipleValuesResourceControl.ascx. Feel free to let us know if you need further assistance along the way.


Greetings,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Julia Shah]

Hi,

I have the same question. I did customize the advanced forms, added some attributes. Now, I too have a very long list of users, which does not look very well. I've looked at MultipleValuesResourceControl, but couldn't figure out how to change it. If I am correct, the function that renders the checkboxes is this one?

protected class SemanticCheckBoxList : CheckBoxList
        {
            protected override void Render(HtmlTextWriter writer)
            {
                writer.RenderBeginTag(HtmlTextWriterTag.Ul);
                for (int i = 0; i < RepeatedItemCount; i++)
                {
                    writer.RenderBeginTag(HtmlTextWriterTag.Li);
                    RenderItem(ListItemType.Item, i, null, writer);
                    writer.RenderEndTag();
                }
                writer.RenderEndTag();
            }
        }

How can I modify it, so the checkboxes would be displayed in several columns instead of one long one? Is it possible to show the resources in multiple choice combobox?

Thank you!
Julia

[Alex Gyoshev]

Hello Julia Shah,

If you change the code posted earlier to:

internal class SchedulerCheckBoxList : CheckBoxList
{
    protected override void Render(HtmlTextWriter writer)
    {
        writer.WriteBeginTag("ul");

        writer.WriteAttribute("class", "rsCheckBoxList");

        writer.Write(HtmlTextWriter.TagRightChar);

        for (int i = 0; i < RepeatedItemCount; i++)
        {
            writer.RenderBeginTag(HtmlTextWriterTag.Li);
            RenderItem(ListItemType.Item, i, null, writer);
            writer.RenderEndTag();
        }

        writer.WriteEndTag("ul");
    }
}

... you can use the following CSS to arrange the check boxes in columns:

.rsCheckBoxList li
{
    float: left;
    width: 150px; /* column width */
    margin-right: 10px; /* spacing between columns */
}

The use of a multi-select box would require more modifications to the code - this is the "least-friction" approach.

Kind regards,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Julia Shah]

Thank you for your reply. I've tried this, but unfortunately, it didn't change anything - I still see one long column of checkboxes. Could you maybe attach a working project?

Also, I was thinking, a matrix of checkboxes with no order would not make finding a user very easy. Could we maybe make it alphabetical, something like this?

-A
    [x] Allsop    [  ] Adrian
-B
    [  ] Bahr    [x] Bandera    [  ] Barnes
    [  ] Blair    [  ] Blaza
+C
+D
...

Thank you!
Julia

[Alex Gyoshev]

Hello Julia,

Please find attached a project with the features you desire. The styles are in the assets/styles.css file.

All the best,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scorpy47]

Hi,
 I have a question regarding the rsCheckBoxList that gets rendered when we add a resourcetype in radscheduler's advanced form. I am not using any advanced form templates but basic resourcetypes only.
Basically I add a ResourceType with allomultiplevalues=true and display them in the form of a vertical checkbox, is it possible to change that to be displayed into two columns side by side? I don't know which class to override.  Any help would be greatly appreciated.

[Boyan Dimitrov]

Hello,

Please apply the following styles in order to achieve the desired appearance scenario:

html .RadScheduler .rsAdvancedEdit .rsResourceControls {
    padding-left: 82px;
}

html .RadScheduler .rsAdvancedEdit .rsResourceControls .rsAdvResourceLabel {
    margin-left: -82px;
    float: left;
}


html .RadScheduler .rsAdvancedEdit .rsCheckBoxList {
    /** Make as wide as possible */
    width: 100%;
    display: block;
    /** Contain floats IE 6/7 */
    zoom: 1;
}
    /** Contain floats the rest */
html .RadScheduler .rsAdvancedEdit .rsCheckBoxList:after {
    content: "";
    clear: both;
    display: block;
}

html .RadScheduler .rsAdvancedEdit .rsCheckBoxList li {
    /** Set (100 / columns count) % */
    width: 50%;
    /** Arrange them side by side */
    float: left;
    clear: none;
}

Please take closer look at the marked area that shows how to modify the width percentage value depending on the resources column count. 

Regards,
Boyan Dimitrov
the Telerik team

[Scorpy47]

Thank you very much Boyan for the quick reply :) It indeed solved my issue.