We Keep Coding

ExtJs form multiple button for different binding

Need to bind my form elements separately for different buttons. Using allowBlank in elements for sending binding conditions and formBind in buttons for binding the buttons. Need to do this like in this simplest way. (ExtJs 4.2.1 Classic)
Example
Ext.create('Ext.form.Panel', {
......
items: [
Ext.create('Ext.form.field.Date', {
.....,
allowBlank: false, //bind for both search & download button.
.....
}),
......, //// All rest elements bind for both search & download button.
Ext.create('Ext.form.ComboBox', {
......,
allowBlank: false, //bind for only download button.
......
})
],
buttons: [
{
text: 'Search',
formBind: true, /// Need to bind for specific field only.
},
{
text: 'Download',
formBind: true, /// Need to bind for all.
},
............
});
If any other data or details is necessary then please don't hesitate to ask.

I created a fiddle here that I think should accomplish what you're trying to do. The idea to use an event listener on the combobox, instead of the formBind config of the Download button:
https://fiddle.sencha.com/#view/editor&fiddle/289a
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
itemId: 'exampleForm',
items: [Ext.create('Ext.form.field.Date', {
allowBlank: false, //bind for both search & download button.
}),
Ext.create('Ext.form.ComboBox', {
allowBlank: false, //bind for only download button.
listeners: {
change: function (thisCombo, newValue, oldValue, eOpts) {
if (Ext.isEmpty(newValue)) {
thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(true);
} else {
thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(false);
}
}
},
store: ['item1', 'item2']
})
],
buttons: [{
text: 'Search',
formBind: true, /// Need to bind for specific field only.
}, {
itemId: 'btnDownload',
text: 'Download',
disabled: true
//formBind: true, /// Need to bind for all.
}]
});

There is no standard quick way to do this, you might want to write a plugin for this. I've put together one:
Ext.define('App.plugin.MultiDisableBind', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.multidisablebind',
/**
* #cfg
* Reference to the fields that this button depends on.
* Can contain either direct references, or a query selectors that will be
* executed with the button as the root
*/
depFields: null,
/**
* #property
* A map object with field ids as key, and field values as value
*/
valuesMap: null,
init: function (cmp) {
this.setCmp(cmp);
cmp.on('render', this.setup, this);
},
setup: function () {
var cmp = this.getCmp(),
depFields = this.depFields,
valuesMap = {};
if (!Ext.isArray(depFields)) {
depFields = [depFields];
}
Ext.Array.forEach(depFields, function (field) {
if (Ext.isString(field)) {
field = cmp.query(field)[0];
}
cmp.mon(
field,
'change',
Ext.Function.createThrottled(this.updateValuesMap, 300, this),
this
);
valuesMap[field.getId()] = field.getValue();
}, this);
this.valuesMap = valuesMap;
this.updateCmpDisabled();
},
updateValuesMap: function (depField, newValue) {
this.valuesMap[depField.getId()] = newValue;
this.updateCmpDisabled();
},
updateCmpDisabled: function () {
var cmp = this.getCmp(),
toDisable = true;
Ext.Object.each(this.valuesMap, function (fieldId, fieldValue) {
if (!Ext.isEmpty(fieldValue)) {
toDisable = false;
return false
}
});
cmp.setDisabled(toDisable);
}
});
You can use this plugin in your buttons like so:
xtype: 'button',
text: 'My button',
plugins: {
ptype: 'multidisablebind',
depFields: ['^form #fieldQuery', fieldVar]
}
In the depFields config you specify references to the fields that button's disabled state depends on, and the plugin will monitor these fields, so that on each field value change it will update the disabled state.
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/28cm

I have created a fiddle for you. The code uses bind and formBind respectively for the two different buttons. May be you want something like this.

Remove row from Kendo UI Grid with jQuery

