I'm very new to AngularJS and so far I'm loving it.
I read that wrapping external libraries into directories is the kosher thing to do, and I understand why that makes sense.
In my efforts to create a 'slickgrid' directive, I found very little info on the web. This question over here provides an example of slickgrid as a directive: Slick Grid wrapped in directive (angular), some options not work (resize and drag&drop columns)
But is that the correct way of doing it? The way that person did it, every <div slickgrid> will initialize with the same settings and data.
In my app, I'll need many instances of slickgrid, and columns will differ from instance to instance, as well as the data, of course.
So how should I link a particular <div slickgrid> to the data that is supposed to display then?
thank you very much for your time
as SlickGrid has way too much options - there's no really big sense in writing a directive, that fully incapsulates it. You should better initiate different grids in different controllers. And maybe move column and formatter definitions to a separate service
So the code will be something like that:
angular.module('app').controller('grid1controller', function(){
...
$scope.grid = new Slick.Grid("#grid1", $scope.data, grid1columns, grid1options);
...
})
Related
We have a large number of angularJS 1.5 directives (around 100) that we use throughout our applications. We also use slickgrid almost everywhere to display mass amounts of data. A project has recently come up where it would be ideal to be able to use our directives within slickgrid cells. So I've been trying to write a slickgrid editor to generate our directives when you go to edit one of the cells.
It seems as though angularJS doesn't pick up on the directive (because slickgrid doesnt operate within angular) and doesnt attach the element to its lifecycles. so basically the base element and its settings will appear in the HTML like this:
<div class="slick-cell l2 r2 active selected" title="">
<custom-directive></custom-directive>
</div>
but since angularJS doesn't process the directives there's no visible element in the view and none of the transcluded elements are created.
I've tried using $compile to sort of pre render the elements and then send them to slick grid, but that results in multilink errors which I'm not sure how to resolve.
I've also tried using a JS template with the hope that the template could be rendered and then used in a slickgrid editor later, but I haven't had success with that as of yet. I am still trying to make this approach work since I've seen other examples of using templates with slickgrid, but they aren't using angularJS so my situation doesn't quite fit to theirs.
To summarize I'm looking for suggestions on how I might approach this problem. I know slickgrid isn't technically supposed to be used in this fashion but there has to be a way to make this work. Reusing 100+ pieces of code to extend functionality here would be a very huge win.
I want to create a tab control, which supports both static and dynamic tabs.
The dynamic tabs are of N different types, and display their contents according to some id.
I would like to do all that using routing (ui-router probably), since I would like deep linking and all the other benefits that come with it.
I've been trying to find an example on the web, but couldn't find any (I did find some questions resembling this one on other sites though, alas, they were not answered).
The closest thing I found was ui-router-extras which offer functionality that seem to be a good starting place, however, I'm still not sure if what I would like to achieve would be possible using it.
Any ideas if this is possible, any guidelines or suggestions on how to get started ?
I think the best way to create this if you have a lot of tabs would be using a controller for the tabs which has the scope for all sections you want to have, and then a view which ng-repeats through all the tabs, populating your view.
I recommend for the style that you try bootstrap's nav-tabs if they fit your design (http://getbootstrap.com/components/#nav-tabs)
If you have few sections, you could just hardcode the tabs into the view, each with it's ui-sref.
Hi fellow Javascripters,
I am using both Angular and D3 in my project (no jQuery, which I intend to keep this way). One thing that I want to support is to enable users to play with 'raw' tabular data. So, data from a CSV is loaded into my app and displayed in a plain old fashioned table (currently with Angulars ng-repeat). However, I now want to be able to animate that columns of the table get reshuffled. So, as a simple example, I would programmatically want to switch column 2 with column 4 and this transition must be D3-like. Furthermore, easily dragging whole columns to other positions should be possible.
Since I am not really experienced with working with jqLite inside Angular directives, my preference would go out to a solution based on D3. I can then see two possible solutions:
Render all of the data in a regular table using the D3 append functionality. Whenever column order changes, somehow reconstruct the table and create a smooth transition.
Simulate a table with div's and css (not looking forward to that though), to enable easy repositioning of data.
Since both solutions are far from trivial (I would say), I would really like to have some opinions. Do you see any other solutions for me? And if one of these two solutions seems right for you, how would you go about implementing them?
Thanks in advance!
USECASE: I am starting with a project which involves a lot of client side scripting. It is similar to a mini CMS where user can drag and drop html components. Somewhat similar to this. Now I am in a situation where I have to choose a MVC framework for defining the components that the user will be working on. (performing operations like drag, resize, delete etc).
Now the problem I am facing is,in choosing a framework which would be easy to learn and implement. I have the basic knowledge of Javascript and jQuery and have been using it for some time,but no experience with MVC.
My research from past 2 days says backbone.js is good to start,but I would like comments/suggestions over the flexibility it gives on handling html components and DOM elements. How can I store the initial content of the HTML components? (Outer boxes and structure).
Also, how can I handle multiple components of same type? Generating Id's dynamically is an option, but it becomes difficult to manage multiple elements with dynamic ids. Is there any other way they can be handled?
Which framework would it be easy to handle events on these components?
i use backbone for a web app which involves dragging and dropping, and i use jquery ui to implement the drag and drop features. They integrate pretty well imo, when you want to implement a droppable backbone view, for example
render: function(){
var $el = this.$el,
over = false,
origWidth;
if (!this.$el.is('.ui-sortable'))
this.$el.sortable({
revert: false,
axis: 'y',
placeholder: 'placeholder',
items: '.load-order',
containment: this.el,
receive: this.onOrderDrop,
over: this.onOrderOver
out: function(e, ui){
// Resize back to original width
if (over && ui.helper)
ui.helper.stop().animate({width: origWidth}, 'fast');
over = false;
}
update:
with backbone views, you have a skeleton html structure which is then incremented with backbone views.
Each view has a template which is rendered with model data
you can read more about it at Backbone Essentials
also i made a small todolist to demonstrate draggable event with backbone
http://www.github.com/joaoxsouls/todolist
Why do you want to use BackboneJS?
If its not a necessity, and you simply want a drag drop interface, you might want to look at this: http://omshankar.kodingen.com/engine-1.73/
The JavaScript has been minimised only to make it single line. Functions and variables are all intact, which in Chrome can be seen by clicking on {} in Sources
If its an extreme necessity, you can definitely have drag drop in backbone. Only thing is that you might have to initialize a drag drop again in the item's render function, every time its called.
Regarding having an HTML structure, outer box and components, make your HTML the way you want. It can be done. A sample Backbone application: http://omshankar.kodingen.com/exp/backbone-html5-dd/
It also has a drag-drop, but that's dragging image files from your OS into browser, not of your relevance
If you want to store HTML, you can do via local storage, or have that simply in your HTML file. Apply/Make Backbone view only to those parts that are dynamic
I suggest Angular JS? It has great binding and directive features.
AngularJS is great, especially if you couple it with something like ConversationJS:
https://github.com/rhyneandrew/Conversation.JS
I'm not a big fan of how "spaghetti" angular feels, and Conversation allows you to decouple quite a bit of it without changing the way it works. It makes the code base quite a bit cleaner.
I have 3 sets of tabular data I want to display with a JavaScript framework in ASP.NET MVC. I know I can embed a separate grid in a tab, but this seems inefficient especially when large datasets are involved since I imagine 3 separate grids would be created. I haven't found a JavaScript datagrid which emulates what a spreadsheet does with multiple tabs. This example from YUI might come close though:
http://developer.yahoo.com/yui/examples/datatable/dt_dynamicfilter_source.html
I'm a little familiar with jQuery, but would be willing to switch to any framework which makes this easy. I don't really need to edit the data. Any suggestions?
EDIT: I didn't mean this to be about jQuery. Maybe some details about my scenario would help, as suggested in one of the comments. I want to display tabular data from an ordering system containing thousands of records. I'd like 3 tabs:
All orders entered in the system which haven't been paid for yet.
All orders from a specific vendor.
All orders which have been paid for.
Since each category has thousands of rows, I only want to load data if the user starts paging.
I thought having 3 tabs with 3 separate grids (one within each tab) wouldn't be performant. I haven't actually tried though, so I'm probably guilty of prematurely optimizing. I'm looking for a grid with tab support built-in. I don't think there's one for jQuery. Perhaps ExtJS?
Since you tagged this with Ext JS, I'll mention that it's quite simple to render grids into tabs using Ext JS. It also supports deferred load/render, so that only the first tab/grid would load initially, then the others would be loaded on first access. Without knowing your specific requirements it's hard to comment further.
EDIT (based on edited question): Ext grids don't directly support tabbing, but they can be embedded within a TabPanel as I mentioned for the same effect. However, based on your description, it sounds more like a filtering scenario to me. I don't see the point in having the overhead of multiple grids when only one will ever be visible, and each one's purpose is to show a specific view (i.e. filter) of the same data. I would just have a single grid with a toolbar or some other method of providing your toggle between filters, and use Ext's built-in store filtering/querying to create your views on demand. The Ext grid supports paging out of the box (client or server, in your case it would be server for thousands of records). There is also a very popular plugin called LiveGrid that provides for virtual scroll-paging of large data sets.
I'm not necessarily advocating Ext over any other framework -- I just happen to be most familiar with it and I think it could solve your problem quite nicely. I would suggest trying it out for yourself to be sure.
jQuery Grid is kinda what people use a lot. I use it and it's pretty good.
jqGrid Link
I wouldn't draw a grid with three tabs. I'd use a single grid with a tab control and then load data via jQuery as required.
Or maybe have three PartialViews that you can load dynamically when you hit a tab.
You could also use dhtmlx grid.
You could use JS tab object to create tabs.
And use javascript grid framework to create grids and populate data into grids.