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

7 posts, 0 answers
  1. Shawn
    Shawn avatar
    36 posts
    Member since:
    Jul 2016

    Posted 03 Feb Link to this post

    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

  2. Pavlina
    Admin
    Pavlina avatar
    6128 posts

    Posted 07 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Shawn
    Shawn avatar
    36 posts
    Member since:
    Jul 2016

    Posted 08 Feb in reply to Pavlina Link to this post

    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

  4. Pavlina
    Admin
    Pavlina avatar
    6128 posts

    Posted 10 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Shawn
    Shawn avatar
    36 posts
    Member since:
    Jul 2016

    Posted 10 Feb in reply to Pavlina Link to this post

    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

  6. Pavlina
    Admin
    Pavlina avatar
    6128 posts

    Posted 14 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Shawn
    Shawn avatar
    36 posts
    Member since:
    Jul 2016

    Posted 14 Feb in reply to Pavlina Link to this post

    Pavlina,

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

    Regards,

    Shawn

Back to Top