Code Monkey home page Code Monkey logo

igniteui-angularjs's Introduction

Ignite UI directives for AngularJS

Node.js CI Coverage Status npm version

Use the directives found in igniteui-angularjs.js to use Ignite UI controls in AngularJS pages. Work with the running samples here or quickly bootstrap your AngularJS project with this preconfigured application - Ignite UI AngularJS seed.

IMPORTANT The repository has been renamed from igniteui-angular to igniteui-angularjs. This is to avoid confusion caused by the new naming convention of Angular.

Requirements

Note: The Ignite UI AngularJS directives do not work with the Ignite UI ASP.NET MVC Helpers

Install

You can install this package either with npm or with bower. This is a development repo!

igniteui-angularjs depends on the ignite-ui-full licensed package. Follow this guide on setting up access to the Ignite UI private npm feed and add the dependency to the package.json.

"dependencies": {
	"@infragistics/ignite-ui-full": "latest"
}

npm

npm install igniteui-angularjs

bower

bower install igniteui-angularjs

Building

Build will produce an obfuscated and minified version of the src/igniteui-angularjs.js in the dist/igniteui-angularjs.min.js.
The build will also put the original and the minified version of the src/igniteui-angularjs.js in the dist/npm for distribution to npm. The build uses Grunt, so you need Node.js installed on your machine.
To build the project use the following steps:

  1. Open a console in the folder where the igniteui-angularjs project is located
  2. Run npm install
  3. Run grunt build

Getting Started

There are two ways of getting started with the Ignite UI directives. The first one is to use the Ignite UI AngularJS quick start application which is described below. The other way is to configure the application yourself following the page setup instructions step by step.

Ignite UI AngularJS quick start application

Ignite UI AngularJS seed is an application skeleton for a typical AngularJS web app using the Ignite UI directives for AngularJS. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.

The seed contains a sample AngularJS application and is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.

Page setup

In the page markup include the Ignite UI AngularJS directives file found in dist/igniteui-angularjs.min.js along with the Ignite UI scripts:

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="angular.min.js"></script>

<script src="infragistics.core.js"></script>
<script src="infragistics.lob.js"></script>

<script src="igniteui-angularjs.min.js"></script>

Reference the igniteui-directives in your AngularJS module:

var sample_app = angular.module('igniteui-sample-app', ['igniteui-directives']);

Initializing controls

Controls can be initialized in two ways:

  1. Markup Initialization: directly in an HTML page by using custom tags
  2. Controller Initialization: a control placeholder is located in an HTML page, but its initialization options are located in the page controller

Markup Initialization

Custom tags

Each control implements a custom tag directive where the tag name is formed by splitting each capital letter in the control name with the - symbol (This naming convention follows the standard AngularJS normalization process).

Note: It is recommended to use closing tags (</ig-combo>) over the self-closing tags (<ig-combo/>), because the latter are known to make issues on some browsers (depending on the used document mode).

Examples:

Control Name Tag
igCombo <ig-combo>
igGrid <ig-grid>
igDataChart <ig-data-chart>
igDialog <ig-dialog>
igDateEditor <ig-date-editor>
igEditor <ig-editor>
igMaskEditor <ig-mask-editor>
igNumericEditor <ig-numeric-editor>
igPercentEditor <ig-percent-editor>
igTextEditor <ig-text-editor>
igDatePicker <ig-date-picker>
igTree <ig-tree>
igMap <ig-map>
igUpload <ig-upload>
igVideoPlayer <ig-video-player>

Configuring Control Options

Simple type control options (string, number, bool etc.) are configured as an attributes on the control element. The options follow the same naming convention logic as the tag name.

Examples:

Option Markup
igGrid.options.localSchemaTransform <ig-grid local-schema-transform="true">
igCombo.options.caseSensitive <ig-combo case-sensitive="true">

Defining complex type control options (arrays & objects) are configured as a child elements of the main control.

Example:

