Question

I have the following code snippet:

@(Html.Kendo().ListView<ContactViewModel>()
    .Name("PortalInfo_NonAddedJobContacts")
    .TagName("div")
    .BindTo(Model.NonAddedContacts)
    .ClientTemplateId("nonAddedJobContactsTemplate")
    .DataSource(ds => ds
        .Model(model => 
        {
            model.Id(x => x.Id);
            model.Field(x => x.ContactType);
            model.Field(x => x.DisplayName);
        })
    )
    .HtmlAttributes(new { style = "border: none;" })
)

I would think that by telling the control that I only want the Id, ContactType and DisplayName that Kendo would be smart enough to only send across those 3 field when generating the control. However, when I look at fiddler, it's using the entire ContactViewModel, which is extremely bloated with a lot of information that I don't need.

How can I get Kendo to ONLY create the 3 fields that I need?

Wall of text Html that Kendo created:

jQuery(function(){jQuery("#PortalInfo_NonAddedJobContacts").kendoListView({"dataSource":{"type":"aspnetmvc-ajax","transport":{"read":{"url":""},"prefix":""},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Id","fields":{"ContactType":{"type":"string"},"ActivityStatus":{"type":"string"},"StatusDisplay":{"type":"string"},"Addresses":{"type":"object"},"Phones":{"type":"object"},"Emails":{"type":"object"},"Deleted":{"type":"boolean"},"InsuranceCompanyContactId":{"type":"number","defaultValue":null},"ParentContactTypeId":{"type":"number","defaultValue":null},"MappedContactId":{"type":"number","defaultValue":null},"MarketingRep":{"type":"string"},"InsuranceCompanyName":{"type":"string"},"PrimaryPhone":{"editable":false,"type":"string"},"PrimaryPhoneNumbersOnly":{"editable":false,"type":"string"},"HomePhone":{"editable":false,"type":"string"},"HomePhoneNumbersOnly":{"editable":false,"type":"string"},"OfficePhone":{"editable":false,"type":"string"},"OfficePhoneNumbersOnly":{"editable":false,"type":"string"},"CellPhone":{"editable":false,"type":"string"},"CellPhoneNumbersOnly":{"editable":false,"type":"string"},"OtherPhone":{"editable":false,"type":"string"},"Fax":{"editable":false,"type":"string"},"FaxNumbersOnly":{"editable":false,"type":"string"},"PrimaryEmail":{"type":"string"},"PrimaryStreet1":{"type":"string"},"PrimaryStreet2":{"type":"string"},"PrimaryCity":{"type":"string"},"PrimaryState":{"type":"string"},"PrimaryPostal":{"type":"string"},"PrimaryAddressFormatted":{"type":"string"},"GoogleMapHtml":{"type":"string"},"Tags":{"type":"object"},"LastActivityDate":{"type":"date","defaultValue":null},"IsEditable":{"type":"boolean"},"Id":{"type":"number"},"CompanyId":{"type":"number","defaultValue":null},"CompanyPerson":{"type":"string"},"ContactTypeId":{"type":"number"},"ContactTypeName":{"type":"string"},"TypePath":{"type":"string"},"FirstName":{"type":"string"},"LastName":{"type":"string"},"CompanyName":{"type":"string"},"DisplayName":{"type":"string"},"AddressID":{"type":"number","defaultValue":null},"Street1":{"type":"string"},"Street2":{"type":"string"},"City":{"type":"string"},"State":{"type":"string"},"PostalCode":{"type":"string"},"Chalkboard":{"type":"string"},"Title":{"type":"string"},"InsuranceCompanyId":{"type":"number","defaultValue":null},"MarketingRepId":{"type":"number","defaultValue":null},"Website":{"type":"string"},"Inactive":{"type":"boolean"},"FullName":{"editable":false,"type":"string"},"Buckets":{"type":"object"},"Activities":{"type":"object"},"Rois":{"type":"object"},"FormattedDateUpdated":{"type":"string"},"TotalLeads":{"type":"number"},"TotalReturn":{"type":"number"},"TotalInvested":{"type":"number"},"ROI":{"editable":false,"type":"number"},"ROIPercentage":{"editable":false,"type":"number"}}}},"data":{"Data":[{"ContactType":"Property Management Company","ActivityStatus":null,"StatusDisplay":null,"Addresses":[{"Id":1975,"AddressTypeId":2,"AddressType":"Business","Street1":"2122 W. Lone Cactus Dr., Suite 5 ","Street2":null,"City":"Phoenix","State":"AZ","PostalCode":"85027","FormattedAddress":"2122 W. Lone Cactus Dr., Suite 5  Phoenix, AZ 85027"}],"Phones":[{"Id":1329,"PhoneTypeId":4,"PhoneType":"Work","PhoneTypeDisplay":"W:","Number":"602-862-9307","NumberOnly":"6028629307"}],"Emails":[],"Deleted":false,"InsuranceCompanyContactId":null,"ParentContactTypeId":null,"MappedContactId":null,"MarketingRep":"","InsuranceCompanyName":"","PrimaryPhone":"602-862-9307","PrimaryPhoneNumbersOnly":"6028629307","HomePhone":"","HomePhoneNumbersOnly":"","OfficePhone":"602-862-9307","OfficePhoneNumbersOnly":"6028629307","CellPhone":"","CellPhoneNumbersOnly":"","OtherPhone":"","Fax":"","FaxNumbersOnly":"","PrimaryEmail":"","PrimaryStreet1":"2122 W. Lone Cactus Dr., Suite 5 ","PrimaryStreet2":null,"PrimaryCity":"Phoenix","PrimaryState":"AZ","PrimaryPostal":"85027","PrimaryAddressFormatted":"2122 W. Lone Cactus Dr., Suite 5  Phoenix, AZ 85027","GoogleMapHtml":"2122+W.+Lone+Cactus+Dr,+Suite+5+,+Phoenix,+AZ,+85027","Tags":null,"LastActivityDate":null,"IsEditable":true,"Id":2052,"CompanyId":null,"CompanyPerson":"Company","ContactTypeId":32,"ContactTypeName":null,"TypePath":null,"FirstName":null,"LastName":null,"CompanyName":"AMPM Water Damage Restoration","DisplayName":"AMPM Water Damage 
Was it helpful?

Solution

Kendo is going to create the ListView control based on whatever the Model is you are passing to it.

If you want the dataset to be more compact, you're going to need to provide and bind to a more specialized ViewModel.

Create a class along the lines of:

public class ContactListViewModel
{
    public int Id { get; set; }
    public string ContactType { get; set; }
    public string DisplayName { get; set; }
}

Then have your controller method return a collection of ContactListViewModel and bind your ListView to that.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top