Working with Simple Lists

Version: 9.5.7.6 +

Attachments

BannerDialog_Sample.zip

AdvantageGrid: List for Add/Delete/Active/Featured/Sort

Overview

When working with Advantage, sometimes you require a List<T> stored. To simplify the repetitive tasks, There is an AdvantageGrid control (Inherited from Telerik's: RadGrid) to assist.

Functionality

Add: Add a new record
Edit: Edit a record
Active: Mark record as Active/Inactive (requires field bool:IsActive defined in the List<T>).
Featured: Mark record as Featured/Not Featured (requires field bool:IsFeatured defined in the List<T>).

Sample

This sample is from a Banner dialog control. BannerAttributes is the storage object. BannerAttributes contains a property Items:List<BannerItems>.

Some Methods will need to be defined by the developer. They are:

GridList_GetItems(): Retrieves the type list data
GridList_SetItems(myObjectList): Passes new list data to be saved
GridList_SetObjectToDisplay(T myObject, bool showDetail): Clears or sets item for display, determines if switch view from list to detail
GridList_AssignObjectFromDisplay(ref T myNewObject): Fills the object from the interface for storage to the list

Storage Class

BannerAttributes.cs

    /// <summary>
    /// Big banner object
    /// </summary>
    public enum eBannerType
    {
        Image = 0,
        Video = 1,
        Carousel = 2

    }
    public enum eBannerHeight
    {
        //If french, it will pickup the Localized entry, otherwise default
        [Description("Automatic")]
        [LocalDescription("fr", "Automatique")]
        Auto = 0,
        [Description("Slim")]
        [LocalDescription("fr", "Mince")]
        Slim = 1,
        [Description("Medium")]
        [LocalDescription("fr", "Douleur moyenne")]
        Medium = 2,
        [Description("Large")]
        [LocalDescription("fr", "Grand")]
        Large = 3,

        [Description("Full height")]
        [LocalDescription("fr", "Pleine hauteur")]
        Full = 4
    }
    public class BannerItem
    {
        public int Id { get; set; }

        public eBannerType BannerType { get; set; } = eBannerType.Image;
        public bool IsActive { get; set; }
        public bool IsFeatured { get; set; }
        public int SortOrder { get; set; }

        public string Title { get; set; }
        public string Content { get; set; }

        public bool UseVideoImageOnSmallScreen { get; set; }
        private AdvantageImage _advantageImage = null;

        public AdvantageImage AdvantageImage
        {
            get
            {
                if (_advantageImage == null)
                    _advantageImage = BannerType == eBannerType.Video || BannerType == eBannerType.Carousel ? LoadVideoAdvantageImage() : LoadAdvantageImage();
                return _advantageImage;
            }
            set { _advantageImage = value; }
        }
        public AdvantageDocumentLink VideoLink { get; set; }
        public string Category { get; set; }
        public eCategoryDisplay CategoryDisplay { get; set; }
        public string LinkAction { get; set; }
        public string TextAlign { get; set; }
        public bool ShowText { get; set; } = true;

        private AdvantageImage LoadVideoAdvantageImage()
        {
            var advantageImage = new AdvantageImage();
            advantageImage.AddImageElement(new AdvantageImageElement()
            {
                ImageName = "Small",
            });

            return advantageImage;
        }

        private AdvantageImage LoadAdvantageImage()
        {
            var advantageImage = new AdvantageImage();
            advantageImage.AddImageElement(new AdvantageImageElement()
            {
                ImageName = "Small",
                BreakPointName = "Small"
                //Width = 640,
                //Height = 400,
                //BreakPoint = 0
            });

            advantageImage.AddImageElement(new AdvantageImageElement()
            {
                ImageName = "Medium",
                BreakPointName = "Medium"
                //Width = 640,
                //Height = 400,
                //BreakPoint = 0
            });
            advantageImage.AddImageElement(new AdvantageImageElement()
            {
                ImageName = "Large",
                BreakPointName = "Large"
                //Width = 2160,
                //Height = 560,
                //BreakPoint = 768
            });
            advantageImage.DefaultElementName = "Small";

            return advantageImage;
        }

    }



    /// <summary>
    /// Summary description for BannerAttributes
    /// </summary>
    public class BannerAttributes
    {
        public static string Key { get { return "BannerKey"; } }
        public eBannerHeight Height { get; set; } = eBannerHeight.Auto;
        public List<BannerItem> Items { get; set; } = new List<BannerItem>();

    }

ASCX File

Place two(2) placeholders in your control (phListView, phItemView) for toggling between the list and detail views.

List View Placeholder

Add the AdvantageGridControl to the phListView:
- Define the KeyFields -> DataKeyNames (comma separated list)
- Define the display fields from the List<T> (Columns)


<asp:PlaceHolder runat="server" ID="phListView" Visible="true">
    <fieldset>
    <legend>Banner Settings</legend>
        <div class="form-row">                
            <label>Height</label>
            <asp:DropDownList ID="ddlHeight" runat="server">
            </asp:DropDownList>             
        </div>

        <advantage:AdvantageGrid runat="server" ID="GridList" DataKeyNames="Id">
            <Columns>
                <advantage:GridColumnDefinition HeaderText="Title" DataField="Title" />
                <advantage:GridColumnDefinition HeaderText="Content" DataField="Content" />
            </Columns>
        </advantage:AdvantageGrid>

    </fieldset>
</asp:PlaceHolder>

Item View Placeholder

Add the cancel/update buttons
Add the item fields for binding data
Add binding controls for data


<asp:PlaceHolder runat="server" ID="phItemView" Visible="false">

    <fieldset>
        <legend>Item: <%= txtName.Text %>
            <asp:PlaceHolder runat="server" id="phButtons">
                <asp:Button ID="btnUpdate" runat="server" Enabled="true" CausesValidation="true" Text="Update" />
                <asp:Button ID="btnCancel" runat="server" Enabled="true" CausesValidation="true" Text="Cancel" />
            </asp:PlaceHolder>
        </legend>

        <div class="form-row">                
            <label>Show Text</label>
            <asp:CheckBox runat="server" ID="chkShowText" AutoPostBack="true" OnCheckedChanged="chkShowText_OnCheckedChanged" />
        </div>

        <asp:PlaceHolder runat="server" id="phShowText">
            <div class="form-row">                
                <label>Text Alignment</label>
                <asp:DropDownList ID="ddlTextAlign" runat="server">
                    <asp:ListItem Text="Center" Value="text-center"></asp:ListItem>
                    <asp:ListItem Text="Left" Value="text-start"></asp:ListItem>
                    <asp:ListItem Text="Right" Value="text-end"></asp:ListItem>
                </asp:DropDownList>             
            </div>
            <div class="form-row">                
                <label>Title</label>
                <telerik:RadTextBox ID="txtName" runat="server"></telerik:RadTextBox>                
            </div>

        <div class="form-row clsBannerButton" >                
            <label>Link</label>
            <Advantage:AdvantageSelectorLink runat="server" id="asLink"/> 
        </div>
        </asp:PlaceHolder>
        <div class="form-row" >                
            <label>Image</label>
            <advantage:AdvantageSelectorImage runat="server" ID="selImageBanner" />                
        </div>
    </fieldset>
    
    <advantage:AdvantageEditor id="radContent" runat="server" Title="Content" ></advantage:AdvantageEditor>

</asp:PlaceHolder>

ASCX.CS file

Bind the events for the control

OnInit

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            btnUpdate.Click += btnUpdate_Click;
            btnCancel.Click += btnCancel_Click;

            // listen for an event on child control
            GridList.OnLoadObject += GridList_OnLoadObject;
            GridList.OnDeleteObject += GridList_OnDeleteObject;
            GridList.OnToggleActive += GridListOnToggleActive;
            GridList.OnToggleFeature += GridList_OnToggleFeature;
            GridList.NeedDataSource += GridList_OnNeedDataSource;
            GridList.OnReordered += GridList_OnReordered;
        }

