$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:''
Related
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>");
I am using ng-grid and binding bootstrap calender control onto ng-grid as follows
$scope.EmployeeGridOptions.columnDefs = [
{
field: 'requestStartDate', displayName: 'Start Date',
cellTemplate: '<input ng-click="open($event,row.rowIndex)"
ng-model="row.entity.requestStartDate" datepicker-append-to-body=true datepicker-popup="MM/dd/yyyy" is-opened="false"></input>'
}
]
I want to open the data picker control when user click on textbox. Right now datepicker is getting opened all the time. Is there is any way to open an instance of datepicker when open function is fired.
$scope.calandar=function($event,row){
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
}
Help with regards to this is highly appreciated..Thank you.
Try ng-focus instead of ng-click.
Since I had multiple calendar controls on a web page. Built in angular does not have calendar controls. I do not have paging on the web page. Bootstrap calendar controls are very expensive. Hence used Jquery calendar control to by pass performance issues and functionality. Thank you.
$scope.OpenDatePicker = function (row, rowId) {
lastId = rowId + row.entity.employeeId;
position = $("#" + lastId).offset();
$("#dtpicker").val($("#" +lastId).val());
$('#dtpicker').datepicker('option', 'minDate', $("#PayPeriodEndDateMin").val());
$('#dtpicker').datepicker('option', 'maxDate', $("#PayPeriodEndDate").val());
$(".ui-datepicker-trigger").trigger("click");
}
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.
In ExtJs I would like to achieve the equivalent of:
<input type="radio"><label><input type="text"></label>
Where the input box is associated to the radio button.
new Ext.form.RadioGroup({
id:"alerts",
items: [
new Ext.form.Radio({
boxLabel:'Now',
}),
new Ext.form.Radio({
boxLabel:'On',
})
]
);
I would like the "On" label to have a Ext.form.TextField next to it.
I have tried adding a Ext.form.TextField to the RadioGroup but it will not show (as I assume its because its not a Radio) and I am unable to add items to the Radio object.
Any advice apprecaited, thanks.
Add an <input/> element in the boxLabel, then on the RadioGroup render event create a TextField and apply it to that element
new Ext.form.RadioGroup({
id:"alerts",
items: [
{boxLabel: 'Now',},
{boxLabel: 'On <input id="on_date" type="text"/>'}, // contains <input/> id is "on_date"
],
listeners: {
change: function() {
// really, check if "on" was clicked
if(true) {
Ext.getCmp('on_date_field').focus();
} else {
// otherwise, disable the field?
}
},
render: function() {
new Ext.form.TextField({
id: 'on_date_field',
applyTo: 'on_date', // apply textfield to element whose id is "on_date"
});
}
}
});
I've confirmed that this works with TextField, and although I haven't tried it, it should work with DateField or ComboBox too. Also untested, but instead of creating an <input/>, you could create a container element and create the TextField and renderTo that element.
I don't think that's possible unless you override the RadioButton class and change its rendering logic (and I think that would be more complex than you would think to make a textfield render correctly the way you proposed). A better approach would be to simply add the radio and the textfield as two separate fields and link them programmatically. In Ext 3.2 you could use a CompositeField to do this easily. In the radio's handler fn you can set focus to its associated textbox or whatever other logic you'd need.