|
| 1 | +--- |
| 2 | +title: Toolbar |
| 3 | +page_title: Toolbar |
| 4 | +description: "Learn how to configure the Toolbar of the Telerik UI Scheduler component for {{ site.framework }}." |
| 5 | +slug: scheduler_toolbar_aspnetcore |
| 6 | +position: 5 |
| 7 | +--- |
| 8 | + |
| 9 | +# Toolbar |
| 10 | + |
| 11 | +The Telerik {{ site.product_short }} Scheduler component provides the means to customize it's toolbar. |
| 12 | + |
| 13 | +## Default Toolbar |
| 14 | + |
| 15 | +The Telerik {{ site.product_short }} Scheduler allows you to add commands for exporting to PDF and searching through Scheduler events titles. Adding the `.Pdf()` and `.Search()` commands via the Scheduler's `Toolbar()` configuration will display the command alongside the built-in ToolBar tools. The `pdf` and `search` tools will be rendered in a predefined place within the ToolBar. |
| 16 | + |
| 17 | +```HtmlHelper |
| 18 | + @(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>() |
| 19 | + .Name("scheduler") |
| 20 | + .Height(600) |
| 21 | + .Toolbar(t=>{ |
| 22 | + t.Pdf(); |
| 23 | + t.Search(); |
| 24 | + }) |
| 25 | + .Timezone("Etc/UTC") |
| 26 | + .DataSource(d => d |
| 27 | + .Model(m => |
| 28 | + { |
| 29 | + m.Id(f => f.TaskID); |
| 30 | + m.RecurrenceId(f => f.RecurrenceID); |
| 31 | + m.Field(f => f.Title).DefaultValue("No title"); |
| 32 | + m.Field(f => f.OwnerID).DefaultValue(1); |
| 33 | + }) |
| 34 | + .Read("Read", "Scheduler") |
| 35 | + .Create("Create", "Scheduler") |
| 36 | + .Destroy("Destroy", "Scheduler") |
| 37 | + .Update("Update", "Scheduler") |
| 38 | + ) |
| 39 | + ) |
| 40 | +``` |
| 41 | +{% if site.core %} |
| 42 | +```TagHelper |
| 43 | + <kendo-scheduler name="scheduler" height="600" date="new DateTime(2022, 6, 13)" start-time="new DateTime(2022, 6, 13, 7, 0, 0, 0)" timezone="Etc/UTC" mobile="MobileMode.Auto"> |
| 44 | + <toolbar> |
| 45 | + <scheduler-toolbar-button name="pdf"></scheduler-toolbar-button> |
| 46 | + <scheduler-toolbar-button name="search"></scheduler-toolbar-button> |
| 47 | + </toolbar> |
| 48 | + </kendo-scheduler> |
| 49 | +``` |
| 50 | +{% endif %} |
| 51 | + |
| 52 | +## Custom Toolbar |
| 53 | + |
| 54 | +The Telerik {{ site.product_short }} Scheduler allows you to customize entirely it's Toolbar via the `.Toolbar(t=>t.Custom())` configuration option. |
| 55 | + |
| 56 | +The default order of the Scheduler tools is: `[ "pdf", [ "today", "previous", "next" ], "current", { type: "spacer" }, "search", "views" ]`. You can set the `Items` configuration to entirely replace all tools in the Scheduler ToolBar (including the default once) in order desired for them to appear in the component. Grouping tools to render a ButtonGroup in the ToolBar is also supported via the `Group()` configuration. Rendering custom components in the Toolbar is also supported via the `CustomTool()` configuration method. |
| 57 | + |
| 58 | +``` |
| 59 | + .Toolbar(t => t.Custom(c => |
| 60 | + c.Items(itm => { |
| 61 | + itm.CustomTool(Html.Kendo().Template().AddComponent(c => c |
| 62 | + .DropDownButton() |
| 63 | + .Name("viewsButton") |
| 64 | + .Text("Select View") |
| 65 | + .Icon("chevron-down").Items(db => |
| 66 | + { |
| 67 | + db.Add().Text("Day"); |
| 68 | + db.Add().Text("Week"); |
| 69 | + db.Add().Text("Timeline"); |
| 70 | + db.Add().Text("Month"); |
| 71 | + db.Add().Text("Year"); |
| 72 | + }) |
| 73 | + .Events(ev => ev.Click("viewsHandler")) |
| 74 | + ) |
| 75 | + ); |
| 76 | + itm.CustomTool(Html.Kendo().Template().AddComponent(c => c |
| 77 | + .Button() |
| 78 | + .Name("customButton") |
| 79 | + .Content("Custom Button") |
| 80 | + .Events(ev=>ev.Click("clickHandler")) |
| 81 | + ) |
| 82 | + ); |
| 83 | + itm.Spacer(); |
| 84 | + itm.Current(); |
| 85 | + itm.Group(g => |
| 86 | + { |
| 87 | + g.Today(); |
| 88 | + g.Previous(); |
| 89 | + g.Current(); |
| 90 | + }); |
| 91 | + }) |
| 92 | + ) |
| 93 | + ) |
| 94 | +``` |
| 95 | +{% if site.core %} |
| 96 | +```TagHelper |
| 97 | + @addTagHelper *, Kendo.Mvc |
| 98 | +
|
| 99 | + @{ |
| 100 | + var navButtons = new string[] { "today", "previous", "next" }; |
| 101 | + } |
| 102 | +
|
| 103 | + <kendo-scheduler name="scheduler" height="600" date="new DateTime(2022, 6, 13)" start-time="new DateTime(2022, 6, 13, 7, 0, 0, 0)" timezone="Etc/UTC" mobile="MobileMode.Auto"> |
| 104 | + <toolbar> |
| 105 | + <scheduler-toolbar-items> |
| 106 | + <scheduler-tool> |
| 107 | + <scheduler-tool-template> |
| 108 | + <kendo-dropdownbutton name="viewsButton" text="Select View" on-click="viewsHandler" icon="chevron-down"> |
| 109 | + <dropdownbutton-items> |
| 110 | + <item text="Day"></item> |
| 111 | + <item text="Week"></item> |
| 112 | + <item text="Month"></item> |
| 113 | + <item text="TimeLine"></item> |
| 114 | + <item text="Year"></item> |
| 115 | + </dropdownbutton-items> |
| 116 | + </kendo-dropdownbutton> |
| 117 | + </scheduler-tool-template> |
| 118 | + </scheduler-tool> |
| 119 | + <scheduler-tool> |
| 120 | + <scheduler-tool-template> |
| 121 | + <kendo-button name="customButton" on-click="clickHandler"> |
| 122 | + Custom Button |
| 123 | + </kendo-button> |
| 124 | + </scheduler-tool-template> |
| 125 | + </scheduler-tool> |
| 126 | + <scheduler-tool type="spacer"></scheduler-tool> |
| 127 | + <scheduler-tool name="current"></scheduler-tool> |
| 128 | + <scheduler-tool commands-group="@navButtons"></scheduler-tool> |
| 129 | + </scheduler-toolbar-items> |
| 130 | + </toolbar> |
| 131 | + </kendo-scheduler> |
| 132 | +``` |
| 133 | +{% endif %} |
| 134 | +```JavaScript |
| 135 | + <script type="text/javascript"> |
| 136 | + function viewsHandler(e) { |
| 137 | + var scheduler = $("#scheduler").getKendoScheduler(); |
| 138 | + var selectedView = e.target.text().toLowerCase() |
| 139 | + scheduler.view(selectedView) |
| 140 | + } |
| 141 | + |
| 142 | + function clickHandler(e) { |
| 143 | + alert('Custom button is clicked!!!') |
| 144 | + } |
| 145 | + </script> |
| 146 | +``` |
| 147 | + |
| 148 | +### Desktop Toolbar |
| 149 | + |
| 150 | +Besides setting a custom Toolbar, the Scheduler provides the option to specify all the tools rendered in the Scheduler's ToolBar with its non-adaptive rendering. You can specify the tools via the `.Toolbar(t=>t.Custom(c=>c.Desktop()))` configuraiton method. If not explicitly set here, the component will render its built-in tools |
| 151 | + |
| 152 | +### Mobile Toolbar |
| 153 | + |
| 154 | +In addition to the `Desktop` configuration the {{ site.product_short }} Scheduler provides the option to specify the tools rendered in the Scheduler ToolBar with its adaptive rendering. By default, two ToolBars are rendered when the Scheduler is in Adaptive rendering mode: |
| 155 | + |
| 156 | + * Main (or upper) ToolBar - contains the following built-in tools: `[ [ "pdfMobile", "calendar", "create" ], { type: "spacer" }, "search", "viewsMobile" ]` |
| 157 | + * Navigation (or lower) ToolBar - contains the following built-in tools: `[ "previousMobile", { type: "spacer" }, "currentMobile", { type: "spacer" }, "nextMobile" ]` |
| 158 | + |
| 159 | +Both the Main and Navigation toolbars can be configured to display any of the built-in tools as well as custom tools: |
| 160 | + |
| 161 | +``` |
| 162 | +.Toolbar(t => t.Custom(c => |
| 163 | + c.Desktop(d => |
| 164 | + { |
| 165 | + d.Group(g => |
| 166 | + { |
| 167 | + g.Previous(); |
| 168 | + g.Today(); |
| 169 | + g.Next(); |
| 170 | + }); |
| 171 | + d.CustomTool(Html.Kendo().Template().AddComponent(c => c |
| 172 | + .DropDownButton() |
| 173 | + .Name("myViews") |
| 174 | + .Text("Select View") |
| 175 | + .Icon("chevron-down").Items(db => |
| 176 | + { |
| 177 | + db.Add().Text("Day"); |
| 178 | + db.Add().Text("Week"); |
| 179 | + db.Add().Text("Timeline"); |
| 180 | + db.Add().Text("Month"); |
| 181 | + db.Add().Text("Year"); |
| 182 | + }) |
| 183 | + .Events(ev => ev.Click( |
| 184 | + @<text> |
| 185 | + function(e) { |
| 186 | + var scheduler = $("#scheduler").getKendoScheduler(); |
| 187 | + var selectedView = e.target.text().toLowerCase(); |
| 188 | + scheduler.view(selectedView); |
| 189 | + } |
| 190 | + </text>)) |
| 191 | + ) |
| 192 | + ); |
| 193 | + d.Current(); |
| 194 | + d.Pdf(); |
| 195 | + d.Spacer(); |
| 196 | + d.Views(); |
| 197 | + }) |
| 198 | + .Mobile(m => |
| 199 | + { |
| 200 | + m.Main(main => |
| 201 | + { |
| 202 | + main.PdfMobile(); |
| 203 | + main.Spacer(); |
| 204 | + main.CurrentMobile(); |
| 205 | + main.Spacer(); |
| 206 | + main.ViewsMobile(); |
| 207 | + }); |
| 208 | + m.Navigation(navi => |
| 209 | + { |
| 210 | + navi.PreviousMobile(); |
| 211 | + navi.Spacer(); |
| 212 | + navi.Today(); |
| 213 | + navi.Spacer(); |
| 214 | + navi.NextMobile(); |
| 215 | + }); |
| 216 | + }))) |
| 217 | +``` |
| 218 | +{% if site.core %} |
| 219 | +```TagHelper |
| 220 | + @{ |
| 221 | + var navButtons = new string[] { "today", "previous", "next" }; |
| 222 | + var navMobileButtons = new string[] { "today", "previousMobile", "nextMobile" }; |
| 223 | + } |
| 224 | +
|
| 225 | + <kendo-scheduler name="scheduler" height="600" date="new DateTime(2022, 6, 13)" start-time="new DateTime(2022, 6, 13, 7, 0, 0, 0)" timezone="Etc/UTC" mobile="MobileMode.Auto"> |
| 226 | + <toolbar> |
| 227 | + <scheduler-desktop-items> |
| 228 | + <scheduler-desktop-tool commands-group="@navButtons"></scheduler-desktop-tool> |
| 229 | + <scheduler-desktop-tool type="spacer"></scheduler-desktop-tool> |
| 230 | + <scheduler-desktop-tool name="search"></scheduler-desktop-tool> |
| 231 | + </scheduler-desktop-items> |
| 232 | + <scheduler-mobile-main-items> |
| 233 | + <scheduler-mobile-main-tool commands-group="@navMobileButtons"></scheduler-mobile-main-tool> |
| 234 | + <scheduler-mobile-main-tool type="spacer"></scheduler-mobile-main-tool> |
| 235 | + <scheduler-mobile-main-tool name="search"></scheduler-mobile-main-tool> |
| 236 | + </scheduler-mobile-main-items> |
| 237 | + <scheduler-mobile-nav-items> |
| 238 | + <scheduler-mobile-nav-tool name="current"></scheduler-mobile-nav-tool> |
| 239 | + <scheduler-mobile-main-tool type="spacer"></scheduler-mobile-main-tool> |
| 240 | + <scheduler-mobile-main-tool name="pdfMobile"></scheduler-mobile-main-tool> |
| 241 | + </scheduler-mobile-nav-items> |
| 242 | + </toolbar> |
| 243 | + </kendo-scheduler> |
| 244 | +``` |
| 245 | +{% endif %} |
0 commit comments