HeaderPath property is added for the C1 MVC controls that is inherited from the ComboBoxBase class. HeaderPath is used to get or set the name of a property to use the value displayed in the control's input element. The default value for this property is null, that allows the control to display the same content in the input element as in the selected item of the drop-down list.

Use this property, if you wish to separate the value shown in the input element from the values shown in the drop-down list. For example, the input element could show an item name and the drop-down list could show the additional information.

HeaderPath property is available in the following Input (drop-down) controls;

• AutoComplete
• ComboBox
• InputTime

The following code example demonstrates how to use HeaderPath property in Input controls.

 In Code

IndexController.cs

public ActionResult Index()
{
ViewBag.Countries = MVCHeaderPath.Models.Countries.GetCountryObjects();
return View();
}

Countries.cs (Model)

public class Sale
    {
        public int id;
        public string country;
    }

    public class Countries

    {
        public static List GetCountryObjects()
        {
            List testData = new List();
            Sale s1 = new Sale();
            s1.id = 91;
            s1.country = "India";
            testData.Add(s1);
            Sale s2 = new Sale();
            s2.id = 86;
            s2.country = "China";
            testData.Add(s2);
            Sale s3 = new Sale();
            s3.id = 61;
            s3.country = "Australia";
            testData.Add(s3);
            return testData;
        }
    }

Index.cshtml

@(Html.C1().ComboBox().Bind(countries)            
    .DisplayMemberPath("country")
    .HeaderPath("id")
    )

<c1-flex-chart binding-x="Name"chart-type="ChartType.Column" >
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-chart-series binding="SalesInUSA" name="Sales in USA">
    </c1-flex-chart-series>
    <c1-chart-gestures interactive-axes=”InteractiveAxes.XY” mouse-action=”MouseAction.Zoom” />
</c1-flex-chart>                               

Copyright © GrapeCity, inc. All rights reserved.