I am using a Kendo UI grid and for deleting a row I am using a custom button with bootstrap that when I click on it, with ajax I call a web api method to remove that row and if it is successfully deleted that row removes it from the DOM. (I'm not using the command destroy of kendo)
The problem I have is that if I try to filter that row that was removed, it appears again in the grid and it seems that it was not removed at all.
This is my Kendo UI grid:
var table = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/api/customers",
dataType: "json"
}
},
pageSize: 10
},
height: 550,
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<a href='' class='btn-link glyphicon glyphicon-remove js-delete' title='Delete' data-customer-id= #: Id #></a>",
field: "Id",
title: " ",
filterable: false,
sortable: false,
width: 50,
attributes: {
style: "text-align: center"
}
}, {
field: "Name",
title: "Name",
width: 100,
}, {
field: "LastName",
title: "LastName",
width: 100,
}, {
field: "Email",
title: "Email",
width: 150
}]
});
And this is my jQuery code for deleting a row:
$("#grid").on("click", ".js-delete", function () {
var button = $(this);
if (confirm("Are you sure you want to delete this customer?")) {
$.ajax({
url: "/api/customers/" + button.attr("data-customer-id"),
method: "DELETE",
success: function () {
button.parents("tr").remove(); //This part is removing the row but when i filtered it still there.
}
});
}
});
I know that in jQuery DataTables when can do something like this:
table.row(button.parents("tr")).remove().draw();
How can i do something like this with Kendo UI using jQuery?

Don't ever play with a Kendo's widget DOM. Always use it's methods instead.
Using Grid's removeRow():
$("#grid").on("click", "button.remove", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid");
grid.removeRow($tr);
});
Demo
Using DataSource's remove():
$("#grid").on("click", "button.remove", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($tr);
grid.dataSource.remove(dataItem);
});
Demo

My usage was a little different. I have a custom delete button, so I needed to delete by ID, not UID.
You should be able to match on any field value instead of ID.
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataSource.get(ID);
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
grid.removeRow(row);
We were trying to prevent messing with the controller, and this calls the existing delete function.

The removed row will be present in the kendo ui till you push changes to server.
To remove the row entirely you need to use
grid.saveChanges()
So the code below will remove row from server as well from ui
const row = $(e.target).closest('tr')[0];
const grid = $(e.target).closest('#grid').data("kendoGrid");
grid.removeRow(row);
grid.saveChanges() //comment out if you need to remove only from ui

Onclick event of button placed in each row jqgrid not firing?

Situation : My app carries out an AJAX request and the data received is displayed in the following JQgrid . listData(data) is a function that is called in success call back of this ajax request ,
data is the JSON data received from request .
buildJqGrid is a custom function that calls the .jqgrid() on a table and div html element .
buttonFormatter is my custom formatter for the column named Action
function listData(data) {
var containerName = 'datatablea3',
columnNames = ["Name",
"Email",
"Language",
"Office",
"alter email",
"Action"
],
columnModels = [{
name: 'Name',
index: 'Name',
width: '200px'
},{
name: 'Email',
index: 'Email',
width: '200px'
}, {
name: 'Language',
index: 'Language',
width: '200px'
}, {
name: 'Office',
index: 'Office',
width: '200px'
}, {
name: 'AlterEmail',
index: 'AlterEmail',
width: '200px'
}, {
name: 'action',
width: '200px',
formatter: buttonFormatter
}],
sortColumnName = 'Name',
caption = "Employees",
rowNum = 25,
pager = '#pager2a3',
grouping = false,
groupingView = {},
rowList = [25, 50, 100];
buildJqGrid(containerName, data, columnNames, columnModels,
sortColumnName, caption, rowNum, pager, grouping,
groupingView, rowList, true, 'asc');
}
Problem : When this jsp is run data is successfully displayed in the jqgrid with view button in each record , but when i click on the view button nothing happens !.
I checked in console it shows "control in formatter" but on clicking view button it doesn't show "control in click function".
i also tried using editLink formatter but still same error there ,
Can anyone please tell me why my button's onclick event is not firing ?

"click" is already a function, and therefore you override it, and nothing fires.
Try this
function buttonFormatter(cellvalue, options, rowObject)
{
console.log("control in button formatter");
return '<button onclick=\"clickFunction();\">View</button>';
}
function clickFunction()
{
console.log("control in click function");
alert("hello");
}
Simple fiddle : https://jsfiddle.net/virginieLGB/5e5LL5po/1/

try like this, I also use same functionality(JQ Grid) in my project, try HTML input type rather than the button,
When using your code, click event was firing but the whole web page is reloading.
function buttonFormatter(cellvalue, options, rowObject) {
if (rowObject.Status != "Not Started") {
console.log("Zumbaa");
var edit = "<input class='Viewbtn' type='button' value='View' onclick=\"ShowMigrationProcess(" + cellvalue + ");\" />";
return edit;
}
return '';
}

ExtJS qtip is not getting displayed

