diff --git a/addons/base/static/src/js/views.js b/addons/base/static/src/js/views.js
index 5e1d6be4f61..1bc0f896ee6 100644
--- a/addons/base/static/src/js/views.js
+++ b/addons/base/static/src/js/views.js
@@ -219,7 +219,7 @@ openerp.base.ViewManager =  openerp.base.Controller.extend({
     },
     /**
      * Event launched when a controller has been inited.
-     * 
+     *
      * @param {String} view_type type of view
      * @param {String} view the inited controller
      */
@@ -525,7 +525,7 @@ openerp.base.View = openerp.base.Controller.extend({
      * Directly set a view to use instead of calling fields_view_get. This method must
      * be called before start(). When an embedded view is set, underlying implementations
      * of openerp.base.View must use the provided view instead of any other one.
-     * 
+     *
      * @param embedded_view A view.
      */
     set_embedded_view: function(embedded_view) {
@@ -541,7 +541,11 @@ openerp.base.views = new openerp.base.Registry();
 openerp.base.json_node_to_xml = function(node, single_quote, indent) {
     // For debugging purpose, this function will convert a json node back to xml
     // Maybe usefull for xml view editor
-    if (typeof(node.tag) !== 'string' || !node.children instanceof Array || !node.attrs instanceof Object) {
+
+    if (typeof(node) === 'string') {
+        return node;
+    }
+    else if (typeof(node.tag) !== 'string' || !node.children instanceof Array || !node.attrs instanceof Object) {
         throw("Node a json node");
     }
     indent = indent || 0;
diff --git a/addons/base_kanban/__openerp__.py b/addons/base_kanban/__openerp__.py
index 81f7228c1cb..df1fe37564c 100644
--- a/addons/base_kanban/__openerp__.py
+++ b/addons/base_kanban/__openerp__.py
@@ -3,8 +3,10 @@
     "version" : "2.0",
     "depends" : ["base"],
     "js": [
-       "static/src/js/kanban.js"
+        "static/src/js/kanban.js"
+    ],
+    "css": [
+        "static/src/css/kanban.css"
     ],
-    "css": [],
     'active': True
 }
diff --git a/addons/base_kanban/static/src/js/kanban.js b/addons/base_kanban/static/src/js/kanban.js
index f10b0d45c37..72b47b4c99e 100644
--- a/addons/base_kanban/static/src/js/kanban.js
+++ b/addons/base_kanban/static/src/js/kanban.js
@@ -1,4 +1,5 @@
 openerp.base_kanban = function (openerp) {
+QWeb.add_template('/base_kanban/static/src/xml/base_kanban.xml');
 openerp.base.views.add('kanban', 'openerp.base_kanban.KanbanView');
 openerp.base_kanban.KanbanView = openerp.base.View.extend({
 
@@ -8,22 +9,73 @@ openerp.base_kanban.KanbanView = openerp.base.View.extend({
         this.dataset = dataset;
         this.model = this.dataset.model;
         this.view_id = view_id;
+        this.element_id = element_id;
     },
 
     start: function() {
         this.rpc("/base_kanban/kanbanview/load",
         {"model": this.model, "view_id": this.view_id}, this.on_loaded);
     },
-
     on_loaded: function(data) {
+        var self = this;
         var template_xml = '';
+
         _.each(data.fields_view.arch.children, function(child) {
             if (child.tag == "template"){
                 template_xml = openerp.base.json_node_to_xml(child, true)
             }
         });
-        console.log(":template_xml:::",template_xml);
+
+        if(template_xml){
+            self.dataset.read_slice([], 0, false, function (records) {
+                self.on_show_data(records, template_xml);
+	        });
+	    }
     },
+
+    on_show_data: function(records, template_xml) {
+        var self = this;
+        var new_qweb = new QWeb2.Engine();
+        new_qweb.add_template('<templates><t t-name="custom_template">' + template_xml + '</t></templates>')
+
+		self.$element.html(QWeb.render("KanbanBiew", {"records" :records}));
+        _.each(records, function(record) {
+            self.$element.find("#data_" + record.id).append(new_qweb.render('custom_template', record));
+        });
+
+		this.$element.find(".column").sortable({
+		    connectWith: ".column"
+		});
+		this.$element.find(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
+		    .find(".portlet-header")
+		        .addClass("ui-widget-header ui-corner-all")
+		        .prepend( "<span class='ui-icon ui-icon-closethick'></span><span class='ui-icon ui-icon-minusthick'></span>")
+		        .end()
+		    .find( ".portlet-content" );
+
+		this.$element.find(".portlet-header .ui-icon").click(function() {
+		    $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
+		    $(this).parents(".portlet:first").find(".portlet-content").toggle();
+		});
+		this.$element.find('.portlet .ui-icon-closethick').click(this.on_close_action);
+		this.$element.find(".column").disableSelection();
+		this.$element.find(".ui.item").css("background-color","#c3dAf9");
+
+		//self.$element.find( ".column" ).css("width",column_width);
+    },
+
+    on_close_action: function(e) {
+        $(e.currentTarget).parents('.portlet:first').remove();
+    },
+
+    do_show: function () {
+        this.$element.show();
+    },
+
+    do_hide: function () {
+        this.$element.hide();
+    },
+
 });
 };