After looping through my array, I am building multiple buttons based on the array objects. However, I want to dynamically build the buttons using dojo buttons or dijit buttons from the array. How can I do that?
This is what I have:
array.forEach(this.DYNAMIC_FILTER_FORMS, function (entry, i) {
//console.debug(entry, "at index", i);
var button = domConstruct.create("button", {
id: "menuBtn" + i,
class: "menuBtnClass",
"name": entry.menuText,
"value": entry.menuText
}, dom.byId("content"));
button.innerHTML = entry.menuText;
I want something like this, but multiple buttons from an array:
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
onClick: function(){
// Do something:
dom.byId("result1").innerHTML += "Thank you! ";
}
}, "progButtonNode").startup();
array.forEach(this.DYNAMIC_FILTER_FORMS, function (entry, i) {
var myButton = new Button({
label: entry.menuText,
onClick: function(){ ... }
});
myButton.placeAt("content");
});
Related
Having a JQuery Datatable (it's more complex I simplified it) as below:
I need to display a bootstrap modal form with a text input field on, whenever I click the "Assign Card" button.
The modal should should be populated with the data coming from the row in which the button was clicked.
Upon clicking the modal "Assign" button, normally I should post the inputed value and the "VisitorID" which like "John Doe" should come from the specific row.
On Assign I should post the "input value" and "VisitorID".
What I have so far:
var table = $('#visitorsTable').DataTable({
"ajax": {
...
},
"columns": [
{ "data": "VisitorID" },
{ "data": "FirstName" },
{ "data": "LastName" },
{
"data": "CheckedIn",
"render": function(d) {
return moment(d).format('DD-MM-YYYY HH:mm');
}
},
{"data": "CardNumber"},
],
columnDefs: [
{
targets: [0], // Visitor ID
visible: false
},
{
targets: [-1],
render: function(cardNUmber, b, data, d) {
return '<button class="btnAssignCard data-toggle="modal" data-target="#assignCardModal" float-right">Assign Card</button>';
}
}
]
});
$('#visitorsTable').on('click',
'.btnAssignCard',
event => {
// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
let rowData = table.row($(event.target).parents('tr')).data();
var visitorID = rowData.VisitorID;
var visitorFirstName = rowData.FirstName;
var visitorLastName = rowData.LastName;
});
});
Remove the data-toggle and data-target from the button.
Then call the below function after
// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
let rowData = table.row($(event.target).parents('tr')).data();
var visitorID = rowData.VisitorID;
var visitorFirstName = rowData.FirstName;
var visitorLastName = rowData.LastName;
showMyModalSetInput(visitorFirstName + visitorLastName,visitorID );
The function will open the modal and pass the required values before opening. Also, for visitor id, you can add an extra hidden input.
function showMyModalSetInput(inputText, visitorID) {
$('#inputId').val(inputText);
$('#hiddenInputforVisitorID').val(visitorID);
$('#assignCardModal').modal('show');
}
I'm using datatable , I need to disable the export buttons(Excel, PDF) when the grid having the empty rows.
How can we handle the datatable export buttons click actions?
I have done the grid initialization as below.
I don't know how to handle the datatable export buttons(PDF, Excel).
Can you please help me how to fix this.
Update:
And I have one more issue that when user click on the Excel or PDF button then the grid columns width is collapsing.
I need even user click on the Excel or PDF buttons the grid column width should not change. How can we achieve this?
After exporting the data in to excel, columns are not auto adjusted in the excel.
How can we make the columns(After export datatable data into excel) auto adjusted?
var buttonCommon = {
exportOptions: {
format: {
body: function(data, column, row, node) {
return data;
}
}
}
};
var dataTableObj = {
"processing": true,
"destroy": true,
"scrollX": true,
"columns": [{
"data": "CollegeName",
"width":"30%"
}, {
"data": "AffiliatedTo",
"width":"15%"
}, {
"data": "TPOName",
"width":"20%"
}, {
"data": "Phone",
}, {
"data": "Website",
"bSortable": false
}],
dom: 'lBfrtip',
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5',
title: 'Colleges',
} ),
{
extend: 'pdf',
title: 'Colleges'
}
],
fnRowCallback: function(nRow, aData, iDisplayIndex) {
//Some code
return nRow;
}
};
var dataTbl = $('#tblColleges').DataTable(dataTableObj);
I don't know how far following solution makes sense but it was resolved my issue.
I need to disable the export buttons(Excel, PDF) when the grid having
the empty rows. How can we handle the datatable export buttons click
actions?
here I have done with the datatables action property.
buttons: [{
extend: 'excelHtml5',
title: 'Colleges',
action: function(e, dt, button, config) {
if (this.data().length > 0) {
$.fn.dataTable.ext.buttons.excelHtml5.action(e, dt, button, config);
$scope.hasAlert = 0;
$scope.$apply();
} else {
$scope.hasAlert = 2;
$scope.alertMsg = __APP_MESSAGE__.GridEmptyMsg;
$scope.$apply();
}
}
}, {
extend: 'pdf',
title: 'Colleges',
action: function(e, dt, button, config) {
if (this.data().length > 0) {
$.fn.dataTable.ext.buttons.pdfHtml5.action(e, dt, button, config);
$scope.hasAlert = 0;
$scope.$apply();
} else {
$scope.hasAlert = 2;
$scope.alertMsg = __APP_MESSAGE__.GridEmptyMsg;
$scope.$apply();
}
}
},
]
This solution has worked for me put it in fnDrawCallback function
$(tableName).dataTable({
"fnDrawCallback":function () {
var table = $(tableName).DataTable();
if (table.data().length === 0)
table.buttons('.buttons-html5').disable();
else
table.buttons('.buttons-html5').enable();
}
});
The easiest way to handle the datatable export buttons click actions is to create your own button and trigger the datatable export button on the click of your button.
This way you will handle the click actions of your created button:
$('#exportBtn').on('click', function () {
dataTbl.button(0).trigger();
});
You can remove dom: 'lBfrtip' to hide the original datatable button.
I want to bind a KendoGrid to an object array so that it reflects what ever the user enters. The object will have two fields ExceptionName and ExceptionType. ExceptionType needs to be a dropdown of 5 items (this is working). The ExceptionName will be free text.
If I double click on the kendo grid, I can edit, but it does not reflects in the object. Same thing for Delete & new row. (So I think I am doing something wrong in the binding or in the declaration of the object)
Below, find a snippet of my code:
Object array:
var authorizationInformation = [{
id:1,
exemptionName: "",
exemptionType: "Unknown"
}];
KendoGrid:
$("#AuthorizationGrid").kendoGrid({
columns: [{
field: "exemptionName", title: "Exemption Name"
},
{
field: "exemptionType",
title: "Exemption Type",
template: function (value) {
for (var i = 0; i < exemptionTypeList.length; i++) {
if (exemptionTypeList[i].exemptionType == value.exemptionType) {
return exemptionTypeList[i].description;
}
}
},
editor: function (container) {
var input = $('<input id="exemptionType" name="exemptionType">');
input.appendTo(container);
// initialize a dropdownlist
input.kendoDropDownList({
dataTextField: "description",
dataValueField: "exemptionType",
dataSource: exemptionTypeList
}).appendTo(container);
}
},
{
command: "destroy"
}],
dataSource: authorizationInformation,
editable: true,
scrollable: false,
});
Any suggestion would be appreciated.
Thanks, M
I work with SAPUI5, and I want to add a style to an object as soon as I instantiate it. For example, I want to add styleclass 'foo' to my label inside my panel.
What I want to do, but doesn't work:
var oPanel = new sap.m.Panel({
content: new sap.m.Label({
text: "Hello",
styleClass: "foo"
})
});
What I don't want to do, but does work:
var oLabel = new sap.m.Label({
text: "Hello"
});
oLabel.addStyleClass("foo");
var oPanel = new sap.m.Panel({
content: oLabel
});
There's another option based on method chaining which does not require a dedicated variable for the inner elements (which I guess is the reason why you do not like the 2nd variant in your question):
var oPanel = new sap.m.Panel({
content: new sap.m.Label({ text: "Hello" }).addStyleClass("foo")
});
you can even write your own custom classes where the style class is an aggregation. I am not sure as yet how this can be done but I was able to write custom labels with 'color' aggregation.
You could create a function to return your control instances, and inside of it make use of the addStyleClass method, and others you would like
function getControlInstance(FnClass, sId, mSettings) {
mSettings = mSettings || {};
if (typeof sId !== "string") {
mSettings = sId;
sId = null;
}
var oControl = new FnClass(sId, mSettings);
if (mSettings.styleClass) {
mSettings.styleClass = mSettings.styleClass instanceof Array ? mSettings.styleClass : [mSettings.styleClass];
mSettings.styleClass.forEach(function (sClass) {
oControl.addStyleClass(sClass);
});
}
return oControl;
}
Use like this
var a = getControlInstance(sap.m.HBox, {
styleClass: "test",
id: "asdoiasd",
items: [
new getControlInstance(sap.m.Text, {
styleClass: "test",
text: "Testing"
})
]
})
I have a simple grid on ExtJS and would like the user to be able to move the record from its original position.
When the user double clicks on a record, a small window containing a combobox appears, he can choose a value on the combobox and then click the save button to apply the change.
However, it doesn't work, I've searched many solutions for this on different forums and none seems to work. Either nothing happens, or an undefined row is added at the end of the grid. Here is the base code I use :
onEditRank: function(view, cell, cellIndex, record, row, rowIndex, e)
{
var reditor = Ext.create('CMS.view.Views.RankEditor', {id: 'reditorView'});
var form = reditor.down('form');
var oldPos = this.getFlatrq().getView().indexOf(record);
var grStore = this.getGridRnkStoreStore();
var i;
var data = [];
for(i = 1; i <= CMS.global.Variables.limit + 1; i++)
{
data.push(i);
}
var combo = Ext.create
(
'Ext.form.field.ComboBox',
{
fieldLabel: 'Rank',
itemId: 'cmbRank',
store: data
}
);
var saveRnk = Ext.create
(
'Ext.button.Button',
{
text: 'Save',
handler: function()
{
}
}
);
form.add(combo);
form.add(saveRnk);
reditor.show();
}
Now here are the different handlers I have tried for my save button :
handler: function()
{
grStore.remove(record);
grStore.insert(record, combo.getValue() - 1);
this.up('form').up('window').close();
}
handler: function()
{
grStore.removeAt(oldPos);
grStore.insert(record, combo.getValue() - 1);
this.up('form').up('window').close();
}
handler: function()
{
var rec = grStore.getAt(oldPos).copy();
grStore.removeAt(oldPos);
grStore.insert(rec, combo.getValue() - 1);
this.up('form').up('window').close();
}
Those 3 handlers inserted undefined rows at the end of my grid. I displayed the values of oldPos and combo.getValue() and they are correct, I also displayed the record variable before and after the remove because I thought it might be destroyed but it wasn't. I have also tried to add a move function to store and call it :
'CMS.store.GridRnkStore',
{
extend: 'Ext.data.Store',
model: 'CMS.model.GridRnkModel',
autoLoad: false,
filterOnLoad: true,
autoSync: true,
move: function(from, to)
{
console.log(from + " " + to);
var r = this.getAt(from);
this.data.removeAt(from);
this.data.insert(to, r);
this.fireEvent("move", this, from, to);
},
}
);
But it didn't work either, it did nothing actually (I put some console.log in the move function to see if it was called and it was, with the right parameters). I'm running out of ideas, any help would be appreciated.
Thank you.
try to set the private move parameter to true of store.remove():
remove: function(records, /* private */ isMove, silent)