How to change the message in checkedmultiSelect widget in dojo? - javascript

Im using the dojo widget CheckedMultiSelect,how to change the message "0 items(s) selected" to some other message(Ex:Prefrences).
var select = new CheckedMultiSelect({
dropDown: true,
labelText: 'States',
multiple: true,
name: 'state',
onChange: getValues,
required: true
}, "stateSelect");

The label text is set via Dojo's i18n system. The simplest way to override it for an individual select box is to directly modify the resource used to set the label:
select._nlsResources.multiSelectLabelText = 'foo';
You can globally modify the resource by using a loader map to override the nls resource used for CheckBoxMultiSelect widgets. Modify your dojoConfig (or set one up) before loading dojo.js:
<script>
var dojoConfig = {
// ...
map: {
'*': {
'dojox/form/nls/CheckedMultiSelect': 'myApp/someModule'
}
},
// ...
}
</script>
<script src="wherever/dojo.js"></script>
Module myApp/someModule should follow the format of a Dojo nls resource, and contain the same keys under root as the original CheckedMultiSelect nls file:
define({
root: {
multiSelectLabelText: 'foo',
// ...
}
});

Related

FormBuilder.js: How to inherit from radio-group control?

I'm trying to create a new control for FormBuilder, it's basically a radio-group control (I mean it has the same config of a radio-group control) but I need to define a custom build() and onRender() method.
I read docs a lot of times but can't get it to work, here is a simple example of what I'm trying to do.
if (!window.fbControls) window.fbControls = new Array();
window.fbControls.push(function (controlClass) {
class controlMultipleObjects extends controlClass {
static get definition() {
return {
icon: '\uD83D\uDD89',
i18n: {
default: 'Control Multiple Items'
}
};
}
configure() {
// this.js = '//cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js';
}
/**
* build a text DOM element, supporting other jquery text form-control's
* #return DOM Element to be injected into the form.
*/
build() {
this.dom = this.markup('div', null, {class:'multipleObjectsController', id: this.config.name});
return this.dom;
}
onRender() {
}
}
// register this control for the following types & text subtypes
controlClass.register('multipleObjects', controlMultipleObjects);
return controlMultipleObjects;
});
This basically works, the new control 'multipleObjects' is shown in form builder, but when opening the config for the control it only shows the 'Value' item. I need to show multiple values just like the radio-group, select or select-group controls.
Any ideas?
Thanks!
Take a look at https://formbuilder.online/docs/formBuilder/options/typeUserAttrs
you'll need to pass options in your formBuilder like that:
const options = {
typeUserAttrs: {
multipleObjects: {
options: {
label: 'Class',
multiple: true,
options: {
'red form-control': 'Red',
'green form-control': 'Green',
'blue form-control': 'Blue'
},
},
},
},
}
$("#fb-editor").formBuilder(options)

Kendo UI treelist and angular - how to determine if it's fully loaded?

