I have config.json file where i define columnDefs. I want to add hyperlink text to name field and redirect to page with information about that row. I try with some examples on SO but no success..
config.json
"columnDefs":[
{
"name": "name"
},
{
"name": "object_type_s"
}
........
]
controller
$scope.gridOptions = {
columndDefs: config.columnDefs,
......
}
If i put cellTemplate in config file like this
{
"name": "name",
"cellTemplate": "<a href="#">"
},
this will add hyperlink in all rows in my grid. I want for example to add hyperlink only to rows where
$scope.gridOptions.data.object_type == "SOMETHING"
When you click on a name, it takes you a next page
$scope.gridOptions = {
paginationPageSizes : [ 25, 50, 75 ],
paginationPageSize : 25,
enableColumnResizing : true,
enableSorting : true,
enableRowSelection : true,
enableSelectAll : true,
enableRowHeaderSelection: true,
selectionRowHeaderWidth : 35,
rowHeight : 35,
showGridFooter : true,
The row template is used to get the selected row on an ui-grid
rowTemplate : rowTemplate(),
columnDefs : [
{
field : 'id',
name : 'id',
width: 200,
},
{
field : 'name',
name : 'name',
width : 120,
sort : {
priority : 0,
},
cellTemplate:'<div >' + ''+ '' + '</div>',
}
} ],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
};
It gets a row, when we select a record
function rowTemplate() {
return '<div ng-click="grid.appScope.rowDblClick(row);">' + ' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div>' + '</div>';
}
when you click a row, you get a row using this method
$scope.rowDblClick = function(row) {
console.log('The selected object id is : ', row.entity.id);
console.log('The selected object nameis : ', row.entity.name);
};
Related
I want to call editEmployee / deleteEmployee function from datatable column Edit / Delete Link With Parameter empId value.
How can i pass empId column value in editEmployee / deleteEmployee function called from Edit And Delete links.
Below is my javascript code :
table = $('#employeesTable').DataTable(
{
"sAjaxSource" : "/SpringDemo/employees",
"sAjaxDataProp" : "",
"order" : [ [ 0, "asc" ] ],
"aoColumns" : [
{
"className": "dt-center",
"sClass" : "center",
"mData" : "empId"
},
{
"orderable": false,
data: null,
className: "dt-center",
defaultContent: ''
} ,
{
"orderable": false,
data: null,
className: "dt-center",
defaultContent: ''
} ]
})
table = $('#employeesTable').DataTable(
{
"sAjaxSource" : "/SpringDemo/employees",
"sAjaxDataProp" : "",
"order" : [ [ 0, "asc" ] ],
"aoColumns" : [
{
"className": "dt-center",
"sClass" : "center",
"mData" : "empId"
},
{
"orderable": false,
data: null,
className: "dt-center",
defaultContent: '<a data-emp_id="[add emp id value here]" class="glyphicon glyphicon-pencil text-primary edit-link"></a>'
} ,
{
"orderable": false,
data: null,
className: "dt-center",
defaultContent: '<a data-emp_id="[add emp id value here]" class="glyphicon glyphicon-remove text-danger delete-link"></a>'
} ]
})
$('.edit-link').on('click', function () {
var empid= $(this).data('emp_id')
window.location.href="edit url ";
});
$('.delete-link').on('click', function () {
var empid= $(this).data('emp_id')
window.location.href="delete url ";
});
Basically You need to have onclick events for each based on the class.. then fetch the empID stored in the data-emp_id attribute of the button thats been clicked and then redirect appropriately
Thanks All For Comments.
I have solved issue by storing id in hidden input and accessing it in edit like this.
$(document).on('click', '#employeesTable tr', function(e) {
var row_object = table.row(this).data();
$("#hdnID").val(row_object.empId);
});
function editEmployee() {
$.ajax({
url : 'edit/' + $("#hdnID").val(),
type : 'GET',
success : function(result) {
// Do something with the result
}
});
}
I am trying to display image in the jsGrid from the database.I have tried below code.
.js code:
fields : [ {
title : "Currency Code",
name : "curr_code",
type : "text",
width : 35,
filtering : false,
editing : true,
align : "center"
},
.....
{
title : "Symbol",
name : "curr_symbol",
type : "text",
width : 35,
filtering : false,
editing : true,
align : "center"
},
{
type : "control",
editButton : true,
modeSwitchButton : true,
deleteButton : true,
width : 35
}
]
Grid View:
$.post('../../setupController/currencyGridView', function(obj) {
for (var i = 0; i < obj.length; i++) {
var currList = {
"curr_id" : obj[i].currency_id,
"curr_code" : obj[i].curr_code,
"curr_desc" : obj[i].curr_desc,
"curr_count" : obj[i].curr_country,
"curr_symbol" : obj[i].symbol,
}
$("#currencygrid").jsGrid("insertItem", currList).done(
function() {
});
}
});
Controller code:
#RequestMapping(value = "/currencyGridView", method = RequestMethod.POST)
#ResponseBody
public List<Currency> currencyGridView() {
List<Currency> currList = setupDao.currencyGridViewData();
return currList;
}
Now its showing output like this but not showing the image..
You can use itemTemplate. If you have image link you can do something like below
{
title: "Symbol",
type: "text",
width: 50,
itemTemplate: function(value, item) {
if(item.symbolId){
return '<img src="/img/"'+ item.symbolId + '" "width="42" height="42">';
}
return '';
}
}
Maybe you can override the itemTemplate function for that image column.
js
itemTemplate: function(value, item) {
return value;
},
Or do some custom row rendering : http://js-grid.com/demos/custom-row-renderer.html
I have used gridComplete to show HTML buttons but it shows the HTML text instead of button and encoded HTML as title which does not look good. Kindly help me remove or change the title (tooltip) and show the buttons
The Output
When I inspect this cell then I could see the following in chrome tools -
<td role="gridcell" style="" title="<input type='button' value='Publish' onclick='publish(100)' />" aria-describedby="list_actionBtn"><input type='button' value='Publish' onclick='publish(100)' /></td>
The jqgrid Code
var myColModel = [ {
name : "promoId",
index : 'Promotionid',
width : 60
}, {
name : "promoCode",
index : 'promotioncode',
width : 110
}, {
name : "name",
index : 'name',
width : 160
}, {
name : "description",
index : 'description',
width : 250
}, {
name : "distCode",
index : 'distributor_code',
width : 110
} , {
name : "statusId",
hidden : true
} , {
name : "statusVal",
index : 'status',
width : 90
}, {
name : "startDate",
index : 'start_date',
width : 100,
sorttype : "date",
align : "right"
}, {
name : "endDate",
index : 'end_date',
width : 100,
sorttype : "date",
align : "right"
}, {
name : "discount",
index : 'discount',
width : 80
}, {
name : "extension",
index : 'extension',
width : 80
}, {
name : "isDiscount",
hidden : true
}, {
name : "isExtension",
hidden : true
}, {
name : "actionBtn",
width : 100
} ];
$(function() {
$("#list")
.jqGrid(
{
url : '/suiactcodegen/action/promotion/promolist',
datatype : "json",
mtype : "GET",
colNames : [ "Promo ID", "Promo Code", "Name",
"Description", "Distributor Code", "Stt Id",
"Status", "Start Date", "End Date",
"Discount", "Extension", "Is Disc", "isExtn", "" ],
colModel : myColModel,
pager : "#pager",
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : "end_date",
sortorder : "asc",
viewrecords : true,
gridview : true,
rownumber : true,
autoencode : true,
width : '1000px',
height : 'auto',
caption : "Promotion Summary",
gridComplete: function() {
var ids = $("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var rowId = ids[i],
statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
activeBtn = "";
if (statusId == 0) { // Inactive
activeBtn = "<input type='button' value='Publish' " +
"onclick='publish(" + rowId + ")' />";
}
//else if (statusId == 1) { // Published
// activeBtn = "<input type='button' value='Expire' " +
// "onclick=\"expire(" + rowId + ");\" />";
//}
$("#list").jqGrid('setRowData', rowId, { actionBtn: activeBtn });
}
}
}).jqGrid('navGrid', '#pager', {
add : false,
edit : false,
del : false,
search : true,
refresh : false
}).jqGrid('navButtonAdd', '#pager', {
caption : " Edit ",
// buttonicon: "ui-icon-bookmark",
onClickButton : editPromo,
position : "last"
});
});
-- Update --
I have already tried autoencode = false for this column but it didn't work
IMP Update
The reason why it doesn't work I believe is because datatype is 'json' but button type is not json data type. How can I create it as a separate row? In case of 'local' data it works. See the fiddle http://jsfiddle.net/zpXCT/3/. Even tested it in my localhost
Sry I copied the basic grid from JqGrid site and then edited that and didn't notice that autoencode:true for grid level. So even though I mentioned it for column level it wasn't working. Now it appears.
Set colmodel datatype = 'html'
I have the following code in a grid:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Job ID',
width : 75,
sortable : true,
dataIndex: 'id'
},
{
text : 'File Name',
width : 75,
sortable : true,
dataIndex: 'filename',
listeners : {
'mouseover' : function(iView, iCellEl,
iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
var zRec = iView.getRecord(iRowEl);
alert(zRec.data.id);
}
}
...etc...
I can't figure out how to get the cell value of the first column in the row. I've also tried:
var record = grid.getStore().getAt(iRowIdx); // Get the Record
alert(iView.getRecord().get('id'));
Any ideas?
Thanks in advance!
It's easier than what you have.
Look at the Company column config here for an example-
http://jsfiddle.net/qr2BJ/4580/
Edit:
Part of grid definition code:
....
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + record.get('price') + ' is the price of ' + value + '"';
return value;
}
},
....
You can add a handler instead of a listener.
{
header: 'DETAILS',
xtype:'actioncolumn',
align:'center',
width: 70,
sortable: false,
items: [
{
icon: '/icons/details_icon.png', // Use a URL in the icon config
tooltip: 'Show Details',
handler: function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
}
My problem now is trying to send the ID (editable: false) of a row when editing that row.
For example, i have a grid with columns userid(editable: false), username(editable: true), firstname(editable: true), lastname(editable: true). When editing the row the grid is only sending the parameters username, firstname and lastname. In the server side i need the userid to know to which user i've tu apply those new values.
the editUrl looks like:
editurl : CONTEXT_PATH+'/ajax/admin/savePart.do?category=1',
Thanks
This is the full code:
$.jgrid.useJSON = true;
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules
$(document).ready(function() {
//alert(CONTEXT_PATH);
var lastsel;
jQuery("#rowed3").jqGrid(
{
url : CONTEXT_PATH+'/ajax/getPartesByCategory.do?catid=<s:property value="categoryId" />',
//url : '/autoWEB/text.html',
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
headertitles: true,
colNames : [ 'ID', 'Pieza', 'Disponible'],
colModel : [ {
name : 'piezaId',
index : 'piezaId',
align : "right",
width : 50,
editable : false,
required : true
}, {
name : 'descripcion',
index : 'descripcion',
width : 390,
editable : true,
required : true
}, {
name : 'disponible',
index : 'disponible',
width : 80,
editable : true,
edittype : 'select',
editoptions:{value:"0:No;1:Si"},
required : true
} ],
rowNum : 20,
rowList : [ 20, 40, 60, 80 ],
pager : '#prowed3',
sortname : 'piezaId',
postData: {piezaId : lastsel},
mtype:"POST",
viewrecords : true,
sortorder : "desc",
onSelectRow : function(id) {
if (id && id !== lastsel) {
jQuery('#rowed3').jqGrid('restoreRow', lastsel);
jQuery('#rowed3').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl : CONTEXT_PATH+'/ajax/admin/savePieza.do?categoria=<s:property value="categoryId" />',
caption : "Piezas"
});
jQuery("#rowed3").jqGrid('navGrid', "#prowed3", {
edit : false,
add : false,
del : false
});
})
in your onSelectRow callback, you can modify the editUrl to be whatever you want, including passing in the ID you need.
$("#rowed3").jqGrid('setGridParam', {editurl:'whatever/url/you/need/with/the/id'});
jqGrid will add all the other nececessary params to that editurl for you.
You can use
hidden: true, editable: true, editrules: { edithidden: false }, hidedlg: true
in the definition of the piezaId (ID) column. The parameter hidedlg is currently not real needed, but can be useful if you decide the use other jqGrid features.
Passing values in the GET string worked for me.
editurl: '/ajax/update?line=1',