<ig-grid>
	<features>
		<feature name="Filtering">
		</feature>
	</features>
</ig-grid>

Handling events

Binding to control events is done again with attributes. Event attribute names are prefixed with the prefix event- followed by the event name delimited with the - symbol. Once defined the attribute values corresponds to a function name in the scope so you can gain access to the events.

Examples:

Event Markup
igGrid.events.dataBind <ig-grid event-data-bind="dataBindHandler">
igCombo.events.textChanged <ig-combo event-text-changed="textChangedHandler">
igDateEditor.events.keypress <ig-date-editor event-keypress="keypressHandler">

Controller Initialization

Each control also implements a custom attribute directive where the attribute name is formed by splitting each capital letter in the control name with the - symbol (this naming convention follows the standard AngularJS normalization process) and the attribute value corresponds to the scope object holding the control options.

Examples:

Control Markup
igCombo <div id="combo" data-ig-combo="combo_options"></div>
igGrid <table id="grid" data-ig-grid="grid_options"></table>
igDataChart <div id="chart" data-ig-data-chart="data_chart_options"></div>
igDialog <div id="dialog" data-ig-dialog="dialog_options"></div>
igDateEditor <input id="dialog" data-ig-date-editor="date_editor_options"></input>
igEditor <input id="editor" data-ig-editor="editor_options"></input>
igMaskEditor <input id="editor" data-ig-mask-editor="mask_editor_options"></input>
igNumericEditor <input id="editor" data-ig-numeric-editor="numeric_editor_options"></input>
igPercentEditor <input id="editor" data-ig-percent-editor="precent_editor_options"></input>
igTextEditor <input id="editor" data-ig-text-editor="text_editor_options"></input>
igDatePicker <input id="editor" data-ig-date-picker="date_picker_options"></input>
igTree <ul id="tree" data-ig-tree="tree_options"></ul>
igMap <div id="map" data-ig-map="map_options"></div>
igUpload <div id="upload" data-ig-upload="upload_options"></div>
igVideoPlayer <div id="video" data-ig-video-player="video_options"></div>

Element placeholder considerations

By default all controls have default element placeholders. You can configure element placeholder by setting the element attribute to a name of a DOM element.

Example: <ig-text-editor id="editor1" text-mode="multiline" element="textarea"></ig-text-editor>

One-way Data Binding

The following controls currently support one-way data binding:

  1. igHtmlEditor
  2. igDataChart
  3. igSparkline
  4. igFunnelChart

Two-way Data Binding

The following controls currently support two-way data binding:

  1. igGrid
  2. igCombo
  3. igEditors
  4. igTree

Note: When using control API methods which modify the data source outside the AngularJS framework you need to explicitly call Scope.$apply() in order to see AngularJS view updated.

Testing

There are two kinds of tests in igniteui-angularjs: Unit tests and End to End tests. All of them are written in Jasmine.

Setup

Simply do:

npm install

The command is preconfigured and it will also call bower install behind the scenes.

Then you need to instrument the source file with:

npm run instrument

Running Unit Tests

The easiest way to run the unit tests is to use the npm script:

npm test

This will start the Karma test runner and execute the tests. By default the browser is Chrome.

To run the tests for a single run you can use:

npm run test-single

To run the tests on Firefox you can use:

npm run test-single-firefox

End to end testing

These tests are run with the Protractor test runner, it simulates interaction.

Setup

Before proceeding you need to download and install the latest version of the stand-alone WebDriver tool:

npm run update-webdriver

After that make sure you have Java Development Kit (JDK) installed on your machine. It is required for the Standalone Selenium Server.

Running tests

So first the web server should be brought up so that Protractor can execute the tests against it:

npm start

Running the tests is done with:

npm run protractor

Note: You will need to run the protractor on a separate bash

Code coverage

After running the Karma or Protractor tests by default a coverage will be created for each of them.

To combine the both reports into one single report you need to execute:

npm run cover-combined

After that the default directory where you can open the code coverage is igniteui-angularjs/coverage/final/lcov/src.

