Need help in how to add textbox and button in toolbar using Custom

3 posts, 1 answers
  1. Gaurav
    Gaurav avatar
    20 posts
    Member since:
    Nov 2014

    Posted 19 May Link to this post

    Wondering is there a way I can add textbox and a button so on click of a button reads textbox value and calls javascript?

    Right now I am showing two buttons using following code:

    .ColumnMenu(i => i.Columns(false))
            .ToolBar(toolbar => Model.ConfigureToolbar(toolbar, toolbar2 =>
                if (Model.CanCreate && Model.SourceId > 0)
                    var caption = string.Format("Copy Items From Source ({0} {1})", OrderHelper.GetEntityLabel(Model.SourceIsQuote),
                    var show = new OrderItemGridCopyFromSourceLaunchInfo
                        StateKey = Model.StateKey,
                        Title = caption
                    toolbar2.Custom().Text(caption + "...").Url(string.Format("javascript: order.showItemGridCopyFromSourceForm({0});", JsonConvert.SerializeObject(show)));


    public static void ConfigureToolbar<T>(this IDialogStartInfo info, GridToolBarCommandFactory<T> toolbar,
                Action<GridToolBarCommandFactory<T>> additional) where T : class
                if (info.CanCreate)
                        .Text(string.Format("Add {0}", info.Subject))
                        .HtmlAttributes(new {href = string.Format("javascript:{0}();", info.AddDialogFunction)});
                if (additional != null)


  2. Answer
    Stefan avatar
    1279 posts

    Posted 23 May Link to this post

    Hello Gaurav,

    The desired result can be achieved using a template for the Toolbar:

    For example:

    .ToolBar(toolbar =>
               <div class="toolbar">
                   <input type="type" name="name" value="test" class ="k-textbox" id="toolBarInput"/>
                   <button class="k-button" onclick="getValue()">Get value</button>

    function getValue() {
            var value = $('#toolBarInput').val();
            //make call the server

    I hope this is helpful.

    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. Gaurav
    Gaurav avatar
    20 posts
    Member since:
    Nov 2014

    Posted 23 May in reply to Stefan Link to this post

    Thank you for the reply. I was able to do it but was wondering if whatever I showed in my code if there was a way to do that in that or not.
Back to Top