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

[Gaurav]

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

 

[Stefan]

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

[Gaurav]

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.

[Richard]

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 ?

[Stefan]

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