I have column holding the checkbox on a MVC kendo grid. When I click on the column but not on the checkbox, the checkbox position is slipping (moving towards right) and the click event is not delegating to checkbox.
I tried Change event and DataBound to suppress the click even on column but couldn't do it.
Any suggestions to disable the click event on this Kendo Grid checkbox-column or to delegate the column's click event to checkbox!
Below is the code snippet that I have used to build the checkbox column,
columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<input type='checkbox' #= (IsSelected) ? checked='checked' : '' # id=chk#=(Id)# class='exclchkbx' />").HtmlAttributes(new { style = "text-align: center;" }).Width(10).HeaderHtmlAttributes(new { style = "text-align:center;" });
Output of my grid column
Dislocated checkbox after clicking the checkbox column (but not on checkbox)
Appreciated in advance!
The reason why the checkbox position is slipping is that there is default padding applied. Instead of using the HeaderHtmlAttributes method, you can wrap up the template in a div with text-center as follows:
columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<div class=\"text-center\"><input type='checkbox' #= (IsSelected) ? checked='checked' : '' # id=chk#=(Id)# class='exclchkbx' /></div>");
Related
We have ExtJs fields in which LabelAlign is configured as 'top', but when we click on label it focusses the field, this creates problem if the field is checkbox, as on click of checkbox label it checks/unchecks the checkbox field. I have searched for some configs to disable the same , but couldn't find out. Later i used pointer-events:none CSS property on labels but not sure it will be correct solution. please guide.
Fiddle Example illustrating the above issue
You can prevent the click on the label from affecting the checkbox by removing the for attribute from the label. This will break the association between the label and the checkbox. To do this in ExtJS:
Ext.query('label[id^=checkbox]').forEach(function (item) {
item.removeAttribute('for');
});
This will find all of the labels for checkboxes and remove the for attribute so the label is no longer associated with the checkbox.
If you want to implement this for all fields, not just checkboxes, change it to search for all labels:
Ext.query('label').forEach(function (item) {
item.removeAttribute('for');
});
This code should be executed after your form is created.
See updated fiddle here.
There is no as such solution as far as i know for that because it will happen in every field not only in checkbox but there is a workaround that, you can add two xtypes as label and field needed and arrange them in vbox layout and give that label a 'html' config as that fieldlabel of the next field.
For e.g,
{
xtype:'container',
layout:{
type:'vbox'
},
items:[
{
xtype:'label',
html:'Email Address'
},
{
xtype:'checkboxfield',
name: 'email'
}
]
}
With this the container that will be made by extjs for checkboxfield will be different for label and field so when you click on label that's a different control for it and hence won't check the checkboxfield.
$scope.gridOptions={data:'test',
ColumnDefs:[
DisplayName:'Select Gender',
field:'Gender',
CellTemplate:'<div><input type='text'></div>' ]};
within cell template I want dropdown,textbox and radio button
For TextBox on Grid-cellTemplate:''
I need to change the background color of icon inside extjs grid action column on clicking that icon.
handler: function(grid, rowIndex, colIndex) {
//Need to change the delete icon with add icon
}
http://jsfiddle.net/mohansee/6afxy/6/
var deleteBttn = Ext.query('td.x-action-col-cell img',grid.getNode(rowIndex))[0];
deleteBttn.src = 'http://etf-prod-projects-1415177589.us-east-1.elb.amazonaws.com/trac/docasu/export/2/trunk/client/extjs/shared/icons/fam/add.gif';
By adding the above code in the handler section fixed it.
This works fine if you are not in paging grid or on the same page in the paging grid, it doesn't work for the paging grid.
I have a panel and a grid on this panel. Both of them have a button with itemId=remove
Also have two controllers with controls like:
'panel_alias #remove' : {
click : someAction ...
'inner_grid_alias #remove' : {
click : anotherAction ...
But, when i click on grid "remove" button, "someAction" are called.
Set a different itemId for buttons is not a solution, because controls builds dynamically.
I have designed Fieldset and checkboxtoggled set to true,My requirement is click on check box(uncheck) of fieldset, Hide some controls in fieldset, again check on checkbox show all controls (need not to collapse fieldset when click on checkbox).
What is the right way to handle this?
(I am using collapse/expand listeners for fieldset, but unable to achieve it)
You can use the beforecollapse & beforeexpand event to override the default behavior. Here is what you can do:
listeners: {
'beforecollapse' : function(panel,ani) {
// Hide all the form fields you need to hide
return false; // this will avoid collapse of the field set
},
'beforeexpand' : function(panel,ani) {
// Display all the fields
return false; // this will avoid the default expand behaviour
}
}