Right align items on Toolbar

[squawk]

I'm trialing Kendo UI and currently experimenting with the Toolbar widget.  Got it working ok, but I need to right align certain items on the toolbar - any idea how I would do this?

[Danny Fritz]

In the source code I'm seeing an option for align, but it isn't documented. Try passing in align: 'right'.

[Ivan Danchev]

Hello Umutcan,

See this documentation section for more information on how to move tools to the right in the ToolBar: https://docs.telerik.com/kendo-ui/backwards-compatibility/2019-backward-compatibility#kendo-ui-2019-r2-sp1

Here's a dojo example showing how the spacer can be used to move a DropDownList and its label to the right: https://dojo.telerik.com/ajEleren

Regards,
Ivan Danchev
Progress Telerik

[Iliana Dyankova]

Hi,

To achieve this you should override the default styling using custom CSS rules. For your convenience here is a simple example which demonstrates a possible implementation. 

Regards,
Iliana Nikolova
Telerik

 

 

[Marcel]

Hi,

Using float:right on the items works fine in all browsers except Firefox (latest version).
In Firefox the menu item floats right, but doubles the height of the toolbar with that item at the right-bottom.
You can reproduce this using Firefox with the example you gave.

Any ideas how to fix this ?

Thanks in advance.

[Marcel]

Never mind... I found the problem (as i suspected) and fix.
If you use float:right on toolbar items, make sure to add them as the First items in the options.items.
Apparently Firefox is very strict on floats.

[Ivan Danchev]

Hi,

Since the 2019 R2 SP1 release aligning tools to the right in the Toolbar can be done with the new Spacer command type. For more details on this change and a workaround for aligning tools without using the Space, refer to the Breaking Changes section of the documentation.

Regards,
Ivan Danchev
Progress Telerik

[Ben]

Hello Ivan,

I am trying to achieve something similar but I am using Razor, and the page you put a link to only has javascript examples.  The spacer solution looks like exactly what I need since I am trying to have my Excel button, and my Add New button on opposite sides of the screen. Here is the code for my grid:

@(Html.CapGrid<Intra.Common.Crr>("gridCrrss", "Cs.xlsx")
        .ToolBar(tb => tb.Create())
        .Columns(columns =>
        {
            columns.Bound(crr => crr.id).Editable("readOnlyColumn").Hidden(true);
            columns.Bound(crr => crr.Name).Title("Name*").Width(200);
            columns.Bound(crr => crr.stuff).Title("stuff").Width(200);
            columns.Bound(crr => crr.things).Title("things).Width(200);
            columns.Bound(crr => crr.whatnots).Title("whatnots").Width(200);
            columns.Command(command =>
            {
                command.Edit();
            }).Width(200);
        })
        .Pageable()
        .Groupable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(50)
            .Events(events => events.Error("error_handler").RequestEnd("onRequestEnd"))
            .Model(model => model.Id(crr => crr.ID))
            .Read(read => read.Action("getCrrs", "Crr").Type(HttpVerbs.Get))
            .Create(create => create.Action("AddItem", "Crr"))
            .Update(update => update.Action("UpdateItem", "Crr"))
        )
        .Events(events =>
        {
            events.DataBound("gridCrrs_DataBound");
        })
        )

Any assistance you can provide would be very helpful.

Sincerely

Ben Parker

 

[Ivan Danchev]

Hello Ben,

The "spacer" command exists only in the context of the Toolbar component: https://demos.telerik.com/aspnet-mvc/toolbar

However, from the posted code-snippet I see you are using the Grid component. The Grid's toolbar is not the Toolbar standalone component, and the "spacer" command is not applicable in this case.

To align a Grid toolbar button to the right, you can use CSS rules with the respective selector. For example, if you have "Add new record" and "Export to Excel" buttons and you want the former to remain on the left and the latter to be displayed at the right side, you can use the following rule:

.k-grid-excel {
  float: right;
}

Regards,
Ivan Danchev
Progress Telerik

[Andy F.]

spacer recently added to kendogrid toolbar, so you can now add:

{name: 'spacer1', type: 'spacer'},

to create a spacer in your grid toolbar.  Must name it or it throws an exception.

[Umutcan]

[quote]Iliana Nikolova said:Hi,

To achieve this you should override the default styling using custom CSS rules. For your convenience here is a simple example which demonstrates a possible implementation. 

Regards,
Iliana Nikolova
Telerik

 

 

[/quote]

In my scenario, I had to move my dropdownlist with its label to the right, instead of toggle button. 

• I tried .k-toolbar #dropdown and .k-toolbar .k-dropdown but they didn't work.
• I moved dropdownlist and its label to the place of toggle button and tried them again but they didn't work.
• I tried adding attribute directly to the dropdown as it is shown here: http://dojo.telerik.com/EFeFi, it also didn't work.

Is there any way to align dropdownlist and its label in toolbar?

[Michael]

Old question but when I tried float: right, the toolbar background was messed up so I had to add this style to my page:

.k-grid-toolbar {
    flex-direction: row-reverse;
}

It gives me expected result without changing with toolbar background.

[Anton Mironov]

Hi Michael,

Thank you for sharing this approach with the community.

If further assistance or information is needed, do not hesitate to contact the Team.


Kind Regards,
Anton Mironov