In my HTML, I have:
<kendo-treelist
k-auto-bind="true"
k-data-source="dataSourceAssignment"
k-columns="Assignmentcols"
k-rebind="Assignmentcols">
</kendo-treelist>
In the JS file, I am connecting it to the data source by:
$scope.dataSourceAssignment = new kendo.data.TreeListDataSource({
transport: {
read: function (options) {
//code here
},
schema: {
model: {
id: "id",
fields: {
//fields here
},
expanded: true
}
}
});
Is there any way I could determine if the tree has fully loaded (i.e. 'no more hourglass spinning')?
I want to call a function to stop the 'loading....' UI then.
There appears to be an onDataBound event. Try adding that as an attribute of the tag.
<kendo-treelist
k-auto-bind="true"
k-data-source="dataSourceAssignment"
k-data-bound="dataBoundHandler"
k-columns="Assignmentcols"
k-rebind="Assignmentcols">
</kendo-treelist>
See: http://demos.telerik.com/kendo-ui/treelist/events

Getting Object Properties From External js File

I'm using a jquery script called jTable (www.jtable.org) to implement dynamic tables in my web application. In order to include a table on a particular page, you must include the following code to declare its properties:
<script type="text/javascript">
$(document).ready(function () {
$('#MyTableContainer').jtable({
//General options comes here
actions: {
//Action definitions comes here
},
fields: {
//Field definitions comes here
}
});
});
</script>
An example of what might go into the fields property:
fields: {
StudentId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Name',
width: '23%'
},
EmailAddress: {
title: 'Email address',
list: false
},
Password: {
title: 'User Password',
type: 'password',
list: false
},
Gender: {
title: 'Gender',
width: '13%',
options: { 'M': 'Male', 'F': 'Female' }
},
BirthDate: {
title: 'Birth date',
width: '15%',
type: 'date',
displayFormat: 'yy-mm-dd'
}
}
The problem is I use the same table (or very similar tables) throughout my web application. I would like to be able to implement a way to store the fields in an external .js file and then refer to it on each page, thus avoiding copying and pasting. On some pages, I may only include some of the above fields (ex. I may want to exclude Password and EmailAddress) or make slight variations to the fields when I load them (ie. use a different displayFormat (for BirthDate) than the default in the external .js file on a particular page.
Thanks!
You can do this in several ways. Here's a simple one:
main.js
//should be modularized/namespaced
var defaultStudentTableFieldsCfg = {
...
};
other-file.js
$(function () {
var tableFieldsCfg = $.extend({}, defaultStudentTableFieldsCfg);
//define new column
tableFieldsCfg.someNewCol = {
//...
};
//remove some column
delete tableFieldsCfg.Password;
//override config
tableFieldsCfg.Gender.title = 'GENDER';
//it would be better not to hard-code #MyTableContainer here
$('#MyTableContainer').jtable({ fields: tableFieldsCfg });
});
You could create functions that you put in external JS files. Then those functions could return the JSON objects needed to construct your jTable.
The problem is the fact that you have a JSON object and that can not be just referenced in a JavaScript file. If you want to load the file, you would need to use something like getJSON and than use that with jQuery.
function createTable(fields) {
$('#MyTableContainer').jtable({
//General options comes here
actions: {
//Action definitions comes here
},
fields: fields
});
}
$(function(){
$.getJSON("YourFields.json", createTable);
});
Now what you are trying to do is reference a global variable.
Place the file before and reference the global variable.
<script type="text/javascript" src="YourFields.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#MyTableContainer').jtable({
actions: {
},
fields: fields
});
});
</script>
The YourFields.js file should look more like
if (!window.appDefaults) {
window.appDefaults = {}
}
window.appDefaults.fields = {
StudentId: {
key: true,
...
};

Rally SDK 2 Grid with Timebox Filtering

Using the example from https://help.rallydev.com/apps/2.0rc2/doc/#!/guide/timebox_filtering for a timebox required app, how do I convert the cardBoard view into a grid?
This is the base code:
Ext.define('Rally.guide.ReleaseFilteredBoard', {
extend: 'Rally.app.TimeboxScopedApp',
scopeType: 'release',
onScopeChange: function(scope) {
if(!this.board) {
this.board = this.add({
xtype: 'rallycardboard',
storeConfig: {
filters: [scope.getQueryFilter()]
}
});
} else {
this.board.refresh({
storeConfig: {
filters: [scope.getQueryFilter()]
}
});
}
}
});
It seems that I can simply change the xtype to 'rallygrid' and based on docs it should work but it seems to need a model defined as well - how do I get the model details out of the timebox scope to feed into the grid?
You may wish to check out the example code for Rally.ui.grid.Grid.
Here's a quick sample of how one might apply the Timebox filter to a grid:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
grid: null,
launch: function() {
var filters = [];
var timeboxScope = this.getContext().getTimeboxScope();
if(timeboxScope) {
filters.push(timeboxScope.getQueryFilter());
}
this.getFilteredStoryModel(filters);
},
onTimeboxScopeChange: function(newTimeboxScope) {
var newFilters = [];
var updatedTimeboxScope = this.getContext().getTimeboxScope();
if (this.grid) {
this.grid.destroy();
}
if (updatedTimeboxScope) {
newFilters.push(newTimeboxScope.getQueryFilter());
}
this.getFilteredStoryModel(newFilters);
},
getFilteredStoryModel: function(queryFilters) {
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: function(model) {
this.grid = this.add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Name',
'Owner',
'Iteration'
],
storeConfig: {
filters: queryFilters
}
});
},
scope: this
});
}
});
To show the timebox filter, choose the type of filter you desire when first setting up your Custom Page in Rally. The "onTimeboxScopeChange" callback responds to events triggered by the timebox selector setup and configured on the Custom Page container itself. No code is needed to setup the timebox selector, rather you do it via the Rally UI when creating a new Custom Page:
Select the type of filter (Release or Iteration):
(1) Note that the filter shows on the "My New Custom Page" Container. (2) Any app that you add to "My New Custom Page" will then have the timebox filter available/applied:
Add Custom HTML App:
Paste in Code and Save:
Iteration-filtered Grid:
Alternatively, if you don't want a timebox filter that applies to an entire Custom Page container, you can elect to use Rally.ui.combobox.ReleaseComboBox or Rally.ui.combobox.IterationComboBox
In your App code itself, and manage the filtering via callbacks from either of these components. This filtering would be totally "within-app" and wouldn't rely on the Custom Page-wide timebox component.

Change default editor for node in AlloYUI Diagram Builder

I have to make a diagram editor, so I'm using AlloYUI, I've added a custom node following the answer for this question.
I've successfully set new nodes and retreive it's values via diagramBuilder.toJSON()
What I'm trying to do is change the default editor widget for the custom attribute of my custom node, I'd like to change the textbox for date picker widget, but my goal is being able to use any other form elements, like a select, or a set of radio buttons.
Toying around with the javascript debugger included in WebStorm, I've found that the default fields have an 'editor' attribute where is defined a "textAreaCellEditor".
But my custom property doesn't have this attribute, So I'm trying to attach an editor, but I cannot get it to work, I've tried with this:
Y.DiagramNodeCustom = Y.Component.create({
NAME: 'diagram-node',
ATTRS: {
type: {
value: 'custom'
},
custom_attr: {
value: 'customAttr'
}
},
EXTENDS: Y.DiagramNodeTask,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(
instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: Y.Component.create({
NAME: "DateField",
EXTENDS: Y.DateCellEditor
})
});
return model;
},
SERIALIZABLE_ATTRS: ['description', 'name', 'required', 'type',
'width', 'height', 'zIndex', 'xy', 'customAttr']
}
});
Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;
I've also tried to change the "model.push" section to:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: {name: "textCellEditor"}
});
and to:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: Y.DateCellEditor({
name: 'DateCellEditor'
})
});
But nothing works. Do you have any idea how can I change the default editor?
Thanks to Robert Frampton, who anwered my question in google groups, the way to do it is:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: new Y.DateCellEditor()
});
You have to create a new instance of the Y.DateCellEditor object with adding 'new' before the constructor.

Categories