I have a grid panel and im trying to display a hover popup on a particular column. I have tried both tooltip and qtip but they are just not getting displayed. My grid panel looks as:
Ext.create('Ext.grid.Panel', {
id: 'frPanel-'+interfaceId,
store: frStore,
columns : [ {text : 'Source',
dataIndex : 'source',
renderer : function(value) {
return convertObjValue(value);
},
listeners: {
afterrender: function ()
{
Ext.create('Ext.tip.ToolTip',
{
target: this.el,
trackMouse: true,
html: "Hello there"
});
}
}
}, {
text : 'Destination',
dataIndex : 'destination',
menuDisabled : true,
renderer : function(value, metaData) {
var newValue = convertObjValue(value);
metaData.tdAttr = 'data-qtip="' + newValue + '"';
return newValue;
}
}
What am i doing wrong here? Any help how i can achieve this?
EDIT : So i made the second column work by adding Ext.QuickTips.init(); in the onReady() function. But i still wanna know how to make it work using the approach in first column.

Dojo Dgrid row selection not working and retrieving the values of dgrid selectors?

Currently i am using the Dojo dgrid with select box,textbox and two checkboxes but i am not able to disable the whole row selection and also when i click the second checkbox the dgrid select and deselect not working and its reflecting the first checkbox.
1.How to disable the whole row selection in dojo Dgrid?
2.How to get the values of Dgrid selectbox and Dgrid textbox when i click on save?
3.If i use selectors(Checkbox) i am not able to render the label for that column?
var columns = {
person :{
sortable: false,
renderCell: lang.hitch(this, function(object,value,node) {
if(value == true){
myTextBox = new dijit.form.TextBox({
name: "Amount",
value: "" ,
placeHolder: "Enter Amount"
}).placeAt(node);
}
})
},
description:{
label:"description",
field:"description",
sortable: false,
renderCell : lang.hitch(this, function(object,
value, node, options) {
new Select({
name : "select",
options : [ {
label : "Daily",
value : "daily"
}, {
label : "Weekly",
value : "weekly",
}]
}).placeAt(node);
}),
},
email : selector({
sortable:false,
field:"email"
})
/*i tried this instead of using selectors inserting a checkbox so that i can remove complete row selection but not working*/
email: {
sortable:false,
field:"email",
renderHeaderCell : function(node) {
var cellDiv = domConstruct.create("label", {
innerHTML : "Email"
}, node);
var checkBox = new CheckBox({
name: "checkBox",
id:"emailAddress",
checked: false,
}, cellDiv);
},
renderCell:createMessageLabel
}
};
function createMessageLabel(object,value, node,options){
console.log("node option",node);
var checkbox = new CheckBox({
name: "checkBox",
id:"emailAddress",
checked: false,
}).placeAt(node);
};
var grid = new GridView().show(gridData, columns, "",
"dgridAutoHeight", true);
function addSelection(self, event) {
console.log("Row selected: ", event.rows[0].data);
}
function removeSelection(self, event) {
console.log("Row deselected: ", event.rows[0].data);
}
grid.startup();
grid.on("dgrid-select", lang.hitch(grid, addSelection, this), true);
grid.on("dgrid-deselect", lang.hitch(grid, removeSelection, this), true);
Hope i can get some valuable answers....

To disable direct selection, set selectionMode: "none" in the properties passed to the constructor. This does not affect selection via a selector column.
You should still be able to set the label in the header cell of a selector column by setting the label property in the object passed to the selector column plugin.
If you want to use Dijit form widgets for the purpose of changing values of fields in items, you should probably not be defining renderCell functions yourself, but instead use the editor column plugin, which does the work of maintaining the state of data and putting it back in the store when you call save.

Thank you so much Ken for your valuable answer and as you said editor suits perfect for the above situation....but i have an another doubt like can't we user editor inside a renderCell like below as i needed the value of textbox on datachange so i thought of using editor inside rendercell....below code is working fine but the TextBox is not getting placed inside a particular node(Textbox view is not getting rendered) whereever the value is "True"....
dollarThresholdAvailable :{
field: "dollarThresholdAvailable",
label : "Threshold Limit",
sortable: false,
"class":"dollarThresholdAvailableValue",
renderCell: lang.hitch(this, function(object,value,node) {
if(value === true){
editor({
field: "dollarThresholdAvailable",
sortable: false
},TextBox).placeAt(node);
}
}),
}