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.

  1. npm install bootstrap@3.3.7 --save
  2. npm install jquery@3.2.1 --save
  3. npm install file-loader --save
  4. npm install url-loader --save

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

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

Next you need to require bootstrap and jQuery.

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

You will need to also require the bootstrap css.

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

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

  1. <div className="btn-group" >
  2. 	<a className="btn btn-primary dropdown-toggle"  data-toggle="dropdown" href="#">testHeading</a>
  3. 	<ul className="dropdown-menu">
  4. 		<li>My Value</li>
  5. 	</ul>
  6. </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

  1.  public class DropDownList : INotifyPropertyChanged
  2. {
  3.       private dynamic _values;
  4.       private dynamic selectedItem;
  5.       public event PropertyChangedEventHandler PropertyChanged;
  6.       public event PropertyValueChangedEventHandler PropertyValueChanged;
  7.  
  8.       public DropDownList(String name, PropertyGrid pg)
  9.       {
  10.             PropertyName = name;
  11.             PG = pg;
  12.       }
  13.  
  14.       private String PropertyName { get; set; }
  15.       private PropertyGrid PG { get; set; }
  16.  
  17.       public dynamic Values
  18.       {
  19.             get
  20.             {
  21.                   return _values;
  22.             }
  23.             set
  24.             {
  25.                   if (value != null)
  26.                         _values = value;
  27.             }
  28.       }
  29.  
  30.       public string ValueMember { get; set; }
  31.       public string DisplayMember { get; set; }
  32.  
  33.       [Browsable(false)]
  34.       public dynamic SelectedItem
  35.       {
  36.             get
  37.             {
  38.                   return selectedItem;
  39.             }
  40.             set
  41.             {
  42.                   String oldValue = selectedItem;
  43.                   selectedItem = value;
  44.  
  45.                   if (PropertyChanged != null)
  46.                         PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
  47.  
  48.                   if (PG != null)
  49.                   {
  50.                         if (PropertyValueChanged != null)
  51.                               PropertyValueChanged(this, new PropertyValueChangedEventArgs(PG.SelectedGridItem, oldValue));
  52.                   }
  53.             }
  54.       }
  55.  
  56.       public override string ToString()
  57.       {
  58.             return SelectedItem;
  59.       }
  60. }

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

  1.  public class DropDownEditor : System.Drawing.Design.UITypeEditor
  2. {
  3.       private IWindowsFormsEditorService es = null;
  4.       public override UITypeEditorEditStyle GetEditStyle(System.ComponentModel.ITypeDescriptorContext context)
  5.       {
  6.             return UITypeEditorEditStyle.DropDown;
  7.       }
  8.  
  9.       public override object EditValue(ITypeDescriptorContext context, IServiceProvider provider, object value)
  10.       {
  11.             if (provider != null)
  12.             {
  13.                   // This service is in charge of popping our ListBox.
  14.                   es = ((IWindowsFormsEditorService)provider.GetService(typeof(IWindowsFormsEditorService)));
  15.  
  16.                   if (es != null && value is DropDownList)
  17.                   {
  18.                         dynamic property = (DropDownList)value;
  19.                         var list = new ListBox();
  20.                         list.Click += ListBox_Click;
  21.  
  22.                         if (property.Values != null)
  23.                         {
  24.                               foreach (object item in property.Values)
  25.                               {
  26.                                     var propertyInfo = item.GetType().GetProperty(property.DisplayMember);
  27.                                     list.Items.Add(propertyInfo.GetValue(item, null));
  28.                               }
  29.                         }
  30.                         // Drop the list control.
  31.                         es.DropDownControl(list);
  32.  
  33.                         if (list.SelectedItem != null && list.SelectedIndices.Count == 1)
  34.                         {
  35.                               property.SelectedItem = list.SelectedItem;
  36.                               value = property;
  37.                         }
  38.                   }
  39.             }
  40.  
  41.             return value;
  42.       }
  43.  
  44.       void ListBox_Click(object sender, EventArgs e)
  45.       {
  46.             if (es != null)
  47.             {
  48.                   es.CloseDropDown();
  49.             }
  50.       }
  51. }