Show Grid Values on a form

[Joshua]

Hello,

I have this kendo jquery grid, and I want to display the selected row values to the form above. How can I best achieve that?

and secondly, I want to send the selected row(s) to a controller for processing...

 

index.vbhtml:
    <div><input id="TxtLoanCodeDescription" /></div>
    <div id="grid"></div>
<script src="~/Scripts/loanInstallments.js"></script>

<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                data: installments,
                schema: {
                    model: {
                        fields: {
                            InstallmentNo: { type: "string" },
                            InstallmentPeriod: { type: "string" },
                            InstallmentMonth: { type: "string" },
                            Principal: { type: "string" },
                            PrincipalRepaid: { type: "string" },
                            PrincipalBalance: { type: "string" },
                            Interest: { type: "string" },
                            InterestRepaid: { type: "string" },
                            InterestBalance: { type: "string" }
                        }
                    }
                },
                pageSize: 20
            },
            //toolbar: ["search"],
            height: 155,
            scrollable: true,
            selectable: "multiple",
            sortable: false,
            filterable: false,
            pageable: false,
            columns: [
                { field: "InstallmentNo", title: "Install", width: "50px" },
                { field: "InstallmentPeriod", title: "Period" },
                { field: "InstallmentMonth", title: "Month" },
                { field: "Principal", title: "Principal" },
                { field: "PrincipalRepaid", title: "Principal Repaid" },
                { field: "PrincipalBalance", title: "Principal Balance" },
                { field: "Interest", title: "Interest" },
                { field: "InterestRepaid", title: "Interest Repaid" },
                { field: "InterestBalance", title: "Interest Balance" }
            ]
        });
    });
</script>

 

 

loanInstallments.js

 

var installments = [
  {
    InstallmentNo: "1",
    InstallmentPeriod: "June 2020",
    InstallmentMonth: "June",
    Principal: "10, 000.00",
    PrincipalRepaid: "0.00",
    PrincipalBalance: "10, 000.00",
    Interest: "0.00",
    InterestRepaid: "0.00",
    InterestBalance: "0.00"
    },
    {
        InstallmentNo: "2",
        InstallmentPeriod: "June 2020",
        InstallmentMonth: "June",
        Principal: "10, 000.00",
        PrincipalRepaid: "0.00",
        PrincipalBalance: "10, 000.00",
        Interest: "0.00",
        InterestRepaid: "0.00",
        InterestBalance: "0.00"
    },
    {
        InstallmentNo: "3",
        InstallmentPeriod: "June 2020",
        InstallmentMonth: "June",
        Principal: "10, 000.00",
        PrincipalRepaid: "0.00",
        PrincipalBalance: "10, 000.00",
        Interest: "0.00",
        InterestRepaid: "0.00",
        InterestBalance: "0.00"
    }, {
    InstallmentNo: "4",
    InstallmentPeriod: "June 2020",
    InstallmentMonth: "June",
    Principal: "10, 000.00",
    PrincipalRepaid: "0.00",
    PrincipalBalance: "10, 000.00",
    Interest: "0.00",
    InterestRepaid: "0.00",
    InterestBalance: "0.00"
}];

[Eyup]

Hello Joshua,

 

Generally, you can acquire this info using the following collection:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/selectedkeynames?_ga=2.147711671.1802552084.1601829178-2062299870.1589328851

And send it to the Controller Action using the ajax method:
https://api.jquery.com/jquery.ajax/

In your case, the following sample could be very helpful:
https://docs.telerik.com/kendo-ui/knowledge-base/grid-submit-with-form

You can also check this one:
https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/submit-grid-with-form

I hope these solutions will prove suitable for your project.

 

Regards,
Eyup
Progress Telerik