@(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>

public static IHtmlContent FilterGrid<T>(this IHtmlHelper<T> html, string Name, string Controller) where T : class
        {
            HtmlContentBuilder htmlBuilder = new HtmlContentBuilder();

            htmlBuilder.AppendHtml(html.Kendo().DataSource<T>()
                .Name("ds_" + Name)
                .Ajax(dataSource => dataSource
                        .PageSize(20)
                        .Read(read => read.Action(Name + "_Read", Controller))
                    )
            );           

            htmlBuilder.AppendHtml(html.Kendo().Grid<T>()
                .Name("g_" + Name)
                .Pageable()
                .Sortable()
                .NoRecords()
                .DataSource("ds_" + Name)
                .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                .Columns(c => {
                    c.Bound("Number").Title("Test title");
                    })
            ); 
            return htmlBuilder;
        }

function toggleModifiedRows() {

    var grid = $("#grid").data("kendoGrid");
    var Filters = [];

    var buttonRows = document.getElementById('showModifiedRows');
    var buttonText = buttonRows.value;
    if (grid.dataSource.filter() != null) {
        Filters = grid.dataSource.filter().filters;
    }

    var FilterData = [];

    console.log(buttonText);
    if (buttonText == "Show Modified Rows") {
        buttonRows.value = "Show All Rows";
        var dirtyFilter = false;
        if (Filters.length > 0) {
            for (var i = 0; i < Filters.length; i++) {
                if (Filters[i].field == "dirty") { dirtyFilter = true; }
            }
        }
        if (!dirtyFilter) { FilterData = UpdateFilters(Filters, 'dirty', 'equals', true); }
    }
    else {
        buttonRows.value = "Show Modified Rows";

        if (Filters.length > 0) {
            for (var i = 0; i < Filters.length; i++) {
                if (Filters[i].field == "dirty") {
                    Filters.splice(i, 1);
                    break;
                }
            }
        }

        FilterData = Filters;
    }
    grid.dataSource.filter(FilterData);
};

.Messages(
   builder =>
   {
      builder.DropFilesHere("Drop files here to upload");
   }
)