Telerik Kendo 网格从模板中获取行详细信息

Question

我在 .NET 项目中使用 kendo 网格和 MVC。我的网格的两列是模板，模板内有一个输入文本。这样，每次加载网格时，输入文本始终可见并可供更改。

当用户点击保存时，我需要在客户端检查网格的所有行并获取这两列的值（只有两列有模板）并获取输入框的值。所以我期望的结果是一个包含两列的列表，其中包含用户在输入框中插入的最后值，而不是原始值。

这是我的代码：

//Grid Data source
var dataSource = new kendo.data.DataSource({
    transport: {
        read: { url: "/CsmForecastRegistration/GetForecast", cache: false }
    },
    error: function (e) {
        openDialog(e.errorThrown);
    },
    batch: true,
    pageSize: 20,
    schema: {
        data: "Data",
        total: "Total",
        errors: "Errors",
        model: {
            id: "ForecastItemId",
            fields: {
                ForecastItemId: { editable: false },
                RecordId: { editable: false },
                SaleId: { editable: false },
                IsUpSell: { editable: false },
                BusinessName: { editable: false },
                HealthScore: { editable: false },
                CurrencySymbol: { editable: false },
                ForecastWeekTotalContractValue: { editable: true },
                ForecastWeekMonths: { editable: true },
                ForecastWeek12Months: { editable: false }
            }
        }
    }
});


$("#grdCsmForecast").kendoGrid({
    dataSource: dataSource,
    scrollable: true,
    dataBound: onDataBound,
    toolbar: ["excel"],
    excel: {
        allPages: true,
        fileName: "CSMForecast.xlsx"
    },
    pageable: true,
    columns: [
        { title: "", width: "80px", template: $("#comments-template").html(), attributes: { style: "text-align:center; background-color: white;" } },
        {
            title: "Contract Details",
            columns: [
                { field: "RecordId", title: "RecordId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
                { field: "SaleId", title: "SaleId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
                { field: "IsUpSell", title: "Upsell?", width: "75px", attributes: { "class": "contractDetailGridStyle" } },
                { field: "BusinessName", title: "Business Name", width: "250px", attributes: { "class": "contractDetailGridStyle"} },
                { field: "HealthScore", title: "Health Score", width: "95px", attributes: { "class": "contractDetailGridStyle"} },
                { field: "CurrencySymbol", title: "CCY", width: "50px", attributes: { "class": "contractDetailGridStyle" }  }
            ]
        },
        {
            title: "Forecast Week", 
            columns: [
                { field: "ForecastWeekTotalContractValue", title: "TCV", width: "75px", template: $("#forecast-week-tcv").html(), attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # "  },
                { field: "ForecastWeekMonths", title: "Months", width: "70px", template: $("#forecast-weekMonths").html(), attributes: { "class": "forecastWeekGridStyle" }  },
                { field: "ForecastWeek12Months", title: "12Month", width: "75px", attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " }
            ]
        }
    ]
});

和模板：

<script id="forecast-week-tcv" type="text/x-kendo-template">

    # if(IsNewContract === true ){ #
        <span>#=ForecastWeekTotalContractValue#</span>
    #}
    else{#
        <input type="text" value="#=ForecastWeekTotalContractValue#" />
    #}#

</script>

<script id="forecast-weekMonths" type="text/x-kendo-template">
    
    # if(IsNewContract === true ){ #
        <span>#=ForecastWeekMonths#</span>
    #}
    else{#
        <input type="text" value="#=ForecastWeekMonths#" />
    #}#

</script>

所以我想要一个列表并将这两个输入的所有值发送到我的 MVC 控制器：

<input type="text" value="#=ForecastWeekTotalContractValue#" />
<input type="text" value="#=ForecastWeekMonths#" />

谢谢

Answer 1

尝试这样的事情：

function getInputValues() {
    let result = [];

    $('#grid tbody tr').each((i, tr) => {
        let row = {};
        $(tr).find('input[type="text"]').each((index, input) => {
            row[(index ? "ForecastWeekTotalContractValue" : "ForecastWeekMonths")] = $(input).val();
        });
        result.push(row);
    });

    return result;
}

Demo

它只是遍历元素并添加到对象数组。

Telerik Kendo 网格从模板中获取行详细信息

Telerik Kendo grid get row details from template

javascript

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc