This is a migrated thread and some comments may be shown as answers.
Need help in how to add textbox and button in toolbar using Custom
4 Answers 214 Views
This is a migrated thread and some comments may be shown as answers.
Gaurav
Top achievements
Rank 1
Gaurav asked on 20 May 2017, 02:09 AM

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);
            }
        }

 

4 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 23 May 2017, 11:00 AM
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 (charts) and form elements.
0
Gaurav
Top achievements
Rank 1
answered on 23 May 2017, 05:32 PM
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.
0
Richard
Top achievements
Rank 1
answered on 01 Oct 2018, 03:37 AM

toolbar.Template wipes out buttons created with toolbar.Create and toolbar.Custom

toolbar.Create();
toolbar.Custom()
    .HtmlAttributes(new { onclick = "master_duplicate(); return false;" })
    .Name("duplicate")/* creates a button with class k-grid-duplicate */
    .Text("Duplicate")
    .IconClass("k-icon k-i-copy")
    .Url("#")
;
toolbar.Template("@<text>
<form id="standardSearchForm" action="#">
<input class="k-textbox k-space-right" type="search" id="searchTerm" placeholder="Search term..."/>
<span title="Find by columns x, y, or z" id="searchGo" class="k-icon k-i-search"></span>
</form>
</text>"
);

 

What would the toolbar template be if I wanted a Create button and my Custom button to appear before my search box ?

0
Stefan
Telerik team
answered on 01 Oct 2018, 06:52 AM
Hello, Richard,

The described result is expected.

If the template is used, the built-in buttons are replaced with the content from the template.

If the Create button has to be on the page I can suggest adding a custom button with class "k-button" and on its click event to call the addRow method. This will achieve the same results as the built-in Create button:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/addrow

Regards,
Stefan
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Gaurav
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Gaurav
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Share this question
or