Using a dynamic data source with selector components

This content cannot be displayed without JavaScript.
Please enable JavaScript and reload the page.

Is this really the version you are looking for? Kentico Xperience 12 Service Pack Documentation is no longer updated. Use the switcher in the header to choose your product version.

Using a dynamic data source with selector components | Kentico Xperience 12 Service Pack Documentation

using System.Web.Mvc;
using System.Linq;
using System.Collections.Generic;

using CMS.DocumentEngine;

using Kentico.Forms.Web.Mvc;

using LearningKit.FormBuilder.FormComponents;
using LearningKit.FormBuilder.FormComponentProperties;

[assembly: RegisterFormComponent(CustomDropDownComponent.IDENTIFIER, typeof(CustomDropDownComponent), "Drop-down with custom data", IconClass = "icon-menu")]

namespace LearningKit.FormBuilder.FormComponents
{
    public class CustomDropDownComponent : SelectorFormComponent<CustomDropDownComponentProperties>
    {
        public const string IDENTIFIER = "CustomDropDownComponent";

        // Retrieves data to be displayed in the selector
        protected override IEnumerable<SelectListItem> GetItems()
        {
            // Perform data retrieval operations here
            // The following example retrieves all pages of the 'DancingGoatMvc.Article' page type 
            // located under the 'Articles' section of the Dancing Goat sample website
            DocumentQuery query = DocumentHelper.GetDocuments("DancingGoatMvc.Article")
                                .Path("/Articles/", PathTypeEnum.Children)
                                .Columns("DocumentName", "DocumentGUID")
                                .OnSite("DancingGoatMvc")
                                .Culture("en-us")
                                .LatestVersion();

            var sampleData = query.TypedResult.Select(x => new { Name = x.DocumentName,
                                                                 Guid = x.DocumentGUID.ToString() });

            // Iterates over retrieved data and transforms it into SelectListItems
            foreach (var item in sampleData)
            {
                var listItem = new SelectListItem()
                {
                    Value = item.Guid,
                    Text = item.Name
                };

                yield return listItem;
            }
        }
    }
}

In the properties class, inherit from SelectorProperties. Optionally, you can implement additional properties required for further customization.

C#CustomDropDownComponentProperties.cs

using Kentico.Forms.Web.Mvc;

namespace LearningKit.FormBuilder.FormComponentProperties
{
    public class CustomDropDownComponentProperties : SelectorProperties
    {
        // Implement any required custom properties here
    }
}

Create a new _CustomDropDownComponent view under ~/Views/Shared/FormComponents that renders a drop-down list populated with the retrieved data.

C#_CustomDropDownComponent.cshtml

@using Kentico.Forms.Web.Mvc
@using LearningKit.FormBuilder.FormComponents

@model CustomDropDownComponent

@{
    var htmlAttributes = ViewData.GetEditorHtmlAttributes();
}

@* Invoking a Get operation on the component's 'Items' property executes the GetItems method. *@
@Html.DropDownListFor(x => x.SelectedValue, Model.Items, null, htmlAttributes)

Connecting a drop-down list to a dynamic data source

Connecting a drop-down list to a dynamic data source

Cookie consent

Connecting a drop-down list to a dynamic data source

Connecting a drop-down list to a dynamic data source