Angular Sortable Dynamic Collection

Here’s an example of a sortable (ui-sortable) on a dynamic collection that I’ve worked out. I’ve wrapped this in a custom directive for a collection of widgets that can be re-ordered.

See the Plnkr working example.

Screen Shot

It uses Angular, Bootstrap and ui-sortable. Unfortunately, there is a dependency on jQuery UI Sortable but I don’t see any problems with this example.

Usage

Custom directive


<widget-container class="widget-container"></widget-container>

Directive Template

This is the basic template with the important bits (most of the styling removed). There’s a second directive widget-item embedded to help with the child (collection) items.


<div class="widget-container">
    <button ng-click="widgetContainerCtrl.add()">Add Widget</button>
    <div ui-sortable="widgetContainerCtrl.sortableOptions" ng-model="widgetContainerCtrl.widgets">
      <div widget-item ng-repeat="widget in widgetContainerCtrl.widgets"
        widget="widget"
        data-id="{{widget.id}}" data-pos="{{widget.pos}}">
        <span class="handle">
          <i class="glyphicon glyphicon-move"></i>
        </span>
        <button ng-click="widgetContainerCtrl.remove(widget)">
          <i class="glyphicon glyphicon-trash"></i>
        </button>
        <span>{{widget.id}}</span>
        <span>{{widget.pos}}</span>
        <span>I'm the widget, gotta Love me!</span>
      </div>
    </div>
</div>

We’ve got to be careful with the DOM structure to satisfy ui-sortable — the ng-repeat needs to be directly below ui-sortable.

Directive JavaScript


  var app = angular.module("app", ["ui.sortable"]);
  
  app.directive("widgetContainer", [WidgetContainer]);
  
  function WidgetContainer() {
    return {
      restrict: "E",
      replace: true,
      templateUrl: "widgetContainer.html",
      controller: "WidgetContainerController as widgetContainerCtrl",
      scope: { },
      link: function(scope, element, attrs, ctrl) { }
    };
  }
  
  app.controller("WidgetContainerController", ["$scope", "$timeout", WidgetContainerController]);
  
  function WidgetContainerController($scope, $timeout) {
    var _this = this;
    this.$scope = $scope;
    this.$timeout = $timeout;
    this.widgets = [];
    this.sortableOptions = {
      handle: "< .handle",
      update: function(event, ui) {
        _this.reorder();
      }
    };
  }

  WidgetContainerController.prototype.add = function() {
    // this.widgets.push()
  }
  WidgetContainerController.prototype.remove = function(widget) {
    // this.widgets.splice()
  }
  WidgetContainerController.prototype.reorder = function() {
    // reassign widget.pos
  }

Here’s the child directive:


  app.directive("widgetItem", [WidgetItem]);
  
  function WidgetItem() {
    return {
      restrict: "A",
      scope: {
        widget: "=";
      },
      controller: "WidgetItemController as widgetItemCtrl",
      link: function(scope, element, attrs, ctrl) { }
    };
  }
  
  app.controller("WidgetItemController", ["$scope", WidgetItemController]);
  
  function WidgetItemController($scope) {
    this.widget = $scope.widget;
  }
  WidgetItem.prototype.doSomething = function() { }

Datepicker With Bootstrap Icon

This is an update to a previous a post jQuery Datepicker With Bootstrap Icon but instead of the jQuery UI datepicker we will be using a Bootstrap datepicker.

The problem again is we want to be able to click on an icon to trigger the datepicker without having to write any javascript. The idea is the same as in the previous solutionUse the label’s for attribute to trigger the date’s input field.

Here is what we want the control to look like:

bootstrap-datepicker-retina

HTML:

<div class="input-group">
    <label class="input-group-btn" for="date-fld">
        <span class="btn btn-default">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </label>
    <input type="text" class="form-control date-input" id="date-fld" />
</div>

Some things to note:

  1. We are using the Button Addon .input-group-btn instead of the slightly simpler markup for .input-group-addon. This will give the user better UI hints when the cursor is over the icon.
  2. The <button> has been changed to a <span>. Without this change the datepicker is not triggered. You could, instead, use the button and nest a label within the button but this does not render nicely.

For completeness here is the javascript:

$(".date-input").datepicker({
    // options
});

A working example on jsFiddle.

Libraries in this article:
  1. Bootstrap 3.2.0
  2. https://github.com/eternicode/bootstrap-datepicker

MVC Bootstrap Input Group Button Space

Recently, I’ve fired-up a new MVC5 website with the default template. I’m looking to use the Bootstrap input button group but instead of the controls flush against each other I see a large gap between the two elements.

Here is what I’m expecting:

bootstrap-mvc-2

Here is what I get instead:

boostrap-mvc-1

Here is the HTML markup:

<div class="row">
    <div class="col-md-4">
        <h3>Bootstrap Input Group</h3>
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-btn">
                <button class="btn btn-primary">OK</button>
            </span>
        </div>
    </div>
</div>

The Problem

It turns out the Visual Studio’s MVC template Site.css stylesheet is causing problems here.

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

The Solution

Remove the max-width and the space between the elements disappear.

Getting The Solution

It would be helpful to share how I solved this issue — For experienced developers this is probably common knowledge.

In this case I used the browser’s debugger tools to inspect the page elements: On the rendered page in the browser, hover the mouse pointer over the input box then Right-ClickInspect Element.

bootstrap-dev-tools

Chrome’s Developer Tools gives you a screen like the one above. Using this you can examine which CSS rules are applied to a specific element and it also tells you which file the rule comes from (site.css, line 20).

The process on Firefox and Internet Explorer is almost exactly the same as with Chrome.


Frameworks and libraries in this article:
  1. ASP.NET MVC 5.1.2
  2. Twitter Bootstrap 3.1.1

jQuery Datepicker With Bootstrap Icon

Update (2014-08-16):
Not using jQuery UI datepicker? See Datepicker With Bootstrap Icon with eternicode’s Bootstrap-datepicker and Bootstrap 3.

The Problem

I recently needed to use the jQuery UI Datepicker but I also wanted to use Bootstrap’s calendar icon. Simple enough, I thought, the datepicker allows me to specify an icon image. Unfortunately, the built-in datepicker option inserts an img tag and it’s not so easy to add a CSS class needed to use a sprite instead.

Continue reading “jQuery Datepicker With Bootstrap Icon”