derp

@using FDT.Excellence.Domain.Models
@using FDT.Excellence.Resources.Helpers
@using FDT.Excellence.Web.Helpers


@*@(Html.Kendo().TreeView()
        .Name("Treeview")
        .DragAndDrop(true)
        .TemplateId("treeview-template")
        .DataTextField("Name")
            .DataSource(dataSource => dataSource
                .Model(m => m
                        .Id("Id")
                        .Children("Children")
                        .HasChildren("HasChildren")
                    )
                    .Read(read => read.Action(MVC.ProductGroup.ProductGroup.ActionNames.ProductGroup2_Read, MVC.ProductGroup.ProductGroup.Name)
                )
            )
        .ExpandAll(true)
)*@
@*<button id="btn">qweqwe</button>*@
<body>
    <div id="treeview">


        @*<script id="treeview-template" type="text/kendou-ui-template">
                <span id="name">#: item.Name#</span>
                <span>#: item.Number#</span>
                <span>#: item.IsActive#</span>
                <button><span class='k-icon k-edit' /></button>
            </script>*@

        <script id="editTemplate" type="text/x-kendo-template">
            <label>Text: <input class="k-textbox" value="#= node.Number #" /></label>
            <button class="k-button k-primary">Save</button>
        </script>

        <script>
            var editTemlate = kendo.template($("treeview-template").html);
            var jsonData = (function () {
                var json = null;
                $.ajax({
                    'async': false,
                    'global': false,
                    'url': "http://localhost/FDT.Excellence.Web/ProductGroup/ProductGroup/ProductGroup2_Read",
                    'dataType': "json",
                    'success': function (data) {
                        json = data;
                    }
                });
                return json;
            })();
            console.log(jsonData);

            // only async
            //$.getJSON('http://localhost/FDT.Excellence.Web/ProductGroup/ProductGroup/ProductGroup2_Read', function (data) {
            //    //console.log(data);
            //}); // close getJSON


            var dataSource = new kendo.data.HierarchicalDataSource({
                data: jsonData,
                schema: {
                    model: {
                        hasChildren: "HasChildren",
                        children: "Children"
                    }
                }
            });

            var editTemplate = kendo.template($("#editTemplate").html());

            var treeview = $("#treeview").kendoTreeView({
                dragAndDrop: true,
                dataSource: dataSource,
                template: "<span>#: item.Name#</span> <span>#: item.Number#</span> <span>#: item.IsActive#</span><button><span class='k-icon k-edit' /></button>"
            })
            .on("click", "button", function (e) {

                e.preventDefault();
                var node = $("#treeview").getKendoTreeView().dataItem(e.currentTarget);
                $("<div />")
                .html(editTemplate({ node: node }))
                .appendTo("body")
                .kendoWindow({
                    modal: true,
                    visible: false,
                    deactivate: function () {
                        this.destroy();
                    }
                })
                .on("click", ".k-primary", function (e) {
                    e.preventDefault();

                    var dialog = $(e.currentTarget).closest("[data-role=window]").getKendoWindow();
                    var textbox = dialog.element.find(".k-textbox");

                    console.log("Textbox värdet: "+textbox.val());
                    node.set("Number", textbox.val());
                    console.log("Uppdaterad textbox: " + textbox.val());
                    jsonData.
                    dialog.close();
                })
                .getKendoWindow().center().open();
            }); // on(click,button)

        </script>

    </div>
</body>


@*<div id="treelist" />

    <script>
        var dataSource = new kendo.data.TreeListDataSource({
            data: [{ name: "namn1" }, { name: "namn2" }]
        });

        $("#treelist").kendoTreeList({
            columns: [{ field: "name", title: "Name" }, { field: "blabla", title: "BLABLA" }],
            editable: {mode:"inline"},
            dataSource: dataSource
        });

    </script>*@


@*@(Html.Kendo().Window()
        .Name("BCDetailsDialog")
            .Title(this.GetString(ResourceHelper.GetResource(ResourceBusinessContactKey.ListViewDetailsWindow)))
            .Content(this.GetHtmlString(ResourceHelper.GetResource(ResourceBusinessContactKey.ListViewDetailsWindowLoading)).ToString())
        .Visible(false)
        .Draggable()
                .Events(e => e.Refresh("BusinessContacts.InitializeKendoDialog"))
    )*@

@section Scripts {
    @Scripts.Render("~/Scripts/Pages/BusinessContacts.js");
}