rails_slickgrid 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2011 Joe Martinez
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,24 @@
+# Rails Slickgrid #
+
+Rails Slickgrid is an effort to make the fast javascript grid/spreadsheet [SlickGrid](https://github.com/mleibman/SlickGrid) easier to use in rails.
+
+It currently only generates the static assets into your `javascripts` and `stylesheets` but automatic grid generation is under development.
+
+## Installation
+
+1. Add `gem 'rails_slickgrid'` to your Gemfile
+2. `bundle install`
+3. `rails generate rails_slickgrid:install`
+4. In your layout or view call `slickgrid_assets`
+
+## TODO
+1. Automatic grid generation
+2. Column Detection
+3. Editable Grids
+4. Client side filters
+5. Server side filters
+
+## Copyright
+
+SlickGrid itself is Copyright (c) 2010 Michael Leibman, http://github.com/mleibman/slickgrid
+Rails Slickgrid is Copyright (c) 2011 Joe Martinez, https://github.com/capitalist/rails_slickgrid

data/Rakefile

@@ -0,0 +1,58 @@
+# encoding: UTF-8
+$LOAD_PATH.unshift File.expand_path("../lib", __FILE__)
+require 'rubygems'
+require 'awesome_print'
+
+begin require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rake'
+require 'rake/rdoctask'
+
+require 'rspec/core'
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec
+
+Rake::RDocTask.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Rails Slickgrid'
+  rdoc.options << '--line-numbers' << '--inline-source'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+require "rails_slickgrid/version"
+task :build do
+  system "gem build rails_slickgrid.gemspec"
+end
+ 
+task :release => :build do
+  system "gem push rails_slickgrid-#{RailsSlickgrid::VERSION}.gem"
+end
+
+require 'rails_slickgrid/utils'
+desc 'Download slickgrid assets'
+task :download_slickgrid do
+  stylesheets = {
+    'https://github.com/mleibman/SlickGrid/raw/1.4.3/slick.columnpicker.css' => 'lib/generators/rails_slickgrid/install/stylesheets/:name',
+    'https://github.com/mleibman/SlickGrid/raw/1.4.3/slick.grid.css'         => 'lib/generators/rails_slickgrid/install/stylesheets/:name',
+    'https://github.com/mleibman/SlickGrid/raw/1.4.3/slick.pager.css'        => 'lib/generators/rails_slickgrid/install/stylesheets/:name',
+  }
+
+  javascripts = {
+    'https://github.com/mleibman/SlickGrid/raw/1.4.3/slick.columnpicker.js' => 'lib/generators/rails_slickgrid/install/javascripts/:name',
+    'https://github.com/mleibman/SlickGrid/raw/1.4.3/slick.editors.js'      => 'lib/generators/rails_slickgrid/install/javascripts/:name',
+    'https://github.com/mleibman/SlickGrid/raw/1.4.3/slick.model.js'        => 'lib/generators/rails_slickgrid/install/javascripts/:name',
+    'https://github.com/mleibman/SlickGrid/raw/1.4.3/slick.grid.js'         => 'lib/generators/rails_slickgrid/install/javascripts/:name',
+    'https://github.com/mleibman/SlickGrid/raw/1.4.3/slick.pager.js'        => 'lib/generators/rails_slickgrid/install/javascripts/:name',
+  }
+
+  stylesheets.merge(javascripts).each do |url,path|
+    RailsSlickgrid::Utils.curl url, '-o', path.gsub(/:name/,url.split('/').last)
+  end
+end

data/lib/generators/rails_slickgrid/install/install_generator.rb

@@ -0,0 +1,17 @@
+module RailsSlickgrid
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("..", __FILE__)
+      desc "Copies Slickgrid assets into your public directory."
+
+      def copy_stylesheets
+        directory 'stylesheets', 'public/stylesheets/slickgrid'
+      end
+
+      def copy_javascripts
+        directory 'javascripts', 'public/javascripts/slickgrid'
+      end
+    end
+  end
+end
+

data/lib/generators/rails_slickgrid/install/javascripts/slick.columnpicker.js

@@ -0,0 +1,105 @@
+(function($) {
+	function SlickColumnPicker(columns,grid,options)
+	{
+		var $menu;
+
+		var defaults = {
+			fadeSpeed: 250
+		};
+
+		function init() {
+			grid.onHeaderContextMenu = displayContextMenu;
+			options = $.extend({}, defaults, options);
+
+			$menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
+
+			$menu.bind("mouseleave", function(e) { $(this).fadeOut(options.fadeSpeed) });
+			$menu.bind("click", updateColumn);
+
+		}
+
+		function displayContextMenu(e)
+		{
+			$menu.empty();
+
+            var visibleColumns = grid.getColumns();
+			var $li, $input;
+			for (var i=0; i<columns.length; i++) {
+				$li = $("<li />").appendTo($menu);
+
+				$input = $("<input type='checkbox' />")
+                        .attr("id", "columnpicker_" + i)
+                        .data("id", columns[i].id)
+                        .appendTo($li);
+
+                if (grid.getColumnIndex(columns[i].id) != null)
+                    $input.attr("checked","checked");
+
+				$("<label for='columnpicker_" + i + "' />")
+					.text(columns[i].name)
+					.appendTo($li);
+			}
+
+			$("<hr/>").appendTo($menu);
+			$li = $("<li />").appendTo($menu);
+			$input = $("<input type='checkbox' id='autoresize' />").appendTo($li);
+			$("<label for='autoresize'>Force Fit Columns</label>").appendTo($li);
+			if (grid.getOptions().forceFitColumns)
+				$input.attr("checked", "checked");
+
+			$li = $("<li />").appendTo($menu);
+			$input = $("<input type='checkbox' id='syncresize' />").appendTo($li);
+			$("<label for='syncresize'>Synchronous Resizing</label>").appendTo($li);
+			if (grid.getOptions().syncColumnCellResize)
+				$input.attr("checked", "checked");
+
+			$menu
+				.css("top", e.pageY - 10)
+				.css("left", e.pageX - 10)
+				.fadeIn(options.fadeSpeed);
+		}
+
+		function updateColumn(e)
+		{
+			if (e.target.id == 'autoresize') {
+				if (e.target.checked) {
+					grid.setOptions({forceFitColumns: true});
+					grid.autosizeColumns();
+				} else {
+					grid.setOptions({forceFitColumns: false});
+				}
+				return;
+			}
+
+			if (e.target.id == 'syncresize') {
+				if (e.target.checked) {
+					grid.setOptions({syncColumnCellResize: true});
+				} else {
+					grid.setOptions({syncColumnCellResize: false});
+				}
+				return;
+			}
+
+			if ($(e.target).is(":checkbox")) {
+				if ($menu.find(":checkbox:checked").length == 0) {
+					$(e.target).attr("checked","checked");
+					return;
+				}
+
+                var visibleColumns = [];
+                $menu.find(":checkbox[id^=columnpicker]").each(function(i,e) {
+                    if ($(this).is(":checked")) {
+                        visibleColumns.push(columns[i]);
+                    }
+                });
+                grid.setColumns(visibleColumns);
+			}
+		}
+
+
+		init();
+	}
+
+	// Slick.Controls.ColumnPicker
+	$.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker }}});
+})(jQuery);

