Answers

• pyenthu Posts: 6Questions: 2Answers: 0

  January 2016

  Want to understand how to use it.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2016

  Hi,

  There isn't a plug-in for Editor that is currently available to use with a date picker, however, it is fairly easy to create plug-ins as described in the manual.

  Let me know how you get on with it.

  Allan
• Greg Brainerd Posts: 9Questions: 1Answers: 0

  October 2016 edited October 2016

  Hey Allan,
  I just got spectrum to work as a plug in, http://bgrins.github.io/spectrum/.

  Make sure you include the spectrum.css and js.

      <link href="~/assets/plugins/colorpicker/spectrum.css" rel="stylesheet" />
      <script src="~/assets/plugins/colorpicker/spectrum.js"></script>
  

  Then in the editor area script.

      <script type="text/javascript" language="javascript" class="init">
  
      //plugin
      // colorpicker field type plug-in code
      (function ($, DataTable) {
   
      if ( ! DataTable.ext.editorFields ) {
          DataTable.ext.editorFields = {};
      }
   
      var Editor = DataTable.Editor;
      var _fieldTypes = DataTable.ext.editorFields;
   
      _fieldTypes.colorpicker = {
          create: function ( conf ) {
              var that = this;
   
              conf._enabled = true;
   
              // Create the elements to use for the input
              conf._input = $(
                  '<div id="' + Editor.safeId(conf.id) + '">' +
                      '<input type="text" class="basic" id="spectrum"/>' +
                      '<em id="basic-log"></em>' +
                      '</div>');
   
              // Use the fact that we are called in the Editor instance's scope to call
              // input.ClassName
              $("input.basic", conf._input).spectrum({
                  //color: "#f00",
                  change: function (color) {
                      $("#basic-log").text(color.toHexString());
                  }
              });
              return conf._input;
          },
   
          get: function (conf) {
              var val = $("input.basic", conf._input).spectrum("get").toHexString();
              return val;
          },
   
          set: function (conf, val) {
              $("input.basic", conf._input).spectrum({
                  color: val,
                  change: function (color) {
                      $("#basic-log").text("change called: " + color.toHexString());
                  }
              });           
          },
   
          enable: function ( conf ) {
              conf._enabled = true;
              $(conf._input).removeClass( 'disabled' );
          },
   
          disable: function ( conf ) {
              conf._enabled = false;
              $(conf._input).addClass( 'disabled' );
          }
      };
      })(jQuery, jQuery.fn.dataTable);
  

  Then within the editor configuration

             fields: [
                          {
                              type: "colorpicker",
                              label: "Color",
                              name: "color",
                          }]
  

  Lastly I used this to display a square color in the regular table itself. You'll need this CSS

          .colorSquare {
            width: 20px;
            height: 20px;
            margin:auto;
            border: 1px solid rgba(0, 0, 0, .2);
          }
      table.dataTable tbody th.dt-body-center,
      table.dataTable tbody td.dt-body-center {
        text-align: center;
      }
  

  In the table columns,

                  columns: [
                      {
                          data: "color",
                          render: function (data, type, row) {
                              if (type === 'display') {
                                  return '<div class="colorSquare" style="background:' + data + ';"></div>';
                              }
                              return data;
                          },
                          className: "dt-body-center"
                      },]
  

  Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  October 2016

  Awesome! Thanks for sharing this with us.

  Allan
• crush123 Posts: 417Questions: 126Answers: 18

  October 2016

  Cheers Greg.

  Really Useful
• Karlog Posts: 9Questions: 4Answers: 0

  March 2017

  Greg Brainerd

  Thanks, you just spared me a lot of work!
• edanyildiz Posts: 43Questions: 13Answers: 4

  April 2017

  Thats grwat.
  Could you please adapt this code for full use of the spectrum, i mean advanced ui
  Thank you so much.
• maliwik Posts: 55Questions: 5Answers: 1

  September 2017 edited September 2017

  You can also allow conditional formatting of the cell for mixed content (i.e. colors or non-color content in the same cell) by using a regex pattern to detect if a color hex is in the cell or not. I modified Greg Brainerd's code snippet above to do this:

  columns: [{
   /* data option isn't necessary unless your dataset is named "color"
      if not, you can remove it */
    data: "color",
    render: function (data, type, row) {
      if (type === 'display' &&
          data != null &&
          data.match(/#([a-f0-9]{3}){1,2}\b/i)) {
        return '<div class="colorSquare" style="background:' + data + ';"></div>';
      }
      return data;
    },
    /* className isn't necessary either unless you want
       parent-level formatting for the cell's contents */
    className: "dt-body-center"
  }]
  

  The regex /#([a-f0-9]{3}){1,2}\b/i will detect both the shorthand and longform hexadecimal format (one group of 3 alphanumeric characters or two groups of 3 alphanumeric characters such as #f00 or #ff0000 for red). Any time the cell has a color hex content, it'll format accordingly, otherwise it'll leave it alone.

  -- Mike
• piq_pm_pjk Posts: 21Questions: 7Answers: 1

  July 2019

  I just realized that this isn't working on mobile devices, clicking the pulldown in the editor modal does not respond. Spectrum is mobile compatible if you check its website. Does anyone have any insight as to why the DT plugin does not carry the mobile functionality?
• colin Posts: 15,240Questions: 1Answers: 2,599

  July 2019

  Hi @piq_pm_pjk ,

  I'd be surprised if this was because of Editor or DT, I suspect it's more likely to do with Spectrum. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin