Using Dhtmlx datagrid in rails 3 with calendar and combo box (select box)as column type

Earlier I wrote about using a simple dhtmlx data grid in rails 3. The column type was text box which where editable. As I explored it more I found other column types which can be used with datagrid.

Calendar as column type
To use calendar as column type you have to add some of the js and css. These files can be easily downloaded from the dhtmlx website. Download the zip file and copy the below js and css inside your assests javascript and stylesheets folder.

Javascript files:
dhtmlxgrid/codebase/excell/dhtmlxgrid_excell_dhxcalendar.js
dhtmlxgrid/codebasedhtmlxcommon.js
dhtmlxgrid/codebase/calendar/dhtmlxcalendar.js

CSS files:
dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css
dhtmlxgrid/codebase/calendar/dhtmlxcalendar.css


Now while initializating the datagrid specify the  coltype as dhxCalendar

            var grid = new dhtmlXGridObject("grid_here");

            grid.setImagePath("");

            grid.setHeader("Name, Amount");

           

            grid.setColSorting("str,str");

            grid.setInitWidths("150,150");

            grid.setSkin("dhx_skyblue");

            grid.setColTypes("dhxCalendar,ed");

            grid.init();

            grid.load("/decoration/data?decoration="+deco);

            

            dp = new dataProcessor("/decoration/dbaction?decoration="+deco);

            dp.init(grid);

Note:- If you get some error like undefined coltype or somthing. This means that you have not included the correct js. Please check again for all the js files.


Combo box/list box/select box as column type

Specify the setColTypes as "co" if you want to add more options while editing datagrid or else specify "coro" to make it read only.

To add default options to the combo box do the following



      var grid = new dhtmlXGridObject("grid_here");
            
            grid.setImagePath("");
            grid.setHeader("Select number");

            grid.enableMultiselect(true)
            grid.enableLightMouseNavigation(true);
            grid.setInitWidths("100")
            grid.setSkin("dhx_skyblue");
            grid.enableAutoHeight(true);
            grid.enableMultiline(true);
        
            grid.setColTypes("coro");

            var combo1 = grid.getCombo(1); //Here 1 is the id of the column
        
            combo1.put(0,"zero"); // the first data is the value and the second is the data displayed in the dropdown
            combo1.put(2,"two");
    
            grid.init();
      
            grid.load("/visit/data?visit="+deco);
            dp = new dataProcessor("/visit/dbaction?visit="+deco);
            dp.init(grid);