In this blog we will discuss the drag and drop functionality of our Angular Tree.
The Tree component enables the presentation of hierarchical information. It consists of a root item and children of the root item. Each item excluding the root has a parent and can have children. The items on the same level under one parent are called siblings. Each item can be expanded or collapsed and can have a text and an image.
The Drag and Drop functionality represents the capability to move items between different components. An item can be grabbed from the source component by clicking the mouse over it dragged with the mouse to the container component and dropped. This presents a convenient way to move items back and forth between the components.
Angular Tree with Drag and Drop Features
One of the important features is that you can drag and drop items who have also an image.
The above screenshot was taken from our online demo using jqxTree with Angular 6 framework.
The Drag and Drop functionality generates drag start and drag end events for each item.
I addition to that you can also disable or enable elements from being dragged and dropped.
The tree enable also keyboard navigation and right-to-left layout.
You can see an example here.
Our Team prepared a QuickStart video about using jQWidgets with Angular. The tutorial is based on our Angular CLI help documentation topic and shows you how to use Angular CLI along with our Angular components. At the end of the video, you will see up and running BarGauge component. We hope that you will find it useful. The link to the video is: QuickStart Angular project with jQWidgets
Posted in:
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5, AngularJS
Tagged:
angular, angular project, angular quickstart, angular tutorial, angular video, angular6
In this blog we will demonstrate our React Calendar with Week Number.
The React Calendar is a component which is used to show the year, month and date. The years and moths can be changed with the help of left and right arrows in the calendar title bar. The calendar is a widely used when the user needs to select or change dates. In addition to all basic features our React.js calendar supports also Week Numbers.
The Week Number which is sometimes also referred to as week of the year is usually visualized in the first column on the left. The display of the week number is enabled by the showWeekNumbers property which has to be set to true. By default the property is set to false.
React Calendar with Week Number features
One of the important features is the capability to localize the content of the calendar in different languages and date formats.
The component also supports the selection of date ranges. A date range can be selected by clicking on the start and end dates.
Another interesting option is that the calendar can be initially enabled or disabled. In the disabled mode it is not possible to pick up dates.
In addition the calendar is responsive so the width can be drawn in percentages and enables keyboard navigation and right to left layout.
You can see an example here.
In this blog we are going to show you our Angular Radio Button.
The Radio Button is a component which enables the user to choose one of several mutually exclusive options. The options are usually represented one above the other and the Radio Button represents a set of circular buttons for each option. The selected radiobutton changes its appearance.
Angular Radio Button features
You can style the Radio Button and change the background and text colors and the fonts.
The RadioButton enables events which can show you which button got checked or unchecked.
Different themes and button templates can be applied to the radio button.
Keyboard navigation and right to left layout are also supported.
You can see an example here.
For the final part of the series, I am going to demonstrate and explain the portions that resides inside Dynamics CRM (or can possibly be built inside other applications). The solution includes an HTML web resource that contains a subgrid (using JQWidgets, but can be replaced with any third party jquery grid or bootstrap table). The subgrid contains a list of documents that are contained in SharePoint, and provides the functionality to upload or download additional documents.
There are a few custom entities which assist in the design of the layout of the subgrid, and well as javascript files that make up this logic.
The main different between this and the SharePoint grid is the ability to add additional attributes to the files that are being uploaded (as they are being uploaded).
The image below shows the subgrid that is displayed when the form loads. These documents have been uploaded from the subgrid web resource, and notice that the following attributes are also contained as part of the results: Account Name, Account Number and Document Type.
Read complete post:
https://community.dynamics.com/crm/b/briteglobalsolutions/archive/2018/05/06/dynamics-365-and-sharepoint-online-integration-crm-implementation
In this blog we will demonstrate our Text Input Component for Angular.
The Angular Text Input is designed to enable you to input text in a field. Like the TextArea the Text Input gives suggestions while you enter the text. The component can be very useful in all cases when the user needs to enter text and especially if you want them to get suggestions while entering the text.
Angular Text Input Features
One of the useful features is binding to JSON. You can access the data source of the Text Input, which is a JavaScript Array through the source property.
In addition to that the Text Input enables Auto Complete. This means that suggestions starts to appear in a popup when you start entering text. This enables you to automatically complete the typing.
You can also have multiple values. In this way you can start inputting text, then get a suggestion and complete it and then continue typing and getting more suggestions.
The Text Input for Angular supports fluid design where the size can be given in percentages. In addition to that keyboard navigation and RTL are also supported.
You can see an example here.
Posted in:
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, Angular5, AngularJS
Tagged:
angular 6 input, angular components, angular ui components, angular6, angular6 input, angular6 text input, jqwidgets angular components
In this blog we are going to show you the features of our React CheckBox.
CheckBoxes are used very often in user interfaces to enable selecting different options or settings. The CheckBox for React represents a rectangular box which allows the user to click and select true, false or indeterminate state.
React CheckBox features
The CheckBox supports four states: checked, unchecked, intermediate and disabled.
The component supports also different coloring schemas. You can change the background color and the color of the check mark.
The CheckBox also enabless fluid size and the width of the component can be set in percentages.
You can see an example here.
jQWidgets v5.7.2 Release, April-20-2018
What’s New:
– Users can load jqxListBox, jqxDropDownlist and jqxComboBox by using the Angular *ngFor directive.
– Users can load jqxGrid and jqxDataTable by using the Angular *ngFor directive.
– Users can dynamically load Angular components into Grid Cells.
– New Angular Help tutorials about Routing and Navigation, Dynamic Component Loading and WebPack installation.
– jqxGrid can be loaded from Table tag by using $.jqx.parseSourceTag method.
– Angular 6 components integration.
What’s Fixed:
– Fixed an issue in jqxListBox regarding the loading from Select and UL tags.
– Fixed an issue in jqwidgets.d.ts file regarding missing jqx:any.
– Fixed an issue in jqxScheduler regarding the edit dialog’s z-index.
– Fixed an issue in jqxScheduler regarding the firstDay localization setting and showWeekends is set to false.
– Fixed an issue in jqxNotification regarding the dynamically change of templates.
– Fixed an issue in jqxGrid regarding the sorting when the Grid is grouped.
– Fixed an issue in jqxFileUpload cancelFile typescript definition.
– Fixed an issue in the widgets styles regarding an incorrect image.
Posted in:
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, AngularJS, ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, Chart, custom elements, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxButton, jqxCalendar, jqxChart, jqxCheckBox, jqxComboBox, jqxDateTimeInput, jqxDock, jqxDropDownList, jqxExpander, jqxGrid, jqxInput, jqxListBox, jqxMaskedInput, jqxMenu, jqxNavigationBar, jqxNumberInput, jqxProgressBar, jqxRadioButton, jqxRating, jqxResponse, jqxRibbon, jqxScrollBar, jqxSlider, jqxSplitter, jqxTabs, jqxTooltip, jqxTree, jqxTreeMap, jqxValidator, jqxWindow, PHP, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, Uncategorized
Tagged:
angular, html, JavaScript, jQuery, jQWidgets, reactjs, user interface
In this blog we will show you our Angular Grid with Toolbar.
Our Angular Grid is one of the most advanced on the marked and has many features. One of the advanced features is that you can enable a ToolBar above the columns row of the Grid.
A Toolbar is used to show different components and tools. Our toolbar by default supports buttons, combo and listboxes but you can also configure other components.
Angular Grid with ToolBar features
One of the most typical use cases of the ToolBar is to display buttons related to adding and deleting rows and to finding items.
The text and the background colors can be configured easily. You can also use one of the predefined themes.
Our ToolBar also supports automatic minimization and the tools appear in a minimized popup when there is not enough space.
The Angular Grid with Toolbar enables also tool events.
You can see an example here.
Posted in:
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5, AngularJS, jqxGrid
Tagged:
ag-grid, angular 6 grid, angular grid, angular toolbar grid, angulargrid, grid, grid control, jQWidgets, jqwidgets angular grid, jQWidgets Grid, jqwidgets grid control
Angular 6 Grid New Features
The next release of our Angular Components is just around the corner. One of the major new features is that users would be able to bind the Grid by using Angular native directives such as ngFor.
For example, the output of this code:
<jqxGrid #grid>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let hero of heroes">
<td>
{{hero.id}}</td>
<td>
{{hero.name}}</td>
</tr>
</jqxGrid>
would be:
The same kind of feature will be included in our ListBox, ComboBox, Dropdownlist, DataTable and TreeGrid components. The difference for the ListBox, ComboBox and DropDownList is that the binding there would be by LI tag instead of TR tag.
Posted in:
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5, Pivot Grid
Tagged:
angular 6 datagrid, angular 6 datagridview, angular 6 grid, angular 6 table, angular 6.0, angular 6.0 grid, angular combobox, angular dropdownlist, angular grid, angular listbox, angular six, angular table, angular6 grid, angular6 table, ngfor
|
|
