Telerik Kendo grid get row details from template

Question

I am using kendo grid with MVC in a .NET project. Two columns of my grid are templates and those have an input text inside of the template. That way every time the grid loads the input texts are always visible and available for change.

When the user clicks on save, I need to check all the rows of the grid, at client side and get the values of those two columns (the only two have templates) and get the values of the input box. So the result I am expecting is a list with two columns that have the last values inserted by the user in the input boxes and not the original value.

Here is my code:

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

And the templates:

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

So I would like to have a list and send to my MVC the controller all the values of these two inputs:

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

Thanks

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2018-06-12T14:22:08

Try something like this:

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

It just iterates over the elements and adds to an array of objects.

Telerik Kendo grid get row details from template

1 Answers