Как передать данные со стороны клиента из Kendo Grid в контроллер - PullRequest
Новая
       17

Как передать данные со стороны клиента из Kendo Grid в контроллер

1 голос
/ 29 мая 2019

Я пытаюсь получить данные Kendo Grid, которые гидратированы со стороны клиента, в метод контроллера MVC.Мое представление содержит несколько отдельных полей, таких как имя, дата рождения и т. Д. И табличное поле, которое я подключил с помощью сетки кендо.Поскольку это новая операция, у меня нет данных в сетке (и других полях), и пользователь вводит их со стороны клиента.

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

Я могу успешно связать список с сеткой кендо и отобразить его.У меня очень мало опыта работы с JavaScript, кендо и веб-программированием.Если кто-нибудь из вас укажет мне правильное направление, пример кода будет с благодарностью. 

$("#departmet").kendoGrid({
                dataSource: dataSource,
                height: 250,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    "DepartmentName",
                    "SubDivision"
                ]
            });

Ответы [ 3 ]

1 голос
/ 30 мая 2019

ТАК не позволю мне комментировать, поэтому придется добавить еще один ответ. Вам не нужно будет определять источник данных в коде .NET при работе только с данными клиента. Просто используйте это. 

.DataSource(dataSource => dataSource        
    .Ajax()
    .ServerOperation(false)        
)

Если у вас будут данные, поступающие из бэкэнда, вам нужно использовать конструктор без универсального шаблона и передать объект, иначе вы сохраните то, что имеете. 

Html.Kendo().Grid(Model.MyList)

Однако, если вы предварительно обрабатываете данные клиента на экране, которые вы хотите инициализировать, вам нужно будет сделать это по готовности. Не беспокойтесь о части схемы источника данных. Он уже знает это, когда вы использовали оболочку .NET MVC, потому что вы дали ей схему (тип) с помощью универсального или предоставленного параметра. 

var initialDS= new kendo.data.DataSource({
    data: [
        { ActionName: "Some Name", ActionType: "Some Type" }
    ]
});

$(document).ready(function () {
    $('#docworkflow').data('kendoGrid').setDataSource(initialDS);
});

Как я уже упоминал в другом ответе. Используйте функции источника данных для добавления дополнительных данных в источник данных. Нет необходимости устанавливать setDataSource каждый раз, когда вы хотите добавить. Just 

//Assuming you have 2 inputs on the screen the user is entering info into 
var nameEntry = $('#action-name').val();
var typeEntry = $('#action-type').val();
$('#docworkflow').data('kendoGrid').dataSource.add({ ActionName: nameEntry , ActionType: typeEntry });
1 голос
/ 29 мая 2019

По своему опыту я знаю, что с их документацией нелегко ориентироваться. Кажется, есть документация, а затем API. API - это то, что вы всегда захотите найти. Вам понадобится информация отсюда https://docs.telerik.com/kendo-ui/api/javascript/ui/grid. Если я правильно понял вопрос. Есть несколько способов добиться публикации. Вы можете использовать шаблоны редактора. Нажмите Открыть в Dojo, чтобы понять, как это выглядит.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.template

При этом вам не нужно беспокоиться об изменении данных с помощью javascript. Предполагая, что ваша сетка окружена элементом формы, она будет опубликована после отправки. Примечание подкачки здесь не учитывается. Также этот метод по умолчанию может автоматически публиковать после каждого редактирования. Если вы не хотите такого поведения, то вам необходимо иметь расширенные знания API ... Исправление в последнем утверждении. API-интерфейс отличается при работе с данными на стороне клиента. Нажмите Открыть в Dojo, чтобы увидеть все это на стороне клиента. Если вы не хотите использовать шаблоны редактора и хотите самостоятельно управлять редактированием данных, вам нужно использовать предоставленные методы сетки.

Как только вы создали свою сетку. Для доступа к источнику данных сетки вам потребуется получить источник данных.

$ ( '# departmet') данные ( 'kendoGrid') DataSource;..

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource

Если вам нужно использовать другой источник данных (или изменить его), вы можете использовать метод setDataSource ниже (функция сетки).

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setdatasource

Чтобы добавить к источнику данных, используйте функцию add для добавления нового объекта.

$ ('#partmet'). Data ('kendoGrid'). DataSource.add ({id: 2, name: 'name'});

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/add

Важно, чтобы в kendo ВСЕГДА использовались предоставленные методы для изменения источника данных, чтобы соответствующие события могли запускаться для соответствующего обновления пользовательского интерфейса. Это включает в себя, если вам нужно установить свойство для конкретного элемента данных. В этом случае вам нужно использовать метод set для самого элемента.

После того, как вы закончите изменять свои данные. В javascript получите данные и создайте элементы DOM в форме 

//JQuery sudo code example
var data = $("#departmet").data("kendoGrid").dataSource.data();
var dataLen = data.length;
var myForm = $('#my-form'); //Already within DOM
for (var i = 0; i < dataLen; i++) {
    var item = data[i];
    var idEl = $('<input type="hidden" name="userData[' + i + '].id" />');
    idEl.val(item.id);
    var nameEl = $('<input type="hidden" name="userData[' + i + '].name" />');
    nameEl.val(item.name);
    myForm.append(idEl);
    myForm.append(nameEl);
}

myForm.submit();

Предполагается, что ваша функция контроллера (??) на бэкэнде ожидает массив объектов с именем свойства userData.

Кроме того, вы можете опубликовать его через ajax. Например, функция jjery ajax. Передавая ваши данные как данные вызова ajax.

http://api.jquery.com/jquery.ajax/

Не хочу бродить. Дайте мне знать, если вам нужна дополнительная помощь.

0 голосов
/ 29 мая 2019

Итак, после некоторых усилий я придумал.Но я не знаю, где указать данные в HTML-код.Возможно ли так? 

@(Html.Kendo().Grid <DockData.Action> ()
    .Name("docworkflow")
    .Columns(columns =>
     {
        columns.Bound(e => e.ActionName);
        columns.Bound(e => e.ActionType);
     }).DataSource( **How do I load a script variable here***)


//This script variable should be fed to the above code. 
This variable is populatedwhen the user adds data  from the UI which works fine. 

var dataSource = new kendo.data.DataSource({
                data: result,
                schema: {
                    model: {
                        fields: {
                            ActionName: { type: "string" },
                            ActionType: { type: "string" }

                        }
                    }
                },
                pageSize: 20
            });
...