in angulajs i have a ng-grid that i fill with data returned from a server. The field "Active" is a boolean so i have make a template to show a checkbox:
$scope.gridOptions = { data: 'myData', enableCellSelection: true,
enableRowSelection: false, enableCellEdit: true,
columnDefs: [{ field: 'Id', displayName: 'Id', visible: false },
{ field: 'Name', displayName: 'Name', enableCellEdit: true },
{ field: 'Active', displayName: 'Active', enableCellEdit: true, cellTemplate: '<input type="checkbox" ng-model="row.entity.Active" >' }]
Now, when i edit some cell, i want save back to the database the edited row and so i handle the ngGridEventEndCellEdit:
$scope.$on('ngGridEventEndCellEdit', function (data) {
....
}
event. In effect when i edit the cell "Name" the above handler is called but when i check/uncheck the checkbox Active, that event isn't called.
How can i emit the ngGridEventEndCellEdit when i check/uncheck the checkbox? Or how can handle that?
What about emitting ngGridEventEndCellEdit from the checkbox ng-change function?
ng-change="emitEndCellEdit()"
with
$scope.emitEndCellEdit = function() { $scope.$emit('ngGridEventEndCellEdit') }
Try to add ng-change="edit(row)" to your cell template. Handle all your stuff inside $scope.edit function. You should receive clicked grid data as a parameter.
Related
I am currently using ag-grid in my project. Am trying to agroup the data using the agrouping feature.
In my col def I have this:
{headerName: "Parent", field: "ParentID",width: 120,rowGroup:true},
{headerName: "Name", field: "Name"},
{headerName: "Level", field: "Level"},
{headerName: "Active", field: "Active"},
{headerName: "Actions",
field: "Actions",
cellRenderer: function (params) {
/*Generate a link and return it*/
return EditLink;
}
}
Then, the ag-grid options:
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
onGridReady: function () {
gridOptions.api.sizeColumnsToFit();
},
animateRows: true,
enableRangeSelection: true,
enableSorting: true,
enableFilter: true,
enableColResize: true,
domLayout:'autoHeight',
rowHeight: 48,
enableStatusBar: true,
rowSelection: 'single',
groupMultiAutoColumn:true,
groupRemoveSingleChildren:true,
icons: {
checkboxChecked: '<img src="data:image/png;base64,SOMECODEHERE"/>'
}
};
However, I am not getting the expected behaviour, I have the table rendered with the data and the column to agroup the data, but it's not agrouped, it's like ordered but I don't see the button to dropdown the children
Are you sure the ParentID is shared amongst several rows? The groupRemoveSingleChildren option will show no groups if no ids are shared.
You can also try using rowGroupIndex as opposed to rowGroup
i.e
this.columnDefs = [
{headerName: "Clan", field: "clan", editable: true, rowGroupIndex: 0 },
The rowGroupIndex allows sub groups to be defined so you can nest groups (if you need to).
I would also recommend removing the groupRemoveSingleChildren just to see if you get the checkbox or whether the data is at fault..
I have a ExtJs Form Panel
{
xtype: 'form',
items: [{
xtype: 'grid',
forceFit: true,
selType: 'checkboxmodel',
collapsible: true,
store: duplicateDataStore,
title: 'Data (' + duplicateDataStore.getCount() + ')',
columns: [
this.getRadioButton()
]
}]
}
...
getRadioButton: function() {
return {
header: 'name',
hideable: false,
renderer: this.renderRadioBox,
formBind: true
};
},
renderRadioBox: function( val, meta, record, rowIndex, colIndex, store ) {
return '<input type="checkbox" id="checkbox" role="checkbox" name="test" value="1" >';
},
After clicking the submit button i select the current form values.
this.lookupReference( 'data' ).down( 'form' ).getForm().getValues();
But i could not get any data from this selection. When i add a checkbox-item to the form, data will be readable, but not from the grid column.
Is there a solution for it?
I have the following grid which contains data from a local array (which I save with my own custom call):
var datagrid = [
{name:"Id",description:"description",entityid:"12",amount:"100"},
{name:"Id2",description:"description",entityid:"17",amount:"200"}
];
$grid = $("#grid1").jqGrid({
datatype: "local",
data: datagrid,
height: "auto",
autowidth: true,
shrinkToFit: false,
colNames:['Name','Description', 'Entity', 'Amount', ''],
colModel:[
{index: 'name', name: 'name', editable: true, edittype: 'text'},
{index: 'description', name: 'description', editable: true, edittype: 'text'},
{index: 'entityid', name: 'entityid', editable: true, edittype: 'select', formatter: 'select', edittype: 'select', editoptions:
{
dataUrl: 'url/to/drop/down/data',
buildSelect: function(data)
{
return buildSelectFromJson(data, 'oid', 'oname');
}
}
},
{index: 'amount', name: 'amount', editable: true, edittype: 'text'},
{name:'act', index:'act', sortable:false, width: "140px"}
],
onSelectRow: function(rowid){
rowSelected('grid1', rowid);
},
rowNum: 500,
editurl: "clientArray",
caption: "Details",
ajaxSelectOptions: {contentType: "application/json", dataType: 'json'}
});
$grid.jqGrid('hideCol',['act']);
Next to the "entityid" drop down I want to add a button to show a popup to enter a new entity. I want the new entity to be loaded in the drop-down after the popup closes.
Previously I used editoptions: {value: getValueFunction} but I read some advice in stack overflow which advised against it and anyway I could not load the new entity in the drop-down after the popup closed. But I was able to add the button this way:
function rowSelected(gridid, rowid){
var $grid = $("#" + gridid);
var rowData = $grid.jqGrid('getRowData', rowid);
$grid.jqGrid('showCol',["act"]);
var oneditfunction = function(){
var button = '<input id="newFieldRange" type="button" value="+"></input>';
$grid.find("select").parent().append(button);
$("#newEntity").on('click', function () {
newEntity(gridid, rowid);
});
};
$grid.jqGrid('editRow', rowid, {oneditfunc: oneditfunction});
}
Using the same code for rowSelected function and the code I showed above for the grid, the button is not added. The drop-down is filled with data successfully.
I have the following questions:
1) How can I add a custom button to "entity" cell? Is this not advised? The columns and data I show are not the real data for simplicity reasons. Due to some restrictions, it is not possible to add another column next to the drop-down (we use 'act' column for "Save" and "Cancel" buttons). I would like to add the button in the same cell as the drop-down. Unless there are alternative solutions.
2) How can I force the drop-down to reload after I close the "New entity" popup? I couldn't find anything in the jqGrid wiki.
EDIT: I was able to add the button using onsuccessfunc of jQGrid's editRow. But I am forced to use "select" jqgrid selector without specifying an id, because the and elements do not have any ids. I might need to add another dropdown which would cause issues. Am I missing something?
Thanks in advance for any responses.
I found myself in need of what i guess should be a trivial requirement. i have a jqGrid in which i have added a custom button in each row. now i am able to associate a client side click event with it but i want to know the key value (Id) in my case of the row whose custom button was clicked, so that i can proceed with this id and do whatever i want to do.
My code for jqGrid is as below
jQuery("#JQGrid").jqGrid({
url: 'http://localhost:55423/JQGrid/JQGridHandler.ashx',
datatype: "json",
colNames: ['', 'Id', 'First Name', 'Created Date', 'Member Price', 'Non Member Price', 'Complete', 'customButton'],
colModel: [
{ name: '', index: '', width: 20, formatter: "checkbox", formatoptions: { disabled: false} },
{ name: 'Id', index: 'Id', width: 20, stype: 'text', sortable: true, key: true },
{ name: 'FirstName', index: 'FirstName', width: 120, stype: 'text', sortable: true },
{ name: 'CreatedDate', index: 'CreatedDate', width: 120, editable: true, sortable: true, hidden: true, editrules: { edithidden: true} },
{ name: 'MemberPrice', index: 'MemberPrice', width: 120, editable: true, sortable: true },
{ name: 'NonMemberPrice', index: 'NonMemberPrice', width: 120, align: "right", editable: true, sortable: true },
{ name: 'Complete', index: 'Complete', width: 60, align: "right", editable: true, sortable: true },
{ name: 'customButton', index: 'customButton', width: 60, align: "right" }
],
rowNum: 10,
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridPager',
sortname: 'Id',
viewrecords: true,
sortorder: 'desc',
caption: "List Event Details",
gridComplete: function () {
jQuery(".jqgrow td input", "#JQGrid").click(function () {
//alert(options.rowId);
alert("Capture this event as required");
});
}
});
jQuery('#JQGrid').jqGrid('navGrid', '#jQGridPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext:"Delete"
},
{/*EDIT EVENTS AND PROPERTIES GOES HERE*/ },
{/*ADD EVENTS AND PROPERTIES GOES HERE*/},
{/*DELETE EVENTS AND PROPERTIES GOES HERE*/},
{/*SEARCH EVENTS AND PROPERTIES GOES HERE*/}
);
Help or any pointers would be much appreciated.
The main solution of your problem in the following: you need include parameter, for example e, in the callback of click handle. The parameter has Event object type which contain target property. Alternatively you can use this in the most cases. Having e.target you can goes to the closest parent <tr> element. It's id is the value which you need:
jQuery(this).find(".jqgrow td input").click(function (e) {
var rowid = $(e.target).closest("tr").attr("id");
alert(rowid);
});
Additionally you should make some other modifications in your code to fix some bugs. The usage of
name: '', index: ''
is wrong in colModel. You should specify any non-empty unique name. For example name: 'mycheck'.
Next I recommend you to remove all index properties from colModel. If you use loadonce: true you have to use index properties with the same values as the corresponding name values. If you don't specify any index properties you will have smaller and better readable code. The corresponding values of index properties will be copied by jqGrid internally from the corresponding name values. In the same way you can remove properties like stype: 'text', sortable: true which values are default values (see Default column of the documentation)
The next problem is that you include probably HTML data in the JSON response from the server. (One can't see any formatter for customButton for example). It's not good. In the way you can have problems if the texts of the grid contains special HTML symbols. I find better to use pure data in JSON response from the server. One can use formatters, custom formatters etc on the client side. In the case one can use autoencode: true option of jqGrid which make HTML encoding of all texts displayed in the grid. In the way you will have more safe code which will don't allow any injection (for example no including of JavaScript code during editing of data).
Next remark: I don't recommend you to use gridComplete. The usage of loadComplete is better. See my old answer about the subject.
The last important remark. To handle click events on the buttons placed inside of grid one don't need to bind separate click handle to every button. Instead of that one can use one beforeSelectRow or onCellSelect callback. The answer and this one describe this. The answers use <a> in custom formatter, but <input> works exactly in the same way.
Another approach that can be used to retrieve the id of the row for which the custom button is clicked is by adding formatter to your custom button cloumn
{ name: 'customButton', index: 'customButton', width: 60, align: "right",
formatter: function ( cellvalue, options, rowObject ) {
return "<input type='button' class='custom-button' id='custom"+ rowObject.id +"'/>";
}
}
Now every button has the row id
$('input[id^="custom"]').click(function() {
var id = this.attr('id').replace("custom", ""); // required row ID
});
I have a KENDO Grid and the fields and columns in that are populated from a datasource which is intern populated from an action.
Now i want to bind a particular cell content in that grid to another controller action and pass that ID of the cell also. How do I accomplish this. Below is the code for my grid. I could find answers in kendo UI docs but they use HTML Helpers to achieve this. I want it in the same style as below. Let us take the readername as the cell content for which this binding is required. Anybody tried this before?
$("#eventsgrid").kendoGrid(
{
dataSource: eventsDataSource,
navigatable: true,
pageable:
{
input: true,
numeric: false
},
columns:[
{
field:"",width:"30px", template:'<input type="checkbox" id="selectevent"/>'
},
{
field:"CardNumber",width:"80px"
},
{
field: "Image", width: "45px", title: "Type", template: "<img src='/Content/Themes/Default/images/AlarmType.png' id='AlarmType'/>"
},
{
field: "Priority", width: "60px", title: "Priroty"
},
{
field: "Origin", title:"Event Time"
},
{
field:"Description", title:"Alarm Title"
},
{
field: "ReaderName", title: "Location"
},
{
field: "", title: "Actions and Interactions", width: "160px", template: '<input type="button" value="Acknowledge" onclick="CheckAck" id="Acknowledge" /><br/><a href="javascript:performActions()" >3 Actions</a>'
},
{
field: "Image", title: "More", width: "60px", template: "<img src='/Content/Themes/Default/images/Door.png' onclick='showDetails()' id='door' width='20' height='20'/><div id='cardholderdetails'></div>"
}
],
}).data("kendoGrid");
Now i have a function which calls a $.POST call with the parameters. This function is hooked to the click event of the button. Is there a different way to do this?