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),
                        Model.SourceId);
                    var show = new OrderItemGridCopyFromSourceLaunchInfo
                    {
                        StateKey = Model.StateKey,
                        Title = caption
                    };
                    Model.CopySourceInfoTo(show);
                    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)
                {
                    toolbar.Custom()
                        .Text(string.Format("Add {0}", info.Subject))
                        .HtmlAttributes(new {href = string.Format("javascript:{0}();", info.AddDialogFunction)});
                }
                if (additional != null)
                {
                    additional(toolbar);
                }
            }

     

  2. Answer
    Stefan
    Admin
    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:

    http://demos.telerik.com/aspnet-mvc/grid/toolbar-template

    For example:

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

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

    I hope this is helpful.

    Regards,
    Stefan
    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