How to enable select2 in the dropdown filter

Sherif-E-Saleh commented 8 years ago

Using Angular-Datatables, I am going through a case in my project that I need to use select2 instead of the regular select in the select supported by light-column filter?

Here is how I include the select in the filter.

vm.dtOptions1 = DTOptionsBuilder.fromFnPromise(function() {
        return $timeout().then(function() {
          return vm.tempData;
        });
      })
      .withOption('responsive', true)
      .withOption('autoWidth', true)
      .withPaginationType('full_numbers')
      .withOption('aaSorting', [0, 'asc'])
      .withOption('createdRow', vm.createdRow)
      .withOption('rowCallback', rowCallback)
      .withScroller()
      // .withFixedColumns()
      // .withOption('scrollX', '100%')
      // .withOption('scrollCollapse', true)
      // .withFixedColumns({rightColumns: 1})
      .withBootstrap()
      .withLightColumnFilter({
            '0' : {
                type : 'text'
            },
            '1' : {
                type : 'text'
            },
            '2' : {
                type : 'text'
            },
            '3' : {
                type : 'text'
            },
            '4' : {
                type : 'text'
            },
            '5':{
              type: 'select',
              values:[{
                value:'Active', label:'Active'
              },{
                value:'Inactive', label:'Inactive'
              }
            ]
         }
     });

`

thansen-solire commented 8 years ago

you should first create a "select2" filter type

(function (window, document) {
  var factory = function ($, ColumnFilter) {
    'use strict';

    ColumnFilter.filter.select2 = {
      dom: function (th) {
        var self = this, select;

        select = $('<select>').append('<option></option>');

        select.addClass(self.options.cssClass);

        $.each(self.options.values, function (ii, value) {
          $('<option>').val(value.value).text(value.label).appendTo(select);
        });

        self.elements = select.appendTo(th);

        if (typeof self.options.width !== 'undefined') {
          self.elements.css('width', self.options.width);
        } else {
          self.elements.css('width', '100%');
        }

        self.elements.select2(self.options.config);

        return self.elements;
      },
      bindEvents: function () {
        var self = this;

        self.elements.on('select2:select', function () {
          self.search();
        });
      },
      request: function () {
        var self = this;

        return self.elements.val();
      }
    };
  };

  // Define as an AMD module if possible
  if (typeof define === 'function' && define.amd) {
    define(['jquery', 'datatables-light-columnfilter'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    factory(require('jquery'), require('datatables-light-columnfilter'));
  } else if (jQuery) {
    // Otherwise simply initialise as normal, stopping multiple evaluation
    factory(jQuery, jQuery.fn.dataTable.ColumnFilter);
  }
})(window, document);

and then

vm.dtOptions1 = DTOptionsBuilder.fromFnPromise(function() {
(...)
.withLightColumnFilter({
(...)
  '5':{
    type: 'select2',
    config: {
      [select2 configuration object]
    }
    values:[
      {
        value:'Active', 
        label:'Active'
      },
      {
        value:'Inactive',
        label:'Inactive'
      }
    ]
})

melino commented 7 years ago

Hey Sherif-E-Saleh, did this work for you?

Sherif-E-Saleh commented 7 years ago

Yeah it's been helpful ao far, thank you melino :) will inquiry about more issues should I face any other.

-----Original Message----- From: "melino" notifications@github.com Sent: ‎22/‎07/‎2016 13:07 To: "thansen-solire/datatables-light-columnfilter" datatables-light-columnfilter@noreply.github.com Cc: "Sherif E.Saleh" shrfsaleh@gmail.com; "Manual" manual@noreply.github.com Subject: Re: [thansen-solire/datatables-light-columnfilter] How to enableselect2 in the dropdown filter (#4)

Hey Sherif-E-Saleh, did this work for you? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

thansen-solire / datatables-light-columnfilter

How to enable select2 in the dropdown filter #4