Running specific coverage:

To view only the Karma coverage you can see it under coverage/karma/**/lcov-report/src.

To view the code coverage only for the Protractor you need to run the command:

npm run cover-protractor

After that the location is the same(igniteui-angularjs/coverage/final/lcov/src). That is because the Protractor report is not easily readable by default.


What is Ignite UI?   Ignite UI Logo

Ignite UI is an advanced HTML5+ toolset that helps you create stunning, modern Web apps. Building on jQuery and jQuery UI, it primarily consists of feature rich, high-performing UI controls/widgets such as all kinds of charts, data visualization maps, (hierarchical, editable) data grids, pivot grids, enhanced editors (combo box, masked editors, HTML editor, date picker, to name a few), flexible data source connectors, and a whole lot more. Too many to list here - check out the site for more info and to download a trial.

Ignite UI is not just another library created in someone's free time. It is commercial-ready, extremely well-tested, tuned for top performance, designed for good UX, and backed by Infragistics, an experience-focused company with a track record of over 24 years of experience in providing enterprise-ready, high-performance user interface tools for web, windows and mobile environments.

Infragistics Logo

igniteui-angularjs's People

Contributors

bugsancho avatar craigshoemaker avatar damyanpetev avatar dependabot[bot] avatar dkamburov avatar hanastasov avatar ighvarma avatar kdinev avatar mayakirova avatar mikalai-ramashka avatar mpavlinov avatar skrustev avatar zdrawku avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

igniteui-angularjs's Issues

Runtime Error

I'm using "ig-hierarchical-grid" component to display all the data in the hierarchical order. In that, I want to send the columns as array from the controller. see the setup here

<ig-hierarchical-grid id="grid1"
                          data-source="igGrid.data"
                          width="100%"
                          height="400px"
                          auto-commit="true"
                          auto-generate-columns="false"
                          auto-generate-layouts="false"
columns="igGrid.columns" />

But I'm getting Cannot read property 'css' of undefined in the console. Also, there is no samples to display all the column names from the controller every thing in the html in the samples folder but in jquery seems it has.

http://www.igniteui.com/hierarchical-grid/angular

I followed the above link to run. Can any one help me what I made wrong?. Is it possible to pass all the configuration data from the controller right?. also can you provide some sample which will pass it from controller. I'm fetching the JSON from REST API so I want to make as runtime.

Data chart within ng-if or ng-switch

I've been having problems with putting these directives within ng-ifs/ng-switches. I can see the rendered canvases (in dev tools), the borders show the chart to be of the correct size but I get a completely blank chart. Any ideas would be greatly appreciated.

Feature Events Not Fired in Controller & Paging Not Initializing

While trying to build a master/detail sample with the grid, I am running into the following issues:

  • While events off the grid itself seem to fire okay (e.g., rendered), feature events (e.g., rowSelectionChanged) don't call the matching function in the controller's scope
  • Paging doesn't initialize correctly (it doesn't create pages until you sort or somehow otherwise manipulate the grid)

I created the feature-events-paging branch to illustrate the issue.

Catching Add New Row for Validation

How do I catch a new row before it's added to the data source? I tried using the event handing on my igGrid, but could not get it to work.

HTML:

    <ig-grid id="gridShopShifts"
                 data-source="shopShifts"
                 width="100%"
                 height="100%"
                 primary-key="ShiftKey"
                 auto-commit="true"
                 auto-generate-columns="false"
                 event-data-bind="shiftBindHandler()">
     .....
     </ig-grid>

Controller:

    $scope.shiftBindHandler = function () {
        console.log('Called Handler');
    }

Is this the proper way? Is there an easier way of handling this?

Using grid formatter function

How would one go about using a formatter function to map nested values in the grid? For example in order to map a value within nested objects in the ignite grid, you need to do the following -

headerText: "Quantity", key: "Results", dataType: "object", formatter: function(val){
return val.Quantity;
},

