Telerik Kendo grid получает подробности строки из шаблона - PullRequest
Новая
       9

Telerik Kendo grid получает подробности строки из шаблона

0 голосов
/ 12 июня 2018

Я использую сетку кендо с MVC в проекте .NET.Два столбца моей сетки - это шаблоны, и в них есть входной текст внутри шаблона.Таким образом, каждый раз, когда сетка загружает, входные тексты всегда видны и доступны для изменения.

Когда пользователь нажимает кнопку Сохранить, мне нужно проверить все строки сетки на стороне клиента и получить значенияэти два столбца (только два имеют шаблоны) и получают значения поля ввода.Таким образом, ожидаемый результат - это список с двумя столбцами, в которые пользователь вставил последние значения в поля ввода, а не исходное значение.

Вот мой код: 

//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#" />

Спасибо

1 Ответ

0 голосов
/ 12 июня 2018

Попробуйте что-то вроде этого: 

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

Демо

Он просто перебирает элементы и добавляет к массиву объектов.

...