Question

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

我不知道该如何进行。理想情况下，我想将此数据保存到我的视图模式中的列表中。这样，当用户单击保存时，我会将所有其他数据和网格数据放入控制器方法中。

我能够用剑道网格成功绑定列表并显示它。我对JavaScript，Kendo和网络编程的经验很少。如果您能指出正确的方向，示例代码将不胜感激。

$("#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处的信息。如果我正确理解了这个问题。有几种方法可以实现发布。您可以使用编辑器模板。单击“在Dojo中打开”以了解外观。

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

有了这个，您不必担心通过javascript修改数据。假设您的网格周围有一个表单元素，则在提交时会被发布。注意这里不考虑分页。另外，默认情况下，此方法可以在每次编辑后自动发布。如果您不希望这种行为，那么您将必须具有API的高级知识.....最后一条语句的正确性。在客户端处理所有数据时，API是不同的。单击“在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

要添加到数据源，请使用添加功能添加新对象。

$（'＃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包装器时，它已经知道这一点，因为您是通过提供的泛型或提供的参数为其提供了schema（type）。

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

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

正如我在另一个答案中提到的那样。使用数据源功能将其他数据添加到数据源。每次要添加时都不需要setDataSource。只是

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

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

3 个答案: