So I have created datatable with customized checkbox. I did not used the plugin of dataTable. I put checkbox manually every td. I am using map function to get data of the checkbox.
Problem here is, I only get values of checkbox on the first page, even tho I checked checkboxes of other pages, I only get the first page. I am using client side datatable btw. Here's my code
var values = $("input[name='checkbox_perprod[]']:checked")
.map(function(){
dataArr = {
'product_id' : $(this).val(),
'sys_shop' : $(this).data('sys_shop'),
'product_name' : $(this).data('product_name'),
'product_promo_type' : 1,
'product_promo_rate' : 1,
'product_orig_price' : $(this).data('product_price'),
'product_promo_price' : 0,
'product_promo_stock' : 0,
'product_curr_stock' : $(this).data('product_stock'),
'product_purch_limit' : 0,
'product_status' : 1
};
alignProductPromotion(dataArr, counter);
counter++;
productArray.push(dataArr);
}).get();
I just figured out other way to solve my problem. I just created separate function to save and delete value of checkbox. I'm storing the data using array and delete it using splice when i uncheck the checkbox. Here's the complete code
$('#table-grid-productpromo').on('click', 'input[type="checkbox"]', function() {
var value = $(this).val();
if(this.checked) {
dataArr = {
'product_id' : $(this).val(),
'sys_shop' : $(this).data('sys_shop'),
'product_name' : $(this).data('product_name'),
'product_promo_type' : 1,
'product_promo_rate' : 1,
'product_orig_price' : $(this).data('product_price'),
'product_promo_price' : 0,
'product_promo_stock' : 0,
'product_curr_stock' : $(this).data('product_stock'),
'product_purch_limit' : 0,
'product_status' : 1
};
addProdArr.push(dataArr); // record the value of the checkbox to valArray
} else {
var index = addProdArr.findIndex(p => p.product_id == $(this).val());
if (index !== -1) {
addProdArr.splice(index, 1);
}
}
});
Related
i want to show the selected items of listview in a grid. all selected items should show on the home page. but i cant find a way to do so. i have attached the js file code and screenshot of the popup
var subItemsLoaded = false,
SubItemSelectionModalId = '#subItemSelectionModal';
listViewHeight = 400,
subItemClicked = 0;
$(SubItemSelectionModalId).on('shown.bs.modal', function () {
if (
(window.selections.assetTemplate.id != null &&
window.selections.assetTemplate.id != 0)) {
$(SubItemSelectionModalId + ' .modal-body').ejWaitingPopup({
showOnInit: true
});
$(SubItemSelectionModalId + ' .listViewItems').ejListView({
"height": 400,
"loadComplete": function () {
repositionSearchBoxFor(SubItemSelectionModalId);
var obj = $(SubItemSelectionModalId + ' .modal-body').data("ejWaitingPopup");
console.log("12345.5");
obj.hide();
console.log("123456");
},
"mouseUp": function (e) {
},
"enableAjax": true,
"enableCheckMark": true,
"enableFiltering": true,
"dataSource": ej.DataManager({
"url": "/Shared",
"cachingPageSize": 0,
"timeTillExpiration": 0
}),
"query": ej.Query().from("GetSubItems").addParams("assetTemplateId", window.selections.assetTemplate.id).addParams("assetTemplateVariantId", window.selections.assetTemplateVariant.id),
"fieldSettings": {
"text": "SubItemName",
"id": "SubItemId"
}
});
}
});
$(SubItemSelectionModalId).on('hidden.bs.modal', function () {
var listViewItems = $(SubItemSelectionModalId + ' .listViewItems');
if (listViewItems.find('ul').length > 0) {
var selections = $(SubItemSelectionModalId + ' .listViewItems').ejListView("getCheckedItems");
if (selections.length > 0) {
$('#selectedSubItems').html(selections.join(' , ')).removeClass('hidden');
}
}
});
enter image description here
Yes, it is possible to show the selected items of the Listview in a Grid. For this, you have to use the mouseUp event of the Listview to take the selected items of the list and then give these selected items as the dataSource for the Grid control.
Also in order to get the ID of the selected list, you have to get the ID attribute and take its ID and bind the ID field as one of the columns of the Grid control. This way, you can get the ID of a particular list in a Listview and then bind it to the Grid.
We have also prepared a sample for your reference: http://jsplayground.syncfusion.com/prahqy2i
Regards,
Arun P.
I'm trying to trigger a callback to dynamically populate a CKEditor dialog with checkboxes when the dialog is opened. I've read other solutions that use iframes, but this won't work for me because the dialog needs to be populated based on other elements on the same page.
Here is what I have so far. There are no errors, but the dialog is just empty when it opens. I expect the addContents function to fill in the dialog. I've confirmed that dialog.definition.contents does include the contents and elements that I want, but it's just not filling in the actual dialog. What am I missing?
(function() {
CKEDITOR.plugins.add( 'embeds', {
icons: 'embed',
init: function(editor) {
var self = this,
elements = [];
CKEDITOR.dialog.add('EmbedsDialog', function (instance) {
return {
title : 'Embeds',
minWidth : 550,
minHeight : 200,
contents: [],
onShow: function() {
var dialog = this,
elements = [];
$('#embeds-fields tr').each(function() {
var title = $(this).find('input[type=text]').val(),
url = $(this).find('input[type=url]').val();
if(url != "") {
elements.push({
label : "embed",
title : url,
type : 'checkbox'
});
}
});
dialog.definition.removeContents('embeds');
dialog.definition.addContents({
id : 'embeds',
expand : true,
elements : elements
});
},
}; // return
});
editor.addCommand('Embeds',
new CKEDITOR.dialogCommand('EmbedsDialog', {
allowedContent: 'a[*](*)'
})
);
editor.ui.addButton('Embeds', {
label : 'Embeds',
command : 'Embeds',
toolbar : 'embeds'
});
} // init
}); // add
})(); // closure
Based off of this example, I ended up with this solution, where "main" is the ID of the original content.
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'EmbedsDialog') {
var main = dialogDefinition.getContents('main');
$('#embeds-fields tr').each(function() {
var title = $(this).find('input[type=text]').val(),
url = $(this).find('input[type=url]').val();
if(url != "") {
main.add({
type : 'checkbox',
label : title,
});
}
});
}
});
I am trying to understand JavaScript modules. As such I am using that pattern, or at least I think it is that pattern to cycle through an array on click.
Each click should display the next value in the array.
When the last value in the array has been reached and the click is registered again the cycle should start over.
The page will load, displaying the value at the start of the array.
For instance, the array contains ['green','yellow','red']
Page loads = value displayed is green
click = value displayed is yellow
click = value displayed is red
click = value displayed is green
and so on.
Here is a Fiddle of what I have so far: http://jsfiddle.net/TYj3p/
Here is the HTML:
<p>The color is <span id="print"></span>.</p>
Here is the JavaScript that I have but I am suck on the click part:
var s;
var ele;
Next = {
settings : [
{color : 'green'},
{color : 'yellow'},
{color : 'red'}
],
elements : {
span : $('#print')
},
init : function() {
//kick things off
s = this.settings;
ele = this.elements;
this.bindUIActions();
},
bindUIActions : function() {
ele.span.ready(function() {
Next.loadText();
});
ele.span.on('click', function() {
Next.changeText();
});
},
loadText : function() {
ele.span.text(s[0].color);
},
changeText : function() {
var i = 0;
ele.span.text(s[i].color);
i++;
}
};
(function() {
Next.init();
})();
Take a look at this demo: http://jsfiddle.net/TYj3p/7/
Add a button and call changeText on onClick method.
<button onclick="Next.changeText();">Click</button>
On you changeText function check the index of current color and if it is the last element show the first one. Your changeText function should be something like this:
changeText : function() {
var index = Next.indexOfColor(ele.span.text());
if(index < s.length-1) {
++index;
ele.span.text(s[index].color);
} else {
ele.span.text(s[0].color);
}
},
Add this function to return the index value of the current color.
indexOfColor: function (color) {
for(var i=0; i < s.length; i++) {
if(s[i].color == color)
return i;
}
return -1;
}
I have enabled the 'fontsizeselect' plugin in tinyMCE. My question is how do I remove the header (title) of the drop-down menu?
Edit:
I've tried removing it using JQuery .remove(), but after that the height of whole list is calculated wrong.
The second option I tried was:
http://www.tinymce.com/wiki.php/API3:method.tinymce.ui.DropMenu.remove
But that just went wrong and "fontsizeselect.remove(title)" (analogically to .add) makes error to whole tinyMCE - "missing : after property id". Problably it is completly bad method to do this.
The third option was editing tiny_mce\themes\advanced\editor_template_src.js line 467:
c = ed.controlManager.createListBox('fontsizeselect', {title : 'advanced.font_size', onselect : function(v) {...}
but seems, that TinyMCE developers thought, that every drop-down must have title/header
SOLVED:
before initialization of MCE we have to override the menu rendering function
(function(tinymce) {
var DOM = tinymce.DOM, Event = tinymce.dom.Event, each = tinymce.each, Dispatcher = tinymce.util.Dispatcher, undef;
tinymce.create('tinymce.ui.ListBoxNoTitle:tinymce.ui.ListBox', {
renderMenu : function() {
var t = this, m;
m = t.settings.control_manager.createDropMenu(t.id + '_menu', {
menu_line : 1,
'class' : t.classPrefix + 'Menu mceNoIcons',
max_width : 250,
max_height : 150
});
m.onHideMenu.add(function() {
t.hideMenu();
t.focus();
});
/* m.add({
title : t.settings.title,
'class' : 'mceMenuItemTitle',
onclick : function() {
if (t.settings.onselect('') !== false)
t.select(''); // Must be runned after
}
});
*/
each(t.items, function(o) {
// No value then treat it as a title
if (o.value === undef) {
m.add({
title : o.title,
role : "option",
'class' : 'mceMenuItemTitle',
onclick : function() {
if (t.settings.onselect('') !== false)
t.select(''); // Must be runned after
}
});
} else {
o.id = DOM.uniqueId();
o.role= "option";
o.onclick = function() {
if (t.settings.onselect(o.value) !== false)
t.select(o.value); // Must be runned after
};
m.add(o);
}
});
t.onRenderMenu.dispatch(t, m);
t.menu = m;
}
});
})(tinymce);
And with this comment on "m.add" You just have to add
tinyMCE.init({
setup : function(ed) {
ed.onBeforeRenderUI.add(function(ed){
ed.controlManager.setControlType('listbox', tinymce.ui.ListBoxNoTitle);
});
}
});
this setup to standard initialization of tinyMCE. So, it can be done without editing source files.
I currently have a GridPanel with the Ext.ux.RowEditor plugin. Four fields exist in the row editor: port, ip address, subnet and DHCP. If the DHCP field (checkbox) of the selected row is checked, I need to make the other three fields un-editable.
I've been trying to perform this code when the beforeedit event is triggered, but to no avail... I've only found ways to make the entire column un-editable. My code so far:
this.rowEditor.on({
scope: this,
beforeedit: this.checkIfEditable
});
checkIfEditable:function(rowEditor, rowIndex) {
if(this.getStore().getAt(rowIndex).get('dhcp')) {
// this function makes the entire column un-editable:
this.getColumnModel().setEditable(2, false);
// I want to make only the other three fields of the current row
// uneditable.
}
}
Please let me know if any clarification is needed.
Any help potentially extending RowEditor to accomplish the target functionality would be greatly appreciated as well!
You can add into RowEditor.js within the function startEditing the call to the function isCellEditable
//.... RowEditor.js
startEditing: function(rowIndex, doFocus){
//.... search for the starting of the below loop into the source code
var cm = g.getColumnModel(), fields = this.items.items, f, val;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
f = fields[i];
f.setValue(val);
// *** here add a call to isCellEditable *** //
f.setDisabled(!cm.isCellEditable(i, rowIndex));
// ***************************************** //
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
//....
Then override the isCellEditable of your column model and disabled the field based on you condition:
YYY.getColumnModel().isCellEditable = function(colIndex, rowIndex){
if (grid.getStore().getAt(rowIndex).get('dhcp')) {
// you can do more check base on colIndex
// only to disabled the one you want
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, colIndex, rowIndex);
}
As the docs state:
If the listener returns false
the editor will not be activated.
So...
this.rowEditor.on({
scope: this,
beforeedit: this.checkIfEditable
});
checkIfEditable:function(rowEditor, rowIndex) {
if(this.getStore().getAt(rowIndex).get('dhcp')) {
return false;
}
}
Simply returning false will be enough to cancel the editing ability.
Gotcha.
Interesting idea - a bit of a hassle to implement, but possible.
You need to approach this from two directions:
1 ) edit starts
2 ) checkbox is checked/unchecked
For the first part, I think you could use almost the same code I have above, remove the 'return false' and use the reference to the rowEditor to loop through the items collection, disabling (call the disable method on them) the fields that are not your checkbox field.
The second part of this is to add a handler to the checkbox which would do the same thing.
The following works to make a specific cell uneditable (add the event to the roweditor):
beforeedit: function (roweditor, rowIndex) {
var data = roweditor.grid.store.getAt(rowIndex).data;
var cm = roweditor.grid.getColumnModel();
// disable the first column (can not be edited)
if (** make your check here ***) {
var c = cm.getColumnAt(0);
c.editor.disable();
}
roweditor.initFields();
}
As of ExtJS 3.4 you can just override isCellEditable, as in the example here:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.ColumnModel-method-isCellEditable
Here's the simpler version :
http://jsfiddle.net/snehalmasne/8twwywcp/
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
,pluginId: 'editing'
})
]
Provide the condition below for the cells to make the un-editable :
grid.on('beforeedit', function(editor, e) {
if (e.record.get('phone') == '555-111-1224')
return false;
});
just set the column in your columnModel/columns to editable:false for fields that should not be editable.
columns: [
{ header: "Ticker", width: 60, editable:false },
{ header: "Company Name", width: 150, id: 'company'},
{ header: "Market Cap."},
{ header: "$ Sales", renderer: money},
{ header: "Employees", resizable: false}
]
I ran into the same problem. Rather than using the GridPanel with the Ext.ux.RowEditor plugin, I used the Ext.grid.EditorGridPanel. In this case, you can specify the editor for each of the other three fields (port, ip address, and subnet) in the column model with a beforeshow event handler as follows:
editor: new Ext.form.TextArea({
height:80,
allowBlank: false,
listeners:{
beforeshow: function(column) {
if (column.gridEditor.record.get('dhcp')) {
column.gridEditor.cancelEdit();
}
}
}
})
Ha!
I made a dirty one, I added an event this.fireEvent('starting', this, fields,record); AT THE END of startEditing
startEditing: function(rowIndex, doFocus){
if(this.editing && this.isDirty()){
this.showTooltip(this.commitChangesText);
return;
}
if(Ext.isObject(rowIndex)){
rowIndex = this.grid.getStore().indexOf(rowIndex);
}
if(this.fireEvent('beforeedit', this, rowIndex) !== false){
this.editing = true;
var g = this.grid, view = g.getView(),
row = view.getRow(rowIndex),
record = g.store.getAt(rowIndex);
this.record = record;
this.rowIndex = rowIndex;
this.values = {};
if(!this.rendered){
this.render(view.getEditorParent());
}
var w = Ext.fly(row).getWidth();
this.setSize(w);
if(!this.initialized){
this.initFields();
}
var cm = g.getColumnModel(), fields = this.items.items, f, val;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
f = fields[i];
f.setValue(val);
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
this.verifyLayout(true);
if(!this.isVisible()){
this.setPagePosition(Ext.fly(row).getXY());
} else{
this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
}
if(!this.isVisible()){
this.show().doLayout();
}
if(doFocus !== false){
this.doFocus.defer(this.focusDelay, this);
}
/*I ADDED THIS EVENT ---- contains the fields and record
*/
this.fireEvent('starting', this, fields,record);
}
}
THEN
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners : {
'starting' : function(rowEditor, fields, record){
if(!record.data.equipo_id){
fields[4].setDisabled(false);
}else{
fields[4].setDisabled(true);
}
},
Using Ext JS 4 and the RowEditing plugin i managed to achieve this using something like
rowEditor.on('beforeedit', function (context) {
this.editor.query('textfield')[0].setDisabled(/* your condition here */);
});
the record data is available through context.record.data