@page
@model TestProjKendoGridApi.Pages.GridModel
@{
    ViewData["Title"] = "Grid";
}
@using TestProjKendoGridApi.Model
@using Kendo.Mvc.UI

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<style>
    .k-footer-template td {
        border: none;
    }
    .k-grid .k-grid-toolbar .k-grid-add {
        float: left;
    }

    #grid .k-grid-toolbar
    {
        padding: .6em 1.3em .6em .4em;
    }
    .category-label
    {
        vertical-align: middle;
        padding-right: .5em;
    }
    #category
    {
        vertical-align: middle;
    }
    .refreshBtnContainer {
        display: inline-block;
    }
    .toolbar {
        float: right;
    }
</style>

<div class="text-center">
    <h2>Kendo UI Grid</h2>
    @(Html.Kendo().Grid<UserList>().Name("grid")
    .HtmlAttributes(new { style = "font-family: verdana,arial,sans-serif; font-size: 13px;color: #333333;border-color: #999999;" })
    .Filterable()
    .Sortable()
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Scrollable()
    .Columns(columns =>
    {
        columns.Select().Width(50);
        columns.Bound(column => column.Username).ClientFooterTemplate("<input id='dropDownList'></input>"); ;
        columns.Bound(column => column.FirstName);
        columns.Bound(column => column.LastName);
        columns.Bound(column => column.Email);
    })
    .Excel(excel => excel
    .FileName("Export.xlsx")
    .Filterable(true)
    .ProxyURL("/Grid?handler=Save")
    )
    .Events(ev => ev.DataBound("onDataBound"))
    .DataSource(ds => ds.Ajax()
            .Read(r => r.Url("/Grid?handler=Read").Data("forgeryToken"))
            .Model(m => m.Id(id => id.Username))
        .PageSize(20)
    )
    .ToolBar(toolbar =>
    {
        toolbar.ClientTemplateId("toolBarTemplate");
    })
    .Search(search => { search.Field(f => f.Username); search.Field(f => f.FirstName); search.Field(f => f.LastName); search.Field(f => f.Email); })
    .Pageable(pageable => pageable
    .PageSizes(true)
    .ButtonCount(2))
    )
</div>

<script id="toolBarTemplate" type="text/x-kendo-template">
    <text>
        <div class="refreshBtnContainer">
            <a href="\\#" class="k-pager-refresh k-link k-button k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
        </div>
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            @(Html.Kendo().DropDownList()
                .Name("categories")
                .OptionLabel("All")
                .DataTextField("CategoryName")
                .DataValueField("CategoryID")
                .AutoBind(false)
                .HtmlAttributes(new { style = "width: 150px;" })
                .DataSource(ds =>
                {
                    ds.Read("ToolbarTemplate_Categories", "Grid");
                })
                .ToClientTemplate()
            )
        </div>
    </text>
</script>

@section Scripts {
    <script>
        function forgeryToken() {
            return kendo.antiForgeryTokens();
        }
        function confirmation(Action, Name) {
            var answer = confirm("Are you sure you want to " + Action + " this account?");
            if (answer) {
                //Call Action Method in Serverside
                switch (Action) {
                    case 'Activate':
                        //call activate API
                        alert('activated');
                        break;
                    case 'Disable':
                        //call disable API
                        alert('Disabled');
                        break;
                    case 'Terminate':
                        //call Terminate API
                        alert('Terminated');
                        break;
                }
            } else {
                $("#dropDownList").prop('selectedIndex', 0); //not working
            }
        }
        function onDataBound() {
            $("#dropDownList").kendoDropDownList({
                dataSource: ["Activate", "Disable", "Terminate"],
                optionLabel: "Select Action...",
                change: change
            });
        }
        function change() {
            var grid = $("#grid").data("kendoGrid");
            var selectedItem = grid.select();
            var action = $("#dropDownList").val();
            if (action.length) {
                selectedItem.each(function () {
                    var fname = $(this).attr("data-uid"); //selectedItem..
                    confirmation(action, fname);
                    //grid.removeRow(this)
                })
            }
        }
    </script>
}