This is a migrated thread and some comments may be shown as answers.

problem populating composite columnwith schema parse function

2 Answers 132 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 14 Aug 2013, 12:11 AM
I'm evaluating Kendo web to use in hosting CRUD functionality in a DNN razor module - connecting to jsonp data.  I'm doing my initial page tests using an ASP.Net Web Site (Razor v2), but will port to a DNN razor module after the proof-of-concept.  I've written a jsonp Get() webservice and have successfully displayed the results in a KendoUI grid.  Now I am trying to display a composite column in the grid, populated with a concatenation of multiple data elements (Name: first, middle, last) using the schema parse function. So far, I haven't succeeded, and when I debug the Javascript in Firefox, it appears that the parse function isn't being called.
Any help would be appreciated.  Using the code below, the grid displays and is populated with data for all columns except the ContactName column.

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "ServiceProvidersAgencyContacts";
}

<h2>ServiceProvidersAgencyContacts</h2>

@section Styles{
    <link href="~/Kendo/2013.2.716/Styles/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Kendo/2013.2.716/Styles/kendo.default.min.css" rel="stylesheet" />
}

<div id="example" class="k-content">
    <div id="grid"></div>
</div>

@section Scripts{
    <script src="~/kendo/2013.2.716/Scripts/kendo.web.min.js"></script>
    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr>
            <td class="contactName">
                <span class="description">Name : #: LasttName#, #: First Name#</span>
                <span class="title">#: Title #</span>
            </td>
        </tr>
    </script>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "http://CSDWebServices/ServiceProvidersRestWS/agencycontacts/60001",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number" },
                                AgencyCode: { type: "string" },
                                FirstName: { type: "string" },
                                MiddleName: { type: "string" },
                                LastName: { type: "string" },
                                Suffix: { type: "string" },
                                TitleId: { type: "number" },
                                Email: { type: "string" },
                                Phone: { type: "string" },
                                IsContactEnergy: { type: "Boolean" },
                                IsContactCSBG: { type: "Boolean" },
                                Title: { type: "string" },
                                ContactName: { type: "string" }
                            },
                            parse: function (data) {
                                $each(data.items, function (index, value) {
                                    item.value.ContactName = kendo.format("{1} {2} {3} {4}",
                                        value.FirstName,
                                        value.MiddleName,
                                        value.LastName,
                                        value.Suffix);
                                });
                                return data;
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: false,
                    serverFiltering: true,
                    serverSorting: false
                },
                height: 430,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [
                    {
                        field: "ContactName",
                        title: "Contact Name",
                        width: 30
                    }, {
                        field: "FirstName",
                        title: "First Name",
                        width: 10
                    }, {
                        field: "LastName",
                        title: "Last Name",
                        width: 10
                    }, {
                        field: "Suffix",
                        title: "Suffix",
                        width: 10
                    }, {
                        field: "Email",
                        title: "Email",
                        width: 10
                    }, {
                        field: "Phone",
                        title: "Phone",
                        width: 10
                    }
                ]
            });
        });
    </script>
}

2 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 14 Aug 2013, 10:24 AM
Hi Mark,

 The parse function should be one level up - right now it is in the model configuration. Please try the following:

dataSource: {
    transport: {
        read: {
            dataType: "jsonp"
        }
    },
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                AgencyCode: { type: "string" },
                FirstName: { type: "string" },
                MiddleName: { type: "string" },
                LastName: { type: "string" },
                Suffix: { type: "string" },
                TitleId: { type: "number" },
                Email: { type: "string" },
                Phone: { type: "string" },
                IsContactEnergy: { type: "Boolean" },
                IsContactCSBG: { type: "Boolean" },
                Title: { type: "string" },
                ContactName: { type: "string" }
            }                         
        },
        parse: function (data) {
                $each(data.items, function (index, value) {
                    item.value.ContactName = kendo.format("{1} {2} {3} {4}",
                        value.FirstName,
                        value.MiddleName,
                        value.LastName,
                        value.Suffix);
                });
                return data;
        }
    },
    pageSize: 20,
    serverPaging: false,
    serverFiltering: true,
    serverSorting: false
}

Also you seem to be using an undefined variable "item" in the $.each function (which is spelled $each).

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
answered on 15 Aug 2013, 03:19 AM
Thank you... that works.
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Mark
Top achievements
Rank 1
Share this question
or