SharePoint 2013 Device Channel custom UI component

In my experience on SharePoint 2013, with the device channel I saw a gap in editing mode of the page. To fill this gap I have created a custom component UI with jQuery that allowing to switch across the device channel panel. This new feature of the device channel into SharePoint, allow to display the page created ad hoc for a specific device. This is possible because comes showed the device channel panel that contains the specific html markup for the device as set into site settings -> device channel, for understanding more see the link on MSDN.

There is a requirement for realizing this sample, is necessary to create a device channel mobile and a class for doing the override and permit the display of both device channel panels in editing mode for example as the following figure:

Giuliano De Luca | Blog | delucagiuliano.com

  public class customDeviceChannelPanel : DeviceChannelPanel
    {
        #region Protected methods
        protected override void AddParsedSubObject(object obj)
        {
            if (this.IsInEditMode())
            {
                this.WriteObjects(obj);
            }
            else
            {
                base.AddParsedSubObject(obj);
            }
        }
        #endregion

        #region Private methods
        private bool IsInEditMode()
        {
            return SPContext.Current != null &amp;&amp;
                SPContext.Current.FormContext != null &amp;&amp;
                (SPContext.Current.FormContext.FormMode == SPControlMode.Edit || SPContext.Current.FormContext.FormMode == SPControlMode.New);
        }

        private void WriteObjects(object obj)
        {
            Control control = obj as Control;
            if (control != null)
            {
                this.Controls.Add(control);
            }
        }
        #endregion

    }