Show Grid Values on a form

2 posts, 0 answers
  1. Joshua
    Joshua avatar
    12 posts
    Member since:
    Jul 2019

    Posted 05 Oct 2020 Link to this post

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

  2. Eyup
    Admin
    Eyup avatar
    4083 posts

    Posted 07 Oct 2020 Link to this post

    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

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top