Right align items on Toolbar

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

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

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.

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