Functions to be implemented by developer

Pattern functions

GridList.OnLoadObject -> fired when grid requests to add/edit an object./span>

GridList.OnDeleteObject -> fired when grid requests to delete an object./span>

GridList.OnToggleActive -> fired when grid requests to toggle active status (requires field "IsActive")./span>

GridList.OnToggleFeature -> fired when grid requests to toggle featured status (requires field "IsFeatured")./span>

GridList.NeedDataSource -> fired when grid requests a datasource./span>

GridList.OnReordered -> fired when grid has drag/drop an item. Returns the items in the new order./span>

{Client Implementation}

Bind grid control to the datasource when requested (data source defined in control)

OnNeedDataSource

        /// <summary>
        /// Handles the NeedDataSource event of the GridList control.
        /// </summary>
        /// <param name="sender">The AdvantageGrid</param>
        /// <param name="e">The <see cref="GridNeedDataSourceEventArgs"/> instance containing the event data.</param>
        private void GridList_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        { GridList.DataSource = MyObjectList.OrderBy(ee => ee.SortOrder); }

OnLoadObject

        /// <summary>
        /// Called when a record is requested to be loaded into the form (add or edit).
        /// </summary>
        /// <param name="sender">The AdvantageGrid</param>
        /// <param name="args">args.GridCommandType possible values (Add, Edit) (</param>
        private void GridList_OnLoadObject(object sender, AdvantageGrid.AdvantageGridArgs args)
        {
            var myObject = AdvantageGrid.GetRecordFromList(GridList_GetItems(), args?.Item?.DataKeyValues);
            GridList_SetObjectToDisplay(myObject, true);
        }

