Я хочу перенести одну целую строку из одной сетки в другую, в KendoUI, используя AngularJS 1..7, а не Jquery и Javascript - PullRequest
Новая
       39

Я хочу перенести одну целую строку из одной сетки в другую, в KendoUI, используя AngularJS 1..7, а не Jquery и Javascript

0 голосов
/ 01 марта 2019

Вот мой HTML 

'<html>'
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.mobile.min.css" />-->
<link rel="stylesheet" href="app/css/kendo.silver.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />

<script src="http://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<link href="../../../css/site.css" rel="stylesheet" />


     <style>
         * {
             font - family: "Verdana", sans-serif;
        font-size: 10pt;
    }

    #panels {
             display: table-row;
    }

    #grid1, #grid2 {
             width: 400px;
        display: table-cell;
    }

    #commands {
             text - align: center;
        width: 50px;
        vertical-align: middle;
        display: table-cell;
    }

        #commands div {
             padding: 5px;
        }

            #commands div a {
             width: 35px;
                text-align: center;
            }

</style>
</head>
<body>

 <H1> Shutter Component </H1>
<div id="panels">
 <kendo-grid id="grid1" ng-model="$ctrl.grid1" k- 
   options="$ctrl.mainGridOptions1"> 
 </kendo-grid>
<div id="commands">
<div><button id="$ctrl.copySelectedToGrid2" ng-click="$ctrl.sendtoGrid2()" class="k-button">
&gt;
</button></div>
<div><button id="$ctrl.copySelectedToGrid1" ng-click="$ctrl.sendtoGrid1()" class="k-button">
&lt;
</button>
</div>
</div>
<kendo-grid id="grid2" ng-model="$ctrl.grid2" k-options="$ctrl.mainGridOptions2"> 
</kendo-grid>
</div>
<div>
 <input type="button" ng-click="$ctrl.check()" value="ok" />
</div>
</body>
'</html>'

Мой файл Javascript: 

angular
    .module("app")
    .component("adconversion", {
        templateUrl: "/app/views/Admin/Codes/adconversion.html",
        bindings: {},
        controller: adController

    });

adController.$inject = ["$scope"];

function adController($scope)
 {

    var vm = this;

     var ds1 = {
        data: [{ FirstName: "Subhro", LastName: "Chatterjee" }, { FirstName: "Subham", LastName: "Chatterjee" }],
        pageSize: 10,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: 'number', editable: true },
                    FirstName: { type: 'string', editable: true },
                    LastName: { type: 'string', editable: true }
                }
            }
        }
    };

    var ds2 = {
        data: [{ FirstName: "Shriyansh", LastName: "Chatterjee" }, { FirstName: "Lavie", LastName: "Chatterjee" }],
        pageSize: 10,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: 'number', editable: true },
                    FirstName: { type: 'string', editable: true },
                    LastName: { type: 'string', editable: true }
                }
            }
        }
    };
    init();

    function init() 
{



        vm.mainGridOptions1 = 
{

            dataSource: ds1,
            change: onchange,

            selectable: "row",

            columns: [
                { field: "FirstName", width: 90, title: "First Name" },
                { field: "LastName", width: 90, title: "Last Name" }
            ]


        };
        vm.mainGridOptions2 = 
{

            dataSource: ds2,


            selectable: "multiple",

            columns: [
                { field: "FirstName", width: 90, title: "First Name" },
                { field: "LastName", width: 90, title: "Last Name" }
            ]


        };


    };

    vm.check = function () 
 {
        alert('Hi');
 }

    vm.sendtoGrid2 = function (idx, elem) 
{
 moveTo(vm.mainGridOptions1, vm.mainGridOptions2);
}

    vm.sendtoGrid1 = function (idx, elem) 
{
        moveTo(vm.mainGridOptions2, vm.mainGridOptions1);
}

    function moveTo(from, to) 
{

        var selected = $.map(this.select(), function (item) {

            return $(item).text();

        });

        if (selected.length > 0) 
{
            var items = [];
            $.each(selected, function (idx, elem) {
                items.push(from.dataItem(elem));
            });
            var fromDS = from.dataSource;
            var toDS = to.dataSource;
            $.each(items, function (idx, elem) {
                toDS.add({ FirstName: elem.FirstName, LastName: elem.LastName });
                fromDS.remove(elem);
            });
            toDS.sync();
            fromDS.sync();
        }
    }

    function onChange(arg) 
{
        alert("hi");
        var selected = $.map(this.select(), function (item) {
            var aa = $(item).text();
            alert($(item).text());

            return $(item).text();

        });

        console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
    }


}

Проблемы: 1.Вариант, выбранный в файле js, не показывает значение при отладке.2. .add () показывает ошибку .add не является функцией в консоли браузера.3. .remove () также показывает ту же ошибку.

Вот сетка, которая выглядит следующим образом. введите описание изображения здесь

Пожалуйста, помогите мне с этим.Я не могу найти способ перенести всю строку одним нажатием кнопки на другую. Использование стандартного кодирования js 1.7.

Было бы более полезно использовать поршень для того же реализованного. Заранее спасибо..

...