Tag: dropdown

CSS: Bootstrap DropDown From Text Click

In this tutorial I will show you how how to use bootstrap with React/Node to make a dropdown from a text or image on click using just bootstrap.

You will need bootstrap and jquery.

npm install bootstrap@3.3.7 --save
npm install jquery@3.2.1 --save
npm install file-loader --save
npm install url-loader --save

You will also need to update webpack.config.js and add the following under “loaders”.

{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

Next you need to require bootstrap and jQuery.

window.jQuery = window.$ = require("jquery");
require("bootstrap");

You will need to also require the bootstrap css.

require("bootstrap/dist/css/bootstrap.min.css");

The following is all you then need to display a css like dropdown.

<div className="btn-group" >
	<a className="btn btn-primary dropdown-toggle"  data-toggle="dropdown" href="#">testHeading</a>
	<ul className="dropdown-menu">
		<li>My Value</li>
	</ul>
</div>

PropertyGrid: DropDown Property

This entry is part 3 of 5 in the series C#: Property Grid

You may want to add a dropdown to your property grid. If you do then the below code is what you will need to create the property. You will also need the editor.

Build a DropDown Property Type

 public class DropDownList : INotifyPropertyChanged
{
      private dynamic _values;
      private dynamic selectedItem;
      public event PropertyChangedEventHandler PropertyChanged;
      public event PropertyValueChangedEventHandler PropertyValueChanged;

      public DropDownList(String name, PropertyGrid pg)
      {
            PropertyName = name;
            PG = pg;
      }

      private String PropertyName { get; set; }
      private PropertyGrid PG { get; set; }

      public dynamic Values
      {
            get
            {
                  return _values;
            }
            set
            {
                  if (value != null)
                        _values = value;
            }
      }

      public string ValueMember { get; set; }
      public string DisplayMember { get; set; }

      [Browsable(false)]
      public dynamic SelectedItem
      {
            get
            {
                  return selectedItem;
            }
            set
            {
                  String oldValue = selectedItem;
                  selectedItem = value;

                  if (PropertyChanged != null)
                        PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));

                  if (PG != null)
                  {
                        if (PropertyValueChanged != null)
                              PropertyValueChanged(this, new PropertyValueChangedEventArgs(PG.SelectedGridItem, oldValue));
                  }
            }
      }

      public override string ToString()
      {
            return SelectedItem;
      }
}

PropertyGrid: DropDown Editor

This entry is part 2 of 5 in the series C#: Property Grid

You may want to add a dropdown to your property grid. If you do then the below code is what you will need to create the editor.

Build the DropDown Editor

 public class DropDownEditor : System.Drawing.Design.UITypeEditor
{
      private IWindowsFormsEditorService es = null;
      public override UITypeEditorEditStyle GetEditStyle(System.ComponentModel.ITypeDescriptorContext context)
      {
            return UITypeEditorEditStyle.DropDown;
      }

      public override object EditValue(ITypeDescriptorContext context, IServiceProvider provider, object value)
      {
            if (provider != null)
            {
                  // This service is in charge of popping our ListBox.
                  es = ((IWindowsFormsEditorService)provider.GetService(typeof(IWindowsFormsEditorService)));

                  if (es != null && value is DropDownList)
                  {
                        dynamic property = (DropDownList)value;
                        var list = new ListBox();
                        list.Click += ListBox_Click;

                        if (property.Values != null)
                        {
                              foreach (object item in property.Values)
                              {
                                    var propertyInfo = item.GetType().GetProperty(property.DisplayMember);
                                    list.Items.Add(propertyInfo.GetValue(item, null));
                              }
                        }
                        // Drop the list control.
                        es.DropDownControl(list);

                        if (list.SelectedItem != null && list.SelectedIndices.Count == 1)
                        {
                              property.SelectedItem = list.SelectedItem;
                              value = property;
                        }
                  }
            }

            return value;
      }

      void ListBox_Click(object sender, EventArgs e)
      {
            if (es != null)
            {
                  es.CloseDropDown();
            }
      }
}