OnDeleteObject

        /// <summary>
        /// Called when delete the object from the Grid.
        /// </summary>
        /// <param name="sender">The sender.</param>
        /// <param name="args">The arguments.</param>
        private void GridList_OnDeleteObject(object sender, AdvantageGrid.AdvantageGridArgs args)
        {
            var myObjectList = GridList_GetItems();
            var myObject = AdvantageGrid.GetRecordFromList(myObjectList, args.Item.DataKeyValues);
            myObjectList.Remove(myObject);

            GridList_SetItems(myObjectList);
            GridList_SetObjectToDisplay(null, false);
        }

Toggle Active/Featured

        /// <summary>
        /// Toggle the active status of the item. Object must contain an IsActive property.
        /// </summary>
        /// <param name="sender">The AdvantageGrid.</param>
        /// <param name="args">The arguments contain the record keys and toggle state</param>
        private void GridListOnToggleActive(object sender, AdvantageGrid.AdvantageGridToggleArgs args)
        {
            // call method to get your object list
            var myObjectList = GridList_GetItems();
            var myObject = AdvantageGrid.GetRecordFromList(myObjectList, args.Item.DataKeyValues);

            myObjectList.First(o => o.Equals(myObject)).IsActive = args.Toggle;
            GridList_SetItems(myObjectList);
        }
        /// <summary>
        /// Toggle the featured status of the item. Object must contain an IsFeatured property.
        /// </summary>
        /// <param name="sender">The AdvantageGrid.</param>
        /// <param name="args">The arguments contain the record keys and toggle state</param>
        private void GridList_OnToggleFeature(object sender, AdvantageGrid.AdvantageGridToggleArgs args)
        {
            var myObjectList = GridList_GetItems(); ;
            var myObject = AdvantageGrid.GetRecordFromList(myObjectList, args.Item.DataKeyValues);
            myObjectList.First(o => o.Equals(myObject)).IsFeatured = args.Toggle;
            GridList_SetItems(myObjectList);

        }

OnReordered

        /// <summary>
        /// Called when the grid list has been sorted sorted.
        /// </summary>
        /// <param name="sender">The AdvantageGrid</param>
        /// <param name="args">args.Items is the list from the grid in the new order.</param>
        private void GridList_OnReordered(object sender, AdvantageGrid.AdvantageGridReorderArgs args)
        {
            var myObjectList = GridList_GetItems();
            var sorted = AdvantageGrid.EmptySortedList(myObjectList);
            int ctr = 0;
            foreach (AdvantageGrid.AdvantageGridItem item in args.Items)
            {
                var myObject = AdvantageGrid.GetRecordFromList(myObjectList, item.DataKeyValues);

                if (myObject != null)
                {
                    ctr++;
                    myObject.SortOrder = ctr;
                    sorted.Add(myObject);
                }
            }
            GridList_SetItems(sorted);
        }