Kendo JQuery Grid data from Controller

[Joshua]

<div id="grid"></div>

<script>
    function LoadGrid() {
        var Installments = $("#TxtInstallments").val();
        var LoanAmount = $("#TxtLoanAmount").val();
        var OutStandingInstallments = $("#TxtOutStandingInstallments").val();
        var LoanFormula = $("#TxtLoanCodeFormula").val();
        var LoanInterestRate = $("#TxtLoanInterestRate").val();
        var DeductionStartPeriod = $("#TxtDeductionStartPeriod").val();
        var DeductionStartYear = $("#TxtDeductionStartYear").val();

        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                         read: {
                            data: { Installments: Installments, LoanAmount: LoanAmount, OutStandingInstallments: OutStandingInstallments, LoanFormula: LoanFormula, LoanInterestRate: LoanInterestRate, DeductionStartPeriod: DeductionStartPeriod, DeductionStartYear: DeductionStartYear },
                            dataType: "json",
                            url: '@Url.Action("InstallmentDisplay", "SmartWebPortal")',
                         }
                    },
                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,
            sortable: false,
            filterable: false,
            pageable: false,
            selectable: "multiple, row",
            persistSelection: true,
            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>

 

Controller:

Public Function InstallmentDisplay() As ActionResult

    
        Return Json(installmentsJson, JsonRequestBehavior.AllowGet)
End Function

 

the function returns the following string:

 

"{""Installments"":{""Installment"":[{""InstallmentNo"":{""#cdata-section"":""1""},""InstallmentPeriod"":{""#cdata-section"":""11/2020""},""InstallmentMonth"":{""#cdata-section"":""May 2020""},""Principal"":{""#cdata-section"":""25,000.00""},""Interest"":{""#cdata-section"":""250.00""},""PrincipalRepaid"":{""#cdata-section"":""0.00""},""InterestRepaid"":{""#cdata-section"":""0.00""},""Period"":{""#cdata-section"":""0""},""Year"":{""#cdata-section"":""0""},""PrincipalBalance"":{""#cdata-section"":""25,000.00""},""InterestBalance"":{""#cdata-section"":""250.00""}},{""InstallmentNo"":{""#cdata-section"":""2""},""InstallmentPeriod"":{""#cdata-section"":""12/2020""},""InstallmentMonth"":{""#cdata-section"":""June 2020""},""Principal"":{""#cdata-section"":""25,000.00""},""Interest"":{""#cdata-section"":""125.00""},""PrincipalRepaid"":{""#cdata-section"":""0.00""},""InterestRepaid"":{""#cdata-section"":""0.00""},""Period"":{""#cdata-section"":""0""},""Year"":{""#cdata-section"":""0""},""PrincipalBalance"":{""#cdata-section"":""25,000.00""},""InterestBalance"":{""#cdata-section"":""125.00""}}],""Rows"":{""Returned"":""2""}}}"

 

But am not able to assign the jquery object to the kendo grid...

[Joshua]

Edit:

the installmentsJson has data converted from an xml string... the data comes as expected but the challenge is, I cannot display it in my datagrid

 

Public Function InstallmentDisplay() As ActionResult
        installmentsJson = JsonConvert.SerializeXmlNode(xmlDoc)
        Return Json(installmentsJson, JsonRequestBehavior.AllowGet)
End Function

[Joshua]

Edit 2: Much clear json data:

 

"{""Installments"":{
    ""Installment"":[{
        ""InstallmentNo"":{""#cdata-section"":""1""},
        ""InstallmentPeriod"":{""#cdata-section"":""11/2020""},
        ""InstallmentMonth"":{""#cdata-section"":""May 2020""},
        ""Principal"":{""#cdata-section"":""25,000.00""},
        ""Interest"":{""#cdata-section"":""250.00""},
        ""PrincipalRepaid"":{""#cdata-section"":""0.00""},
        ""InterestRepaid"":{""#cdata-section"":""0.00""},
        ""Period"":{""#cdata-section"":""0""},
        ""Year"":{""#cdata-section"":""0""},
        ""PrincipalBalance"":{""#cdata-section"":""25,000.00""},
        ""InterestBalance"":{""#cdata-section"":""250.00""
    }},{
        ""InstallmentNo"":{""#cdata-section"":""2""},
        ""InstallmentPeriod"":{""#cdata-section"":""12/2020""},
        ""InstallmentMonth"":{""#cdata-section"":""June 2020""},
        ""Principal"":{""#cdata-section"":""25,000.00""},
        ""Interest"":{""#cdata-section"":""125.00""},
        ""PrincipalRepaid"":{""#cdata-section"":""0.00""},
        ""InterestRepaid"":{""#cdata-section"":""0.00""},
        ""Period"":{""#cdata-section"":""0""},
        ""Year"":{""#cdata-section"":""0""},
        ""PrincipalBalance"":{""#cdata-section"":""25,000.00""},
        ""InterestBalance"":{""#cdata-section"":""125.00""
    }}],
    ""Rows"":{""Returned"":""2""}}}"

[Nikolay]

Hello Joshua,

Thank you for sharing the data and the Grid declaration.

Please note the returned data must be in a valid json format. The provided data seems to have multiple double quotes that are not allowed. Please refer to the following link where the json can be validated.

• https://jsonlint.com/

Additionally, I noticed the data is assigned to a key-value Installments, thus, this needs to be specified in the dataSource.schema via the schema.data property.

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema#schemadata

For example:

 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" }
                            }
                        },
                        data: "Installments" // "Installment" hold the data
                },

Below I am posting a runnable Dojo demo demonstrating how to bind and display similar data to a Kendo UI Grid.

• https://dojo.telerik.com/irofOJan

Regards,
Nikolay
Progress Telerik