I am using jqgrid on my form and I am creating the column delete and want to send the object in javascript function, the code is following
{
name: "action",
align: "center",
sortable: false,
title: false,
fixed: true,
search: false,
formatter: function (cellValue, options, rowObject) {
debugger;
var markup = "<a title=\"%ToolTip%\" href=%Href%;>%Text%</a>";
var replacements = {
"%Text%": "<i class='fa fa-trash' style='color:black'></i>",
"%ToolTip%": UserRoles.messages && UserRoles.messages.ClickHereToDelete
? UserRoles.messages.ClickHereToDelete : "",
"%Href%": "javascript:UserRoles.deleteUserRoles(" + rowObject + ")"
};
markup = markup.replace(/%\w+%/g, function (all) {
return replacements[all];
});
return markup;
}
}
I want to send the object in the function deleteUserRole by this line
"%Href%": "javascript:UserRoles.deleteUserRoles(" + rowObject + ")"
but it is giving me output
<a title="" href="javascript:UserRoles.deleteUserRoles([object" object]);=""><i class="fa fa-trash" style="color:black"></i></a>
can any one help me
Mostly one don't need to create such custom formatter and one can use just formatter: "action" with the corresponding parameters.
It's important to understand that the goal of formatter is providing the HTML fragment which will be placed in cells (in <td>) of the column. The rowObject are typically the input data of the row which format depend on many factors.
What you probably need is to use options.rowId as parameter of UserRoles.deleteUserRoles function. Inside of the function you can use getRowData to get the data based on the rowid.
I would recommend you to read the answer and all old answer referenced i the answer. It shows that one can just use place "<a href='#'><i class='fa fa-trash' style='color:black'></i></a>" by custom formatter **without using any javascript:UserRoles.deleteUserRoles(...) fragment. Instead of that one can implement beforeSelectRow callback which tests in which column the user clicked. If the user clicked on the <a> of "action" column then one can do some custom action. The way is more effective because one don't need bind global function to every <a> element of the column. One can simplify the content of the column by removing <a> and holding only <i class='fa fa-trash' style='color:black'></i> inside of the column. The code of beforeSelectRow callback will be the same.
Related
I am looking if there is any I can add a print button to tabulator row and when it is clicked it prints that particular row?
http://tabulator.info/docs/4.3/print
thanks
There is no built in functionality for this, but you could easily put something together to achieve this. This examples assumes that each row has a unique id field.
You could use a custom formatter to create a Button Column, then use that to filter the table to just that row, then print the table, then clear the filter:
//custom formatter definition
var printIcon = function(cell, formatterParams, onRendered){ //plain text value
return "<i class='fa fa-print'></i>";
};
//column definition in the columns array
{formatter:printIcon, width:40, align:"center", cellClick:function(e, cell){
//filter table to just this row
table.Filter(function(data){
return data.id == cell.getData().id;
});
//print the table
table.print();
//clear the filter
table.clearFilter();
}},
I'm working on the Spring-Mvc project.
I'm currently using JQgrid to draw a list. My problem is that I can't use variables as a function
This is where I'm having trouble.
{name : 'product_id',
index : 'pid',
align : 'center',
sortable : false,
formatter : function(cellValue, options, rowObject) {
return '<a href="#" onclick="onCellSelect(\''+ cellValue +'\','+ rowObject +');" >'+ cellValue +' </a>';
}
},
The rowObject is not available because it is JSONdata.
this is error
Uncaught SyntaxError: Unexpected identifier
onCellSelect([object Object]) // rowobject
How can you solve this problem?
I've solved this problem now, but it's not a fundamental solution.
It's just a means of getting data. If there is no solution to this problem, I will present it as a solution.
My solution is to bring in one unique value and get it through a repetitive function.
return '<a href="#" onclick="onCellSelect(\''+ cellValue +'\','+ rowObject.seq_no +');" >'+ cellValue +' </a>';
...
function onCellSelect(cellValue, seq_no) {
var selarrrow = jQuery("#chargeGoodsList").jqGrid("getDataIDs");
$(selarrrow).each(function(i){
if (seq_no == $('#chargeGoodsList').getCell(selarrrow[i], 'seq_no')) {
title = $('#chargeGoodsList').getCell(selarrrow[i], "title")
explanation = $('#chargeGoodsList').getCell(selarrrow[i], "explanation")
...
I believe there is a better solution than this. If there is a good solution, please answer.
I have an html element which is created in JavaScript.
This element should also save one object as a data- attribute and then get converted to pure html.
My problem is that the data- attribute vanishes after accessing the prop("outerHTML").
Here is what I mean:
let obj = $("<i>TEST</i>");
obj.data("key", "value");
let html = obj.prop("outerHTML");
console.log("DATA: " + obj.data("key")); //gives value
console.log("HTML: " + html); //gives <i>TEST</i>
I also tried to directly enter the data- attribute, but the quotes a making trouble.
I tried:
let dataJSON = JSON.stringify(data);
let obj = $('<i data-test=' + dataJSON + '</i>'
My goal is to generate a dataTable cell which needs to contain some data to handle clicks on it. The whole thing looks like this:
columns: [
data: "notice_id", render: function (data, type, row) {
let html = $('<i class="edit-button fas fa-pencil-alt"></i>');
html.data("notice", row);
return html.prop("outerHTML");
}]
edit:
I should have written that I know, that jQuery doesn't really alter the data- attribute. I somehow hoped that it would add it anyways when I access the outer html.
However, the linked question doesn't really give an answer on how to make it better (except writing it directly which causes problems with other than simple string data).
You can use the createdCell callback if you want more post processing, and enrich the <i> with data() in there:
columns: [{
data: "notice_id",
render: function(data, type, row) {
//no need for constructing jQuery instances here
return '<i class="edit-button fas fa-pencil-alt"></i>'
},
createdCell: function(td, cellData, rowData, row, col) {
$('i', td).data('notice', rowData)
}
}]
I am having 2 grids on my page with name grid1 and grid2.
Now i want to pass grid name as hardcoded to my 1 common javascript function for deleting records from grid like below:
for Grid 1 delete function:
field: "Id",
template:<a title="delete" onclick="javascript:return Delete(<#=Id#>,<#=grid1#>);" > //showing error in console grid1 is not defined
for Grid 2 delete function:
field: "Id",
template:<a title="delete" onclick="javascript:return Delete(<#=Id#>,<#=grid2#>);" > //showing error in console grid2 is not defined.
My javascript function:
function Delete(id, gridname) {
console.log(id,gridname)
}
Please try with the below code snippet. If you write any text between # (hash) the grid try to find that field in your datasource that's why you got the undefined error.
JS Function:
function Delete(id, gridname) {
var grid = $("#" + gridname).data("kendoGrid");
console.log(id, gridname)
}
for Grid 1 delete function:
field: "Id",
template: "<a title='delete' onclick='javascript:return Delete(\"#:Id#\",\"grid1\");'></a>",
for Grid 2 delete function:
field: "Id",
template: "<a title='delete' onclick='javascript:return Delete(\"#:Id#\",\"grid2\");'></a>",
Let me know if any concern.
I need to make all cells of a column, in my JQgrid, a link, which calls a javascript function with the cell value, to be passed for some query on the server side. I have seen html link column in jqGrid
but it is not working out. here is what I have,
colModel:[
{name:'name',width:300,formatter:link}
]
and the link function is
function link(cellvalue, options, rowObject) {
alert('<a href="javascript:logForProv(\''+cellvalue+'\',\''+$('#datepicker1').val()+'\',\''+$('#datepicker2').val()+'\');">');
return "<a href='javascript:logForProv(\''+cellvalue+'\',\''+$('#datepicker1').val()+'\',\''+$('#datepicker2').val()+'\');'>";
}
Doing this I dont get any data in the column, I also tried using the predefined formatters link and showlink, but they are appending href and id to the URL which is messing up.
Please Help.
When click on providerId edit column you will redirect to edit page of editProvider.
mentionformatter: editLink at providerId colModel for call editLink function. In this way creating link in jqGrid.
Code:
$(document).ready(function(){
//jqGrid
$("#providerList").jqGrid({
url:'<%=request.getContextPath() %>/Admin/getProvidersList',
datatype: "json",
colNames:['Id','Edit','Provider Name'],
colModel:[
{name:'providerId',search:false,index:'providerId',hidden:true},
{name:'providerId',search:false,index:'providerId', width:30,sortable: false, formatter: editLink},
{name:'providerName',index:'providerName', width:200},
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'providerName',
viewrecords: true,
sortorder: "desc",
});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
$('#load_providerList').width("130");
$("#providerList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
$(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
{
return "<a href='<%=request.getContextPath()%>/Admin/editProvider/" + rowdata.providerId + "' class='ui-icon ui-icon-pencil' ></a>";
}
The function logForProv have to be defined on global (top) level.
I recommend you to try better formatter: "dynamicLink" instead, which I described here and which you can download from here (jQuery.jqGrid.dynamicLink.js file). It allows to construct link in jqGrid in very simple and flexible way. You can define onClick callback inside of formatoptions (see the demo). The callback provide rowId, iRow, iCol, cellValue and e as parameters.