igTree performance

Hi,
Is igTree virtualized? can it support around 100K nodes under a single parent and around 1M nodes total without lagging?
also does it have the option to add selection by checkbox with tri state?

Thanks,
Jonathan

Creating a grid directive using controller initialization.

Could an example showing how to define a grid using controller initialization be added to the documentation.

In my case, I am trying to create a directive based on the hierarchical grid that encapsulates it data source etc and would prefer to have the initialization done from within the directive's controller.

Regards

Aidan

igDatePicker dateOptions

Hi,
Is there any documentation how to add datePickerOptions to igDatePicker, using Angular.for example i want to add Month and Year choose in the igDatePicker
Also i am trying to bind a click event to the igDatePicker button (the one that opens the calendar).

igGrid event binding with event-[event name] attribute not working

I'm attempting to register a cellClick handler. My scope method is not called. I've tried the following:

<ig-grid id="grid" event-cell-click="cellClickHandler">

<ig-grid id="grid" event-data-bind="dataBindHandler">

My controller method looks like:

$scope.cellClickHandler = function(evt, ui) { alert('a cell was clicked ' + ui.rowIndex + ':' + ui.colIndex); };

Break Up Sample JavaScript into Separate Files

The sample JavaScript file igniteui-sample.js is 2,625 lines long! Can you please break up this file into logical pieces so when someone (like me, perhaps 😀) wants to make a change - we can find our way around the scripts a bit easier.

Calling dataBind() for controller style igGrid

Hello, i am using the controller style setup or igGrid and am trying to bind my data to the grid after my asynchronous factory call. I however can't quite get the syntax to call dataBind() down. Here is what I have:

factory call:

jobsFactory.getJobs(companyID)
        .then(function (data) {
            $scope.gridData = data.value;
            var grid = angular.element(document.querySelector('#jobNav'));
            grid.dataBind();
        }, function (error) {
            console.log(error);
        });

Grid setup:

    $scope.gridJobNav = {
        dataSource: $scope.gridData,
        width: "1075px",
        height: "400px",
        primaryKey: "JobKey",
        autoCommit: true,
        autoGenerateColumns: false,
        columns: [
                    { "key": "JobKey", "header-text": "Job Key", "width": "0px", "data-type": "number", "hidden": "true" },
                    { "key": "JobID", "header-text": "Job ID", "width": "15%", "data-type": "string" },
                    { "key": "JobName", "header-text": "Job Name", "width": "25%", "data-type": "string" },
                    { "key": "FabLocID", "header-text": "Fab Loc", "width": "0px", "data-type": "string", "hidden": "true" },
                    { "key": "CustID", "header-text": "Cust ID", "width": "0px", "data-type": "string", "hidden": "true" },
                    { "key": "JobStatID", "header-text": "Status", "width": "10%", "data-type": "string" },
                    { "key": "CustName", "header-text": "Customer Name", "width": "50%", "data-type": "string" },
                    { "key": "CompanyID", "header-text": "Company ID", "width": "0px", "data-type": "string", "hidden": "true" }
        ],
        features: [{
            name: "Paging",
            pageSize: 10
        }, {
            name: "Filtering"
        }, {
            name: "Sorting"
        }]

    };

HTML:

<div data-ig-grid="gridJobNav" id="jobNav"></div>   

Is there some place I can find an example how I can do this?

Thanks,
Julie

Cannot set option at runtime using Angular expression binding "{{}}"

It will be good if options can be set using the Angular expression binding "{{}}" like this:

  <feature name="Updating">
                <column-settings>
                    <column-setting column-key="Id">
                        <editor-options read-only="{{IsReadOnly}}"></editor-options>
                    </column-setting>
                </column-settings>

</feature>

igGrid BUG: Hidden column in igGrid is still being displayed

iggrid display bug

Hello,

