如何从 Kendo Grid 获取客户端数据到控制器

Question

我正在尝试获取从客户端水合到 MVC 控制器方法的 Kendo Grid 数据。我的视图包含几个单独的字段，例如姓名、出生日期等，以及我与 Kendo Grid 挂钩的表格字段。由于它是一个新操作，我在网格（和其他字段）中没有数据，用户从客户端输入它们。

我不知道该怎么做。理想情况下，我希望将此数据添加到我的视图模式中的列表中。这样当用户点击保存时，我将所有其他数据和网格数据都输入控制器方法。

我能够成功地将列表与剑道网格绑定并显示它。我在 JavaScript 和剑道以及网络编程方面的经验很少。 如果你们中的任何人能指出我正确的方向，我们将不胜感激示例代码。

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

Answer 1

根据经验，我知道他们的文档不容易浏览。似乎有文档，然后是 API。 API 通常是您一直想找到的。您需要的是来自https://docs.telerik.com/kendo-ui/api/javascript/ui/grid 的信息。如果我正确理解了这个问题。有几种方法可以实现发布。您可以使用编辑器模板。单击 Open in Dojo 以了解它的外观。

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

有了这个，您不必担心通过 javascript 修改数据。假设您的网格被一个表单元素包围，它将在提交时发布。注意这里不考虑分页。此外，默认情况下，此方法可以在每次编辑后自动发布。如果您不想要这种行为，那么您将必须具备 API 的高级知识.....对最后一条语句进行更正。在客户端处理所有数据时，API 是不同的。单击 Open in Dojo 以在客户端查看所有内容。如果您不想使用编辑器模板并想自己管理数据编辑，那么您需要使用提供的网格方法。

创建网格后。要访问网格的数据源，您需要获取数据源。

$('#departmet').data('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 函数添加新对象。

$('#departmet').data('kendoGrid').dataSource.add({ id: 2, name: 'name'});

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

对于 kendo，务必始终使用提供的方法来更改数据源，以便可以触发适当的事件以相应地更新 UI。这包括您是否需要在特定数据项上设置属性。在这种情况下，您需要对项目本身使用 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 发布它。例如，ajax jquery 函数。将您的数据作为 ajax 调用的数据传递。

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

不想闲逛。如果您需要更多帮助，请告诉我。

Answer 2

所以还不让我发表评论，所以必须添加另一个答案。在处理仅限客户端的数据时，您无需在 .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);
});

正如我在另一个答案中提到的。使用数据源函数向数据源添加附加数据。无需每次要添加时都设置数据源。只是

//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 });

Answer 3

所以经过一番努力，我想出了。但我不知道在哪里指定 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
            });