Focus on Search Panel

[IvanDrago]

Hy,

is there a way to set the focus on the search panel when page is ready?

I already tried this but the focus is set automaticilly to --> see image.

I saw that the k.input class is in every filterable column.  

This is my code:

@(Html.Kendo().Grid<LLTelefonliste.Models.TelefonUndAbwesendGmbHKg>()
                    .Name("grid")
                    .ToolBar(t =>
                    {
                        t.Search();
                    })
                    .Columns(columns =>
                    {
                        columns.Command(command => command.Custom("Zeige Details").Click("showDetails")).Width(100);
                        columns.Bound(p => p.Name).Filterable(filter => filter.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)).Mode(GridFilterMode.Row));
                        columns.Bound(p => p.Abteilung).Filterable(filter => filter.Cell(cell=> cell.Operator("isequalto").SuggestionOperator(FilterType.Contains)));
                        columns.Bound(p => p.Kürzel).Filterable(filter => filter.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)).Mode(GridFilterMode.Row));
                        columns.Bound(p => p.Durchwahl).Filterable(filter => filter.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)).Mode(GridFilterMode.Row));
                        columns.Bound(p => p.Status).Filterable(filter => filter.Multi(true).CheckAll(false).BindTo(new[]
                        {
                            new { Status = "Abwesend"},
                            new { Status = "Anwesend"},
                            new { Status = "Pause"},
                            new { Status = "Dienstgang"},
                            new { Status = "Home Office"}
                        })).ClientTemplate("#=templateFunction(data)#");
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)
                        .Read(read => read.Action("Phones_Read", "Home"))
                        .PageSize(50)
                        )
                    .Pageable(p => {
                        p.PageSizes(new[] { 20, 50, 100, 500 });
                    })
                    .Sortable()
                    .Filterable(filter => filter.Mode(GridFilterMode.Row))
                    )
                    
@(Html.Kendo().Window()
        .Name("Details")
        .Title("Mitarbeiterdetails")
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Width(400)
    )
<script>
    function templateFunction(item) {

        if (item.Status == "Abwesend") {
            return "<span class='Abwesend'>" + item.Status + "</span>";
        }
        else if (item.Status == "Anwesend") {
            return "<span class='Anwesend'>" + item.Status + "</span>";
        }
        else if (item.Status == "Pause") {
            return "<span class='Pause'>" + item.Status + "</span>";
        }
        else if (item.Status == "Dienstgang") {
            return "<span class='Dienstgang'>" + item.Status + "</span>";
        }
        else {
            return "<span class='HomeOffice'>" + item.Status + "</span>";
        }

        return item.Status;
    }

    $(document).ready(function () {
        var refreshId = setInterval(function () {
            //GRID REFERENCE
            var grid = $("#grid").data("kendoGrid");            
            grid.dataSource.read();
        }, 60000);

    });

    
</script>

<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= Name #</h2>
        <p><img src="https://profil.leonhardlang.at/#=MaId##=Organisation#.jpg?tag=@DateTime.Now" onerror="this.onerror=null; this.src='https://profil.leonhardlang.at/default.jpg?tag=@DateTime.Now'" alt="" width="auto" height="400" /></p>
        <em>Abeilung: #= Abteilung #</em><br>
        <em>Kürzel: #= Kürzel #</em>
        <dl>
            <dt>Durchwahl: #= Durchwahl #</dt><br>
            <dt>Status: #=templateFunction(data)# </dt>
        </dl>
    </div>
</script>

<script type="text/javascript">
    function showDetails(e) {
        e.preventDefault();

        var detailsTemplate = kendo.template($("#template").html());
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
    $(function () {
        $(".k-input").focus();
    })
    
</script>

 

    

Cheers Drago

[Petar]

Hi, Drago.

To focus the search input of the Grid, you can use the below code in the document.ready function.

$(".k-grid-search").find("input").focus();

Here is a Dojo example demonstrating the usage of the above code. 

Check the provided example and let me know if the demonstrated behavior is what you are searching for.

Regards,
Petar
Progress Telerik

[IvanDrago]

Hello Petar,

thank you very much. Thats exactly im looking for. 

 

Cheers Drago