Menu
How can I use Dhtmlx inside an Angular.js application?
Dhtmlx has a lot of components ready to use, but I would like to have also the benefits of Angular.js.
Is it possible to utilize the Dhtmlx components inside Angular.js pages? If so, how?
Can you show me some example code?
927
Here is a basic example of using dhtmlx's grid control in an angular directive. I've built it into a ruby on rails site which adds some other complexity but that's the world i've been working in so that's the example I built.
I'm building a rails 3.1+ app and the js code is all in coffeescript. Just trying to show how to incorporate angular with dhtmlxGrid and rails. This is a view only grid, no binding the grid data to the back end db for this example. I built an angularjs directive to encapsulate the dhtmlxgrid and added attributes to control the properties. I'll leave it as an exercise for the reader to incorporate some dynamic control of the directive attributes. Hope this helps someone... I'm still pretty new to all this so it was fun to build.
Create new rails app Add gems to gemfile:
gem 'ngmin-rails'
gem 'ng-rails-csrf'
gem 'angularjs-rails'
gem 'jquery-ui-rails'
Bundle gems
Create directories for angular code
app/assets/javascripts/angular/controllers
app/assets/javascripts/angular/directives
app/assets/javascripts/angular/services
Add code to app/assets/javascripts/application.js so the assets are added to the project (all of these may not be needed with the require_tree . But I have them in mine)
//= require jquery
//= require jquery_ujs
//= require angular
//= require ng-rails-csrf
//= require angular-resource
//= require_tree ./angular/controllers/.
//= require_tree ./angular/directives/.
//= require_tree ./angular/services/.
//= require_tree ./angular/.
//= require dhtmlx/dhtmlxcommon
//= require dhtmlx/dhtmlxgrid
//= require dhtmlx/dhtmlxgridcell
//= require dhtmlx/dhtmlxdataprocessor
Add the following to the /assets/javascripts/application.js: angular.module("myapp", ["ng-rails-csrf", "MyGridDirective"]);
Download the dhtmlx library files: http://www.dhtmlx.com/x/download/regular/dhtmlxGrid.zip
You need to unzip the file and distribute the library files to specific locations for use in rails: create the following directories in vendor:
Vendor/assets/javascripts/dhtmlx/calendar
Vendor/assets/javascripts/dhtmlx/excells
Vendor/assets/javascripts/dhtmlx/ext
Vendor/assets/sytlesheets/dhtmlx/calendar
Vendor/assets/sytlesheets/dhtmlx/skins
Copy all files from ‘dhtmlxgrid/codebase’ to the corresponding folders of Rails application in the directory ‘vendor/assets’:
js files – copy in ‘vendor/assets/javascripts/dhtmlx’
css files – copy in ‘vendor/assets/stylesheets/dhtmlx’
images – copy in ‘vendor/assets/images/dhtmlx’
Copy all the image files to public/images/dhtmlx --- couldn't get it to work otherwise.
Create a pages controller to work with as a starting point
Rails g controller pages show
Add entries to config/routes and remove get pages line added by generator
Resources :pages
root :to => 'pages#show'
Remove public/index.html page
Change the body html tag in the views/layouts/application.html.erb to:
<body ng-app="myapp">
Change the /views/pages/show.html.erb file contents to the following code:
<h1>AngularJS dhtmlx Grid</h1>
<div>
<dhtmlxgrid ht='500'
width='800'
theme='dhx_skyblue'
header1='"contact list,#cspan,#cspan,#cspan,#cspan,#cspan"'
header2='"id,title,author,price,in stock,date"'
colwidths='"100,200,150,100,75,150"'
colalignments='"center,center,center,center,center,center"'
coltypes='"ro,ro,ro,ro,ro,ro"'
colsorting='"int,str,str,currency,int,date"'></dhtmlxgrid>
</div>
Create file /app/assets/javascripts/angular/directives/dhtmlxgrid.js.coffee with the following contents
angular.module("MyGridDirective", []).directive("dhtmlxgrid", () ->
restrict: 'E'
replace: true
templateUrl: "/partials/dhtmlx.html"
scope:
theme: "="
ht: "="
width: "="
header1: "="
header2: "="
colwidths: "="
colalignments: "="
coltypes: "="
colsorting: "="
link: (scope, element, attrs) ->
scope.data = {rows: [
{id: 1001, data: ["100", "A Time to Kill No ONE!", "John Grisham", "12.99", "1", "05/01/1998"]},
{id: 1002, data: ["1000", "Blood and Smoke", "Stephen King", "0", "1", "01/01/2000"]},
{id: 1003, data: ["-200", "The Rainmaker", "John Grisham", "7.99", "0", "12/01/2001"]},
{id: 1004, data: ["350", "The Green Mile", "Stephen King", "11.10", "1", "01/01/1992"]}
]}
refreshChart = (scope) ->
scope.mygrid = new dhtmlXGridObject("gridbox")
scope.mygrid.setImagePath "/images/dhtmlx/imgs/"
scope.mygrid.setHeader scope.header1
scope.mygrid.attachHeader scope.header2
scope.mygrid.setInitWidths scope.colwidths
scope.mygrid.setColAlign scope.colalignments
scope.mygrid.setColTypes scope.coltypes
scope.mygrid.setColSorting scope.colsorting
scope.mygrid.init()
scope.mygrid.setSkin scope.theme
scope.mygrid.parse scope.data, "json"
refreshChart(scope)
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
