Overview sample

[Michele Semprini]

Hi,

I'm trying your Scheduler component (ver.27.x.x) and I'm analyzing the first "Overview" of your Samples:

Looking  in the "Settings" (right)panel  (in the SfMultiselect list of resources), Why is the first Resource (the checkbox) disabled?

Is it possible to make also the first element enabled?

thanks a lot, michele

[Vijay Ravi]

Hi Michele Semprini,

Yes, it is possible to enable the first resource in our sample. Currently, we have overridden the CSS styles to disable the first resource using CssClass="schedule-resource". To enable it, you can remove the specified styles that enable the first resource in the "Settings" panel (on the right side) for the SfMultiSelect list of resources.

The resource grouping checkbox in the schedule toolbar be enabled to display the resource. As a result, we applied the styles to disable that particular resource in multiselect component, but it can be shown by adjusting the relevant CSS.

[overview.razor]

 

<div class="right-panel @((this.IsSettingsVisible ? "" : "hide"))">
                <div class="control-panel e-css">
                    <div class="col-row">
                        <div class="col-left">
                            <label style="line-height: 34px; margin: 0;">Calendar</label>
                        </div>
                        <div class="col-right">
                            <SfMultiSelect @ref="ResourceRef" TValue="int[]" TItem="CalendarData" CssClass="schedule-resource" Mode="@VisualMode.CheckBox" DataSource="@Calendars" EnableSelectionOrder="false" ShowDropDownIcon="true" ShowClearButton="false" @bind-Value="@SelectedResource">
                                <MultiSelectFieldSettings Text="CalendarName" Value="CalendarId"></MultiSelectFieldSettings>
                                <MultiSelectEvents TValue="int[]" TItem="CalendarData" ValueChange="OnResourceChange"></MultiSelectEvents>
                            </SfMultiSelect>
                        </div>
                    </div>

             </div>
</div>

<style>

 

//if you enable the first resource you can remove the below styles

.schedule-resource.e-multi-select-list-wrapper.e-checkbox .e-list-parent:first-child li:first-child {

        background-image: none;

        opacity: .5;

        pointer-events: none;

        user-select: none;

    }
</style>

Regards,

Vijay