data/lib/generators/rails_slickgrid/install/javascripts/slick.editors.js

@@ -0,0 +1,608 @@
+/* THESE FORMATTERS & EDITORS ARE JUST SAMPLES! */
+
+(function($) {
+
+    var SlickEditor = {
+
+        SelectorCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            return (!dataContext ? "" : row);
+        },
+
+        PercentCompleteCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            if (value == null || value === "")
+                return "-";
+            else if (value < 50)
+                return "<span style='color:red;font-weight:bold;'>" + value + "%</span>";
+            else
+                return "<span style='color:green'>" + value + "%</span>";
+        },
+
+        GraphicalPercentCompleteCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            if (value == null || value === "")
+                return "";
+
+            var color;
+
+            if (value < 30)
+                color = "red";
+            else if (value < 70)
+                color = "silver";
+            else
+                color = "green";
+
+            return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
+        },
+
+        YesNoCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            return value ? "Yes" : "No";
+        },
+
+        BoolCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            return value ? "<img src='../images/tick.png'>" : "";
+        },
+
+        TaskNameFormatter : function(row, cell, value, columnDef, dataContext) {
+            // todo:  html encode
+            var spacer = "<span style='display:inline-block;height:1px;width:" + (2 + 15 * dataContext["indent"]) + "px'></span>";
+            return spacer + " <img src='../images/expand.gif'>&nbsp;" + value;
+        },
+
+        ResourcesFormatter : function(row, cell, value, columnDef, dataContext) {
+            var resources = dataContext["resources"];
+
+            if (!resources || resources.length == 0)
+                return "";
+
+            if (columnDef.width < 50)
+                return (resources.length > 1 ? "<center><img src='../images/user_identity_plus.gif' " : "<center><img src='../images/user_identity.gif' ") +
+                        " title='" + resources.join(", ") + "'></center>";
+            else
+                return resources.join(", ");
+        },
+
+        StarFormatter : function(row, cell, value, columnDef, dataContext) {
+            return (value) ? "<img src='../images/bullet_star.png' align='absmiddle'>" : "";
+        },
+
+
+        TextCellEditor : function(args) {
+            var $input;
+            var defaultValue;
+            var scope = this;
+
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-text' />")
+                    .appendTo(args.container)
+                    .bind("keydown.nav", function(e) {
+                        if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
+                            e.stopImmediatePropagation();
+                        }
+                    })
+                    .focus()
+                    .select();
+            };
+
+            this.destroy = function() {
+                $input.remove();
+            };
+
+            this.focus = function() {
+                $input.focus();
+            };
+
+            this.loadValue = function(item) {
+                defaultValue = item[args.column.field] || "";
+                $input.val(defaultValue);
+                $input[0].defaultValue = defaultValue;
+                $input.select();
+            };
+
+            this.serializeValue = function() {
+                return $input.val();
+            };
+
+            this.applyValue = function(item,state) {
+                item[args.column.field] = state;
+            };
+
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
+
+            this.validate = function() {
+                if (args.column.validator) {
+                    var validationResults = args.column.validator($input.val());
+                    if (!validationResults.valid)
+                        return validationResults;
+                }
+
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        },
+
+        IntegerCellEditor : function(args) {
+            var $input;
+            var defaultValue;
+            var scope = this;
+
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-text' />");
+
+                $input.bind("keydown.nav", function(e) {
+                    if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
+                        e.stopImmediatePropagation();
+                    }
+                });
+
+                $input.appendTo(args.container);
+                $input.focus().select();
+            };
+
+            this.destroy = function() {
+                $input.remove();
+            };
+
+            this.focus = function() {
+                $input.focus();
+            };
+
+            this.loadValue = function(item) {
+                defaultValue = item[args.column.field];
+                $input.val(defaultValue);
+                $input[0].defaultValue = defaultValue;
+                $input.select();
+            };
+
+            this.serializeValue = function() {
+                return parseInt($input.val(),10) || 0;
+            };
+
+            this.applyValue = function(item,state) {
+                item[args.column.field] = state;
+            };
+
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
+
+            this.validate = function() {
+                if (isNaN($input.val()))
+                    return {
+                        valid: false,
+                        msg: "Please enter a valid integer"
+                    };
+
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        },
+
+        DateCellEditor : function(args) {
+            var $input;
+            var defaultValue;
+            var scope = this;
+            var calendarOpen = false;
+
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-text' />");
+                $input.appendTo(args.container);
+                $input.focus().select();
+                $input.datepicker({
+                    showOn: "button",
+                    buttonImageOnly: true,
+                    buttonImage: "../images/calendar.gif",
+                    beforeShow: function() { calendarOpen = true },
+                    onClose: function() { calendarOpen = false }
+                });
+                $input.width($input.width() - 18);
+            };
+
+            this.destroy = function() {
+                $.datepicker.dpDiv.stop(true,true);
+                $input.datepicker("hide");
+                $input.datepicker("destroy");
+                $input.remove();
+            };
+
+            this.show = function() {
+                if (calendarOpen) {
+                    $.datepicker.dpDiv.stop(true,true).show();
+                }
+            };
+
+            this.hide = function() {
+                if (calendarOpen) {
+                    $.datepicker.dpDiv.stop(true,true).hide();
+                }
+            };
+
+            this.position = function(position) {
+                if (!calendarOpen) return;
+                $.datepicker.dpDiv
+                    .css("top", position.top + 30)
+                    .css("left", position.left);
+            };
+
+            this.focus = function() {
+                $input.focus();
+            };
+
+            this.loadValue = function(item) {
+                defaultValue = item[args.column.field];
+                $input.val(defaultValue);
+                $input[0].defaultValue = defaultValue;
+                $input.select();
+            };
+
+            this.serializeValue = function() {
+                return $input.val();
+            };
+
+            this.applyValue = function(item,state) {
+                item[args.column.field] = state;
+            };
+
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
+
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        },
+
+        YesNoSelectCellEditor : function(args) {
+            var $select;
+            var defaultValue;
+            var scope = this;
+
+            this.init = function() {
+                $select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>");
+                $select.appendTo(args.container);
+                $select.focus();
+            };
+
+            this.destroy = function() {
+                $select.remove();
+            };
+
+            this.focus = function() {
+                $select.focus();
+            };
+
+            this.loadValue = function(item) {
+                $select.val((defaultValue = item[args.column.field]) ? "yes" : "no");
+                $select.select();
+            };
+
+            this.serializeValue = function() {
+                return ($select.val() == "yes");
+            };
+
+            this.applyValue = function(item,state) {
+                item[args.column.field] = state;
+            };
+           
+            this.isValueChanged = function() {
+                return ($select.val() != defaultValue);
+            };
+
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        },
+
+        YesNoCheckboxCellEditor : function(args) {
+            var $select;
+            var defaultValue;
+            var scope = this;
+
+            this.init = function() {
+                $select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus>");
+                $select.appendTo(args.container);
+                $select.focus();
+            };
+
+            this.destroy = function() {
+                $select.remove();
+            };
+
+            this.focus = function() {
+                $select.focus();
+            };
+
+            this.loadValue = function(item) {
+                defaultValue = item[args.column.field];
+                if (defaultValue)
+                    $select.attr("checked", "checked");
+                else
+                    $select.removeAttr("checked");
+            };
+
+            this.serializeValue = function() {
+                return $select.attr("checked");
+            };
+
+            this.applyValue = function(item,state) {
+                item[args.column.field] = state;
+            };
+
+            this.isValueChanged = function() {
+                return ($select.attr("checked") != defaultValue);
+            };
+
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        },
+
+        PercentCompleteCellEditor : function(args) {
+            var $input, $picker;
+            var defaultValue;
+            var scope = this;
+
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-percentcomplete' />");
+                $input.width($(args.container).innerWidth() - 25);
+                $input.appendTo(args.container);
+
+                $picker = $("<div class='editor-percentcomplete-picker' />").appendTo(args.container);
+                $picker.append("<div class='editor-percentcomplete-helper'><div class='editor-percentcomplete-wrapper'><div class='editor-percentcomplete-slider' /><div class='editor-percentcomplete-buttons' /></div></div>");
+
+                $picker.find(".editor-percentcomplete-buttons").append("<button val=0>Not started</button><br/><button val=50>In Progress</button><br/><button val=100>Complete</button>");
+
+                $input.focus().select();
+
+                $picker.find(".editor-percentcomplete-slider").slider({
+                    orientation: "vertical",
+                    range: "min",
+                    value: defaultValue,
+                    slide: function(event, ui) {
+                        $input.val(ui.value)
+                    }
+                });
+
+                $picker.find(".editor-percentcomplete-buttons button").bind("click", function(e) {
+                    $input.val($(this).attr("val"));
+                    $picker.find(".editor-percentcomplete-slider").slider("value", $(this).attr("val"));
+                })
+            };
+
+            this.destroy = function() {
+                $input.remove();
+                $picker.remove();
+            };
+
+            this.focus = function() {
+                $input.focus();
+            };
+
+            this.loadValue = function(item) {
+                $input.val(defaultValue = item[args.column.field]);
+                $input.select();
+            };
+
+            this.serializeValue = function() {
+                return parseInt($input.val(),10) || 0;
+            };
+
+            this.applyValue = function(item,state) {
+                item[args.column.field] = state;
+            };
+
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ((parseInt($input.val(),10) || 0) != defaultValue);
+            };
+
+            this.validate = function() {
+                if (isNaN(parseInt($input.val(),10)))
+                    return {
+                        valid: false,
+                        msg: "Please enter a valid positive number"
+                    };
+
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        },
+
+        StarCellEditor : function(args) {
+            var $input;
+            var defaultValue;
+            var scope = this;
+
+            function toggle(e) {
+                if (e.type == "keydown" && e.which != 32) return;
+
+                if ($input.css("opacity") == "1")
+                    $input.css("opacity", 0.5);
+                else
+                    $input.css("opacity", 1);
+
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+
+            this.init = function() {
+                $input = $("<IMG src='../images/bullet_star.png' align=absmiddle tabIndex=0 title='Click or press Space to toggle' />")
+                    .bind("click keydown", toggle)
+                    .appendTo(args.container)
+                    .focus();
+            };
+
+            this.destroy = function() {
+                $input.unbind("click keydown", toggle);
+                $input.remove();
+            };
+
+            this.focus = function() {
+                $input.focus();
+            };
+
+            this.loadValue = function(item) {
+                defaultValue = item[args.column.field];
+                $input.css("opacity", defaultValue ? 1 : 0.2);
+            };
+
+            this.serializeValue = function() {
+                return ($input.css("opacity") == "1");
+            };
+
+            this.applyValue = function(item,state) {
+                item[args.column.field] = state;
+            };
+
+            this.isValueChanged = function() {
+                return defaultValue != ($input.css("opacity") == "1");
+            };
+
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        },
+
+        /*
+         * An example of a "detached" editor.
+         * The UI is added onto document BODY and .position(), .show() and .hide() are implemented.
+         * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
+         */
+        LongTextCellEditor : function (args) {
+            var $input, $wrapper;
+            var defaultValue;
+            var scope = this;
+
+            this.init = function() {
+                var $container = $("body");
+
+                $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
+                    .appendTo($container);
+
+                $input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0'>")
+                    .appendTo($wrapper);
+
+                $("<DIV style='text-align:right'><BUTTON>Save</BUTTON><BUTTON>Cancel</BUTTON></DIV>")
+                    .appendTo($wrapper);
+
+                $wrapper.find("button:first").bind("click", this.save);
+                $wrapper.find("button:last").bind("click", this.cancel);
+                $input.bind("keydown", this.handleKeyDown);
+
+                scope.position(args.position);
+                $input.focus().select();
+            };
+
+            this.handleKeyDown = function(e) {
+                if (e.which == $.ui.keyCode.ENTER && e.ctrlKey) {
+                    scope.save();
+                }
+                else if (e.which == $.ui.keyCode.ESCAPE) {
+                    e.preventDefault();
+                    scope.cancel();
+                }
+                else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
+                    e.preventDefault();
+                    grid.navigatePrev();
+                }
+                else if (e.which == $.ui.keyCode.TAB) {
+                    e.preventDefault();
+                    grid.navigateNext();
+                }
+            };
+
+            this.save = function() {
+                args.commitChanges();
+            };
+
+            this.cancel = function() {
+                $input.val(defaultValue);
+                args.cancelChanges();
+            };
+
+            this.hide = function() {
+                $wrapper.hide();
+            };
+
+            this.show = function() {
+                $wrapper.show();
+            };
+
+            this.position = function(position) {
+                $wrapper
+                    .css("top", position.top - 5)
+                    .css("left", position.left - 5)
+            };
+
+            this.destroy = function() {
+                $wrapper.remove();
+            };
+
+            this.focus = function() {
+                $input.focus();
+            };
+
+            this.loadValue = function(item) {
+                $input.val(defaultValue = item[args.column.field]);
+                $input.select();
+            };
+
+            this.serializeValue = function() {
+                return $input.val();
+            };
+
+            this.applyValue = function(item,state) {
+                item[args.column.field] = state;
+            };
+
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
+
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        }
+
+    };
+
+    $.extend(window, SlickEditor);
+
+})(jQuery);