I am using angular-formly to generate radio groups. Everything works well except at a point where these radio buttons are being generated dynamically depending on some condition.
The Problem
Every instance of radio buttons gets the same dynamic ID generated by following formly template. As a result when I click on any radio button on the page, the first one gets selected as the ID attribute is always same.
function addRadioType(formlyConfigProvider) {
formlyConfigProvider.setType({
name: 'radio',
template: '<div class="radio-group vk">'
+'<div ng-repeat="(key, option) in to.options" class="radio">'
+'<input type="radio" id="{{id + \'_\'+ $index}}" tabindex="0" ng-value="option[to.valueProp || \'value\']" '
+' ng-model="model[options.key]">'
+'<label for="{{id + \'_\'+ $index}}">'
+' {{option[to.labelProp || \'name\']}}'
+' </label>'
+'</div>'
+'</div>'
,
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
defaultOptions: {
noFormControl: false
},
apiCheck: check => ({
templateOptions: {
options: check.arrayOf(check.object),
labelProp: check.string.optional,
valueProp: check.string.optional
}
})
});
}
Related
I am using kendo UI grid with editable dropdown in cell .This dropdown on the grid loads data only after clicking on it ,but i need to load on pageload. however, I managed to load data in multiple dropdowns but it loads only on double click now.
Following is the code for loading all dropdown in grid
{
field: 'Installer',
title: 'Installer Name',
width: 250,
editor: $scope.categoryDropDownEditor,
template: '<span class="k-widget k-dropdown k-header" style="width: 220px;"><span class="k-dropdown-wrap k-state-default k-state-hover"><span class="k-input ng-scope">#=Installer.InstallerName#</span><span class="k-select"><span class="k-icon k-i-arrow-s">select</span></span></span><input style="width: 220px; display: none;" ></span>'
}
and this is code for loading dropdown through editor
$scope.categoryDropDownEditor = function (container, options) {
var editor = $('<input kendo-drop-down-list k-data-text-field="\'InstallerName\'" k-data-value-field="\'InstallerID\'" k-data-source="ddlDataSource" k-on-change="GetEditPriestSettings(dataItem, kendoEvent)" style="width:250px" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
Is there any better way to load all dropdown and also to make dropdown load on single click.
on second click dropdown data loads
Finally, after lot of research opening kendodropdown manually with timeout worked.
setTimeout(function () {
var x = $('#DropDown_' + id).data("kendoDropDownList").open();
}, 100)
I have a tagfield to multiselect items from a store. I want to detect when a out of all the selected items, i click and highlight one of the selected value.
Here is the fiddle attached
https://fiddle.sencha.com/#fiddle/17or
Dunno, but should be easy to find:
If you look into the generated markup, find that the selected item has the class x-tagfield-item-selected.
If you search the ExtJS codebase for tagfield-item-selected, find that tagSelectedCls is Ext.baseCSSPrefix + 'tagfield-item-selected'.
If you search the ExtJS codebase for tagSelectedCls, find that it is used in the xtemplate:
me.multiSelectItemTpl = new Ext.XTemplate([
'<tpl for=".">',
'<li data-selectionIndex="{[xindex - 1]}" data-recordId="{internalId}" class="' + me.tagItemCls + childElCls,
'<tpl if="this.isSelected(values)">',
' ' + me.tagSelectedCls,
'</tpl>',
which has a function isSelected:
isSelected: function(rec) {
return me.selectionModel.isSelected(rec);
},
Your chances are high the referenced selectionModel at me.selectionModel is the standard selection model of ExtJS, so it could have an event selectionchange. Let's try:
var tagfield = Ext.create('Ext.form.field.Tag', {
...
});
tagfield.selectionModel.on('selectionchange',function() {console.log('selectionchange')});
Works.
I have a KendoUI Grid bound using Angular and I'd like to implement a custom action dropdown command or template column on each row. I need to track the dropdown change event for any of the rows when the grid is in display mode, not edit mode. The dropdown is effectively just a list of all of the name properties of the grid rows that I want to user to be able to select to move the row after another existing row.
For instance, say I have this data:
Id Name Position
A Red 1
B Blue 2
C White 3
I'd like each row to display a dropdown column while in display mode (so it acts like a row command). The dropdown would contain the names Red,Blue,White with corresponding values. When a user picks one of those colors, I will change the position of that row to the row position after the color selected. It's basically a row reorder dropdown instead of using drag and drop.
My other option is to show a couple of template columns with a move up/move down metaphor to do the switch but that gets a little cumbersome when you want to move a row more than a couple of positions.
Any ideas?
Ok, I did some more searching and found out a way to do this although it's not 100% of the way there yet. I also found a way to bind the dropdown to the data that populates the grid
The other thing I found when doing it this way is it is painfully slow in rendering the grid now.
<div id="mainGrid" kendo-grid="mainGrid" k-options="mainGridOptions"></div>
//grid columns
$scope.mainGridOptions = {
dataSource: {
transport: {
read: function (e) {
gridcolumnService.getGridColumns().success(function (data) {
e.success(data);
});
},
},
},
columns: [
{ field: "Name" },
{ field: "ColumnSettings.Type", title: "Type" },
{ field: "ColumnSettings.PrimaryKey", title: "Primary Key", template: '<input type="checkbox" #= ColumnSettings.PrimaryKey ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "ColumnSettings.Title", title: "Title" },
{ field: "ColumnSettings.Editable", title: "Editable", template: '<input type="checkbox" #= ColumnSettings.Editable ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "ColumnSettings.Visible", title: "Visible", template: '<input type="checkbox" #= ColumnSettings.Visible ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "LookupDataCommandId", title: "Lookup", template: '#= LookupDataCommandId ? "Yes" : "" #' },
{ template: '<select id="reorder-dropdown" kendo-drop-down-list k-on-change="exchangeRows(dataItem, kendoEvent)" k-data-source="reorderData()" k-data-text-field="\'Name\'" k-data-value-field="\'GridColumnId\'"></select>' },
{ template: '<a kendo-button k-icon="\'pencil\'" ng-click="editGridColumn(dataItem.GridColumnId)">Edit</a>', width: 100 }
]
};
$scope.reorderData = function() {
return $scope.mainGrid.dataSource.data();
};
$scope.exchangeRows = function (fromRow, e) {
$log.log(fromRow.GridColumnId, e.sender.dataItem().GridColumnId);
};
I am trying to create a hidden column which will contain the unique "id" of the row as an attribute in say a "data-id" one. Because i can't seem to work out how to retrieve the data model behind the row. I'm using server-side datasource.
columns: [{
property: 'hiddencolumn',
label: '',
hidden: true <-- ?????
} .. .. ],
In the formatter i use some placeholder tag, could be a span
$.each(items, function(index, item) {
item.hiddencolumn = '<span data-id="' + item.id + '"</span>';
});
then i add a click handler to the row and then get the data-id column:
$('#MyGrid').on('loaded', function() {
$('#MyGrid > tbody > tr').click(function() {
console.log($(this).find('> td > span').attr('data-id'));
});
});
Is this correct? Or should I attempt to add data-id to the tr tag/row itself? The above concept works, but i just need to know how to hide the column :)
thanks
EDIT 14th Apr - here's what I did to solve this. Use data-id and hide the span in an existing column. For me, I had a "date" and "id" field in my model. I choise to tag id onto the date field.
formatter: function(items) {
$.each(items, function(index, item) {
item.date = item.date + '<span style="visibility: hidden;" data-id="' + item.id + '"/>';
});
}
Then retrieve the id like so (using jquery)
$('#MyGrid').on('loaded', function() {
$('#MyGrid > tbody > tr').click(function() {
console.log($(this).find('> td > span').attr('data-id')); // value is here
});
});
ok?
The columns property is just for visible columns. So, it sounds like you'll want to remove that and in your formatter create a span with a data-id attribute for one of your other (visible) columns. I usually do this in the final column if there are any buttons or other controls for acting on the item in the row.
I have an ext js grid like below:
var grid = new Ext.grid.GridPanel({
columns: [
{header: 'Account Id',dataIndex:'accountId' },
{header: 'Account NUmber',dataIndex:'accountNumber' }
]
})
Now I need to show Account Id column as a column of radio buttons. So from the grid user can select one Account Id and submit. When the user reloads the page, that account id should be preselected.
I need some help on how to proceed on this. Do I need to write a renderer on Account Id column? Or is there an easier way.
EDIT: I did like this:
{header: 'Account Id',dataIndex:'accountId',renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
}},
What is the syntax to add an onclick event or onchange event to the radio group?
Building off the previous answer, yes, I think using a renderer for your column is the correct solution. I think you should go about the click event differently than J. Bruni suggested though. I'd recommend a click listener on your grid panel that checks if you clicked a radio button, and delegates to a method in your GridPanel.
Something like this:
MyRadioGrid = Ext.extend(Ext.grid.GridPanel, {
columns: [
{header: 'Account Id',dataIndex:'accountId', renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
}},
{header: 'Account NUmber',dataIndex:'accountNumber' }
],
afterRender: function() {
MyRadioGrid.superclass.afterRender.apply(this, arguments);
this.el.on('click', this.checkRadioClick, this);
},
checkRadioClick: function(event) {
if (event.getTarget('input[type="radio"]')) {
//radio clicked... do something
}
}
});
You did well on showing Account Id column as a column of radio buttons, by using a renderer function.
Regarding the onclick event for these, you may simply add the onclick attribute in the HTML tag:
return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";