Adding Title to Toolbar to the left of the Save and Create buttons.

[Shawn]

I have a ClientDetailsTemplate where the details grid contains InCell editing.  I have added the Toolbar Create and Save buttons to the grid, but I'd like to add a title to the toolbar to the left of the buttons.

Example:

Sub-Departments   [ Save Changes ]  [ Cancel Changes ] [ Add New record ]

I tried using the Toolbar.Template which gave me the title, but I lost the buttons.

What is the best way to achieve this?  If I need to use the Template, how to I get the 3 buttons included into the template along with the Title text?

 

Thanks,

Shawn

[Pavlina]

Hi,

Below you can find a sample dojo example which shows how to add Title before the toolbar buttons:
http://dojo.telerik.com/uDUJi

Give it a try and let me know if you need additional assistance.

Regards,
Pavlina
Telerik by Progress

[Shawn]

Pavlina,

Thank you for the reply, but that did not help (or at least I can't figure out how to translate that to an ASP.NET MVC Razor implementation.  Here is my ClientDetailTemplate that contains the toolbar that I would like to add some text to the left of the buttons.

<script id="subdepartments" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<CBECloudBO2.ViewModels.SubDepartmentDetailsViewModel>()
        .Name("department_#=Id#")
        .Columns(columns =>
        {
            columns.Bound(s => s.Id).Hidden();
            columns.Bound(s => s.DepartmentId).Hidden();
            columns.Bound(s => s.DepartmentDescription).Hidden();
            columns.Bound(s => s.Code);
            columns.Bound(s => s.Description);
        })
        .ToolBar(toolbar => { toolbar.Save(); toolbar.Create(); })
        .DataSource(dataSource => dataSource
            .Ajax()
            //.PageSize(10)
            .Batch(true)
            .Model(model => // model.Id(s => s.Id))
            {
                model.Id(s => s.Id);
                model.Field(s => s.Id).DefaultValue(0);
                model.Field(s => s.DepartmentId).DefaultValue("#=Id#".AsInt());
                model.Field(s => s.Code);
                model.Field(s => s.Description);
            })
            .Read(read => read.Action("SubDepartment_Read", "Department", new { department = "#=Id#" }))
            .Update(update => update.Action("SubDepartment_Update", "Department").Type(HttpVerbs.Post))
            .Create(create => create.Action("SubDepartment_Create", "Department", new { department = "#=Id#" }).Type(HttpVerbs.Post))
            .Sort(sort => sort.Add("Code").Ascending())
            .Events(e => e.RequestEnd("onRequestEnd"))
            )
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .HtmlAttributes(new { style = "height: 180px" })
        .Scrollable()
        .Sortable()
        .Filterable()
        .ToClientTemplate()
    )
</script>

 

In this scenario, how would I do the same thing as your example?

Thanks

Shawn

[kamal]

how can i shift these buttons on right side ?

[Yanislav]

Hello Kamal,

In order to change the position of the buttons inside the Toolbar, you can try to set the 'float' CSS property value of the buttons to 'right':

t.Custom().Text("Custom1").HtmlAttributes(new { style="float:right;"});

I'm not entirely sure what the scenario in the application you are working on is, but to make sure the above configuration would work out you should set the 'display' CSS property value of the Toolbar to 'block'

<style>
    #grid > .k-toolbar{
        display:block;
    }
</style>

Here is an example: https://netcorerepl.telerik.com/wGujYiOp48jZxOZX00

I hope this helps.

[Pavlina]

Hello,

For MVC the solution is quite the same:

@(Html.Kendo().Grid<CBECloudBO2.ViewModels.SubDepartmentDetailsViewModel>()
    .Name("department_#=Id#")
    .ToolBar(toolbar => toolbar.Template("This is my Title"))
    .DataSource(datasource => ...

Regards,
Pavlina
Telerik by Progress

[Shawn]

Pavlina,

Sorry to disagree, but it's not the same.  I used the line that you provided and I did get the title, but I do not get the Save and Create buttons next to the title. So I tried the following and still not buttons.

.ToolBar(toolbar => { toolbar.Template("<b>Sub-departments</b>"); toolbar.Save(); toolbar.Create(); })

 

How do I get the title and still keep the default buttons for the grid?

Regards,

Shawn

[Pavlina]

Hello,

In order to show the create and the save buttons in the toolbar template of the ASP.NET MVC Grid widget wrapper, CreateButton and SaveButton function should be used as shown below:

.ToolBar(toolbar =>
      {
      toolbar.Template(@<text>This is my Title
              @item.CreateButton()
              @item.SaveButton()
      </text>);
      })

Try the code above and let me know in case you need additional assistance.

Regards,
Pavlina
Telerik by Progress

[Shawn]

Pavlina,

Thank you!  That's exactly what I needed for my client details grids.

Regards,

Shawn