Adding AutoComplete to the Toolbar

3 posts, 1 answers
  1. Richard
    Richard avatar
    97 posts
    Member since:
    Feb 2009

    Posted 14 Feb 2018 Link to this post

    Is it possible to add the AutoComplete control to the ToolBar 

    I was trying something like this but I don't think I'm on the right track.

    Thanks,

    Richard

    @(Html.Kendo().ToolBar()
        .Name("ToolBar")
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Button");
            items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
     
            items.Add().Type(CommandType.Separator);
     
            items.Add().Template("<label for='dropdown'>Search:</label>");
            items.Add().Template(
                @(Html.Kendo().AutoComplete()
                    .Name("GridSearch")
                    .DataTextField("AppName")
                    .Filter(FilterType.Contains)
                    .MinLength(2)
                    .DataSource("GridDataSource")
                    ) ;
  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    444 posts

    Posted 14 Feb 2018 Link to this post

    Hi Richard,

    ToolBar's item template supports only string, thus it is not possible to define an AutoComplete in it this way. In order to achieve it, an AutoComplete may be added in the same way as the DropDownList in ToolBar's Basic usage demo:

    items.Add().Template("<input id='dropdown' style='width: 150px;' />").Overflow(ShowInOverflowPopup.Never);
    ...
    <script>
        $(document).ready(function () {
            $("#dropdown").kendoDropDownList({
                optionLabel: "Paragraph",
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Heading 1", value: 1 },
                    { text: "Heading 2", value: 2 },
                    { text: "Heading 3", value: 3 },
                    { text: "Title", value: 4 },
                    { text: "Subtitle", value: 5 },
                ]
            });
        });
    </script>

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Richard
    Richard avatar
    97 posts
    Member since:
    Feb 2009

    Posted 14 Feb 2018 in reply to Dimitar Link to this post

    Thanks Dimitar, that makes sense to me now. 
Back to Top