I have an igGrid and an HTML form binded to one $scope data source. A certain column is set to be hidden in the grid, but it is set to be displayed in the HTML form. When I update the value of the column in the form, the value is incorrectly being displayed in the grid as well. To illustrate the issue better, let's use your example for the AngularJS Grid : http://www.igniteui.com/grid/angular

Using JSFiddle, add the property hidden="true" to the column-key="ProductName". Column Product Name should now be hidden in the grid, then update the value of the Supplier Name (ProductName) in the HTML form, the updated value will be displayed in the Unit Price column in the grid. I have attached an image showing this bug as well.

Could you please fix this?

Thanks

Pivot Grid

Hi,

Are there any plans to create an IgPivot?

It seems to be the only one missing.

nested options not working when inside a transcluded template

So in the below snippet, the multi-selection option is not picked up when the template is transcluded, it works fine otherwise:

<ig-combo>
<multi-selection enabled="true" show-checkboxes="true"></multi-selection>
</ig-combo>

So after some digging, it appears this is because of the use of the context jQuery[lite] property. It appears that nodes are cloned if the template is trancluded. I have made a workaround by using the compile property to get a reference to the original tElement:

compile : function(tElem, Attrs) {
            return function (scope, element, attrs, ngModel) {
            // -- igniteui is relying on context (deprecated jquery property)
            // -- context is also not copied when the element is cloned (which happens when using transclusion)
            // -- workaround:
            if (element.context !== tElem.context)
                        element.context = tElem.context;
            ...

Undefined ig-data-chart dataSource

If the data source for the ig-data-chart is undefined, ds.push fails as push not accessible on undefined. This would be expected, however I'm using deferred execution, which means my data source is not being set/defined straight away.

My current workaround is to set the data source to a blank array and update later, so my controller contains the following:

    $scope.dataChart = new Array();
    result.then(function (response) {
        if (response) {
            $scope.dataChart = response;
        }
    });

It may seem like a non-issue, but as directives such as ng-repeat just works, I was expecting the data chart to do the same.

Using igValidation with igDatePicker

Is there documentation anywhere showing how to use igValidation with an editor? I have been trying to use it with the igDatePicker, but I don't think my syntax is right and I couldn't find anything on validation with igniteui-angular.

Here's my attempt:

<ig-date-picker class="form-control" 
                         id="endDate"
                         ng-model="input.end">
     <validator-options event-check-value='myValidator'>
     </validator-options>                   
</ig-date-picker>
$scope.myValidator= function (evt, ui){
     console.log('called myValidator');
}

Error: cannot call methods on igGrid prior to initialization; attempted to call method 'destroy'

Error: cannot call methods on igGrid prior to initialization; attempted to call method 'destroy'

I have a grid defined

All works well, but when I change the view (via angular-ui-routing) I get the error mentioned above.

It looks like the destroy is called twice on the element via the $broadcast?

See trace:
Error: cannot call methods on igGrid prior to initialization; attempted to call method 'destroy'
at Function.error (http://localhost:3000/scripts/jquery-2.2.3.min.js:2:1813)
at HTMLTableElement. (http://localhost:3000/scripts/jquery-ui.min.js:6:9075)
at Function.each (http://localhost:3000/scripts/jquery-2.2.3.min.js:2:2861)
at n.each (http://localhost:3000/scripts/jquery-2.2.3.min.js:2:845)
at n.e.fn.(anonymous function) as igGrid
at http://localhost:3000/scripts/igniteui-angular.js:650:31
at Scope.$broadcast (http://localhost:3000/scripts/angular.js:17552:28)
at Scope.$destroy (http://localhost:3000/scripts/angular.js:17170:14)
at g (http://localhost:3000/scripts/ui-bootstrap-tpls-1.3.2.min.js:8:21013)
at processQueue (http://localhost:3000/scripts/angular.js:15961:28)

AngularJs 1.5.5
Ignite UI 16.1.20161.1009
jQuery 2.2.3
jQuery UI 1.11.4
Angular-ui-bootstrap 1.3.2

An error is thrown when setting columnSettings on feature of igHierarchicalGrid

The following code throws an error

<ig-hierarchical-grid id="grid1" 
         data-source="northwindEmployees" 
         width="100%" 
         height="400px" 
         auto-commit="true" 
         auto-generate-columns="false"
         auto-generate-layouts="false">
    <columns>
        <column key="FirstName" header-text="First Name" width="25%" data-type="string"></column>
        <column key="LastName" header-text="Last Name"  width="25%"  data-type="string"></column>
        <column key="Title" header-text="Title"  width="25%" data-type="string"></column>
        <column key="BirthDate" header-text="Birth Date"  width="25%" data-type="date"></column>
    </columns>
    <column-layouts>
        <column-layout key="Orders" response-data-key="results" primary-key="OrderID" auto-generate-columns="false" width="100%">
            <columns>
                <column key="OrderID" header-text="OrderID" width="25%" data-type="string"></column>
                <column key="Freight" header-text="Freight"  width="25%"  data-type="string"></column>
                <column key="ShipName" header-text="ShipName"  width="25%" data-type="string"></column>
                <column key="ShipAddress" header-text="ShipAddress"  width="25%" data-type="string"></column>
            </columns>
        </column-layout>
    </column-layouts>
    <features>
        <feature name="Sorting">
            <column-settings>
                  <column-setting column-key="FirstName" allow-sorting="false">
             </column-setting>
          </column-settings>
        </feature> 
    </features>
</ig-hierarchical-grid>

Updating a record using igGrid two-way data binding truncates the first character when a template is used.

On line 331, why is the first character being removed (.substring(1)) from the result when using a column template? My column template has a "<div>" at the start of it and this line of code is removing the opening bracket causing the browser to render the cell incorrectly.

                    if (column.template || grid.options.rowTemplate) {
                        newFormattedVal = grid
                            ._renderTemplatedCell(diff[ i ].txlog[ j ].newVal, column)
                            .substring(1);
                    } else {
                        newFormattedVal = grid
                            ._renderCell(diff[ i ].txlog[ j ].newVal, column, record);
                    }

Updating the dataSource updates the data only and not schema

Pointing the dataSource to new data only updates the data in the existing columns which match the columns from the previous data. The table is not redrawn with the new data schema.

How do I refresh the table to draw data with the new schema that I am supplying at runtime?

ig-hierearchical grid

I am porting an app with infragustics grid from knockout to angular, i am stuck at the below scenario

have a template data-bind="template: { name: 'childDataTemplate'}" which i am setting using childDiv.setAttribute("data-bind", "template: { name: 'childDataTemplate'}");

and the template i have in my page as <script id="childtemplate"></script>

On expand of child div i need to render this template inside the childdiv area where i have a child grid and some other fields coming from template

is this possible with angular ig directive? if yes What all infragustics plugins are needed for this, it would be great if u can giv a fiddle

Thanks.

igPivotGrid issue

Hhi,

I am trying the igpivotgrid and there is a wired issue, i get an error 1 on loading the pivot even though the pivot table is shown correctly and when i try to change the object of the pivot table i get error 2.

This happens randomly, sometimes it works totally fine and some times it gives these errors.

  1. TypeError: Cannot read property 'top' of undefined
  2. Error: cannot call methods on igPivotGrid prior to initialization; attempted to call method 'destroy'

error 1 occurs on this line
columnsOverlayTop = firstColumnHeaderPosition.top + headersTable.parent().parent().position().top;

in infrajistics.lob.js

URGENT Help needed. Thanks in advance

IgPivotGrid

Hi,

I'm just experimenting using the Pivot Grid using a OlapFlatDataSource.

I have a function that sets the Pivot data

 var data = [{ "ProductCategory": "Clothing", "UnitPrice": 12.81, "SellerName": "Stanley Brooker", "Country": "Bulgaria", "City": "Plovdiv", "Date": "01/01/2012", "UnitsSold": 282 }];

setPivotData(data);

 function setPivotData(data){
        $scope.pivotData = new $.ig.OlapFlatDataSource({
         dataSource:data,
         metadata: {
             cube: {
                 name: "Sales",

etc...

The above works fine.

If try to set the pivot data using data from the server after my promise is resolved nothing happens

   myService.getData().then(function(result){
            //This doesn't work using the data array already set in the data variable as above.
            setPivotData(data);
            //This doesn't work using the result from the server
            setPivotData(result);
        });

Tried using $apply with no luck.

I'd be grateful for any help.

Show Tooltip on ig-data-chart not displaying

Update: This was my fault, had some weird issues with the CSS. This isn't an issue at all.

Setting show-tooltip to true results in a small box being displayed next to the cursor, I haven't got exact dimensions, but it is around 2x2px - not information is displayed. Using the same options with the standard IgniteUI controls works as expected.

I tried manually specifying a tooltip template, with no success.

How to bind the cellClick event?

Dear igniteui-angular Team

I have started to use igniteui-angular but I'm not able to bind the cellClick event.
Do you have an example how to bind a viewmodel-event?

Can't get samples to run locally

I've downloaded from git. Ran npm install and grunt build. I simply double click index.html and that page takes over 2 minutes to show anything. I click on a sample and those pages take over 2 minutes to load and when they do the sample do not show correctly at all. Like there is no styling at all.

What's going on? I simply want to run the sample local to play with and when I do have the patience to wait for the pages to load locally they look like crap. For example, here is what my Layout Manager looks like after waiting for it to load locally.

untitled

Can't get first step to work [SOLVED]

Hello,

I'm pretty new to JS so please excuse any stupid mistakes. I've downloaded the igniteui-angular zip and placed on my Windows 7, 64-bit box. I've installed Node.js for Windows 64-bit. From my igniteui-angular folder I'm just trying to get the samples going so I run "npm install". The following is the console output.

D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master>npm install
npm WARN package.json igniteui-angular@ No repository field.
npm ERR! git clone https://github.com/pipobscure/fsevents undefined
npm ERR! git clone https://github.com/pipobscure/fsevents undefined
npm WARN optional dep failed, continuing fsevents@git+https://github.com/pipobscure/fsevents#7dcdf9fa3f8956610fd6f69f72c67bace2de7
138
\

[email protected] install D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master\node_modules\karma\node_modules\so
cket.io\node_modules\socket.io-client\node_modules\ws
(node-gyp rebuild 2> builderror.log) || (exit 0)

|
|

\socket.io-client\node_modules\ws>node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin....\node_modules\node-gyp\bin

\node-gyp.js" rebuild

[email protected] install D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master\node_modules\karma-phantomj
s-launcher\node_modules\phantomjs
node install.js

Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-windows.zip
Saving to C:\Users\Dale-HP\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip
Receiving...
[==============================----------] 76% 0.0s
Received 7292K total.
Extracting zip contents
Removing D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master\node_modules\karma-phantomjs-launcher\node_mo
dules\phantomjs\lib\phantom
Copying extracted folder C:\Users\Dale-HP\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-extract-1416060756747\phantomjs
-1.9.8-windows -> D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master\node_modules\karma-phantomjs-launche
r\node_modules\phantomjs\lib\phantom
Removing C:\Users\Dale-HP\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-extract-1416060756747
Writing location.js file
Done. Phantomjs binary available at D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master\node_modules\karma
-phantomjs-launcher\node_modules\phantomjs\lib\phantom\phantomjs.exe

igniteui-angular@ postinstall D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master
bower install

[?] May bower anonymously report usage statistics to improve the tool over time? No
bower angular-route#1.2.x ENOGIT git is not installed or not in the PATH

npm ERR! igniteui-angular@ postinstall: bower install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the igniteui-angular@ postinstall script.
npm ERR! This is most likely a problem with the igniteui-angular package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! bower install
npm ERR! You can get their info via:
npm ERR! npm owner ls igniteui-angular
npm ERR! There is likely additional logging output above.
npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"

npm ERR! cwd D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master\npm-debug.log
npm ERR! not ok code 0

D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master>npm owner ls igniteui-angular
npm ERR! owner ls Couldn't get owner data igniteui-angular
npm ERR! 404 404 Not Found: igniteui-angular
npm ERR! 404
npm ERR! 404 'igniteui-angular' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.

npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "owner" "
ls" "igniteui-angular"
npm ERR! cwd D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code E404
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master\npm-debug.log
npm ERR! not ok code 0

D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master>

The following is from the log file:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'owner',
1 verbose cli 'ls',
1 verbose cli 'igniteui-angular' ]
2 info using [email protected]
3 info using [email protected]
4 verbose node symlink C:\Program Files\nodejs\node.exe
5 verbose request where is /igniteui-angular
6 verbose request registry https://registry.npmjs.org/
7 verbose request id 12c7a2b47d2d47a4
8 verbose url raw /igniteui-angular
9 verbose url resolving [ 'https://registry.npmjs.org/', './igniteui-angular' ]
10 verbose url resolved https://registry.npmjs.org/igniteui-angular
11 verbose request where is https://registry.npmjs.org/igniteui-angular
12 info trying registry request attempt 1 at 09:15:45
13 http GET https://registry.npmjs.org/igniteui-angular
14 http 404 https://registry.npmjs.org/igniteui-angular
15 verbose headers { date: 'Sat, 15 Nov 2014 14:15:46 GMT',
15 verbose headers server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)',
15 verbose headers 'content-type': 'application/json',
15 verbose headers 'cache-control': 'max-age=0',
15 verbose headers 'content-length': '52',
15 verbose headers 'accept-ranges': 'bytes',
15 verbose headers via: '1.1 varnish',
15 verbose headers age: '0',
15 verbose headers 'x-served-by': 'cache-ord1722-ORD',
15 verbose headers 'x-cache': 'MISS',
15 verbose headers 'x-cache-hits': '0',
15 verbose headers 'x-timer': 'S1416060946.082596,VS0,VE30',
15 verbose headers 'keep-alive': 'timeout=10, max=50',
15 verbose headers connection: 'Keep-Alive' }
16 silly registry.get cb [ 404,
16 silly registry.get { date: 'Sat, 15 Nov 2014 14:15:46 GMT',
16 silly registry.get server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)',
16 silly registry.get 'content-type': 'application/json',
16 silly registry.get 'cache-control': 'max-age=0',
16 silly registry.get 'content-length': '52',
16 silly registry.get 'accept-ranges': 'bytes',
16 silly registry.get via: '1.1 varnish',
16 silly registry.get age: '0',
16 silly registry.get 'x-served-by': 'cache-ord1722-ORD',
16 silly registry.get 'x-cache': 'MISS',
16 silly registry.get 'x-cache-hits': '0',
16 silly registry.get 'x-timer': 'S1416060946.082596,VS0,VE30',
16 silly registry.get 'keep-alive': 'timeout=10, max=50',
16 silly registry.get connection: 'Keep-Alive' } ]
17 error owner ls Couldn't get owner data igniteui-angular
18 error 404 404 Not Found: igniteui-angular
18 error 404
18 error 404 'igniteui-angular' is not in the npm registry.
18 error 404 You should bug the author to publish it
18 error 404
18 error 404 Note that you can also install from a
18 error 404 tarball, folder, or http url, or git url.
19 error System Windows_NT 6.1.7601
20 error command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "owner" "ls" "igniteui-angular"
21 error cwd D:\user\Dropbox\Windscape\Projects\Ignite-AngularJS\igniteui-angular-master
22 error node -v v0.10.33
23 error npm -v 1.4.28
24 error code E404
25 verbose exit [ 1, true ]

Can any help please?

Sorry to waste your time, but maybe this will help the next person. I'd been using GitHub Shell for all of my git work. The issue was simple. Git was not in my windows path.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.