I had a bean object with me in the colmodel of jqgrid. the object hold two attributes name and id. I used a showLink formatter to form the hyperlink in one of the column. Now i have names the colum with object.name and on click i want to send the id in URL. Any inputs on how to work on this.
Any inputs could help me
code :
colModel :[
{name:'xxx', label:'xxx', width:200,align:'left'},
{name:'yyy', label:'yyy', width:110,align:'left'},
{
name:'zzz',
label:'zzz',
width:100,
sorttype:'int',
formatter:'currency',
formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$ "},
align:'center'
},
{name:'aaa', label:'aaa', width:80,align:'left'},
{name:'bbb', label:'bbb', width:100,align:'left'},
{
name:'strategies.name',
label:'strategies',
width:160,
align:'left',
formatter:'showlink',
formatoptions:{baseLinkUrl:'MyLink.html',addParam: '',showAction:'',idName:'id'}
}]
jQuery("#gridtableid").jqGrid('filterToolbar',{defaultSearch : "cn",stringResult: true,searchOnEnter : false});
Thanks in advance....
In JQgrid, you can call a javascript function and do any required formatting . You have the entire row data to play with it.
What needs to be done is call a function showlink in your case and remove formatoptions from that row. HAve a separate js function showlink as below and return the prepared link back to the grid.
function showLink(cellvalue, options, rowObject) {
var link = "'+ rowObject.columnName + "";
}
Related
I am using select2 with jqgrid.
something is not working correctly, these are the cases when I edit a row.
WITHOUT OPTGROUP
standard select (no select2) without optgroup: select will show the selected item (the one i’m editing)
select2 without optgroup: select will show the selected item (the one i’m editing)
WITH OPTGROUP
standard select (no select2) with optgroup: select will show the selected item (the one i’m editing)
select2 with optgroup: select will NOT show the selected item (the one i’m editing) but when I open it il will focus the selected item.
So as you see #2 works, my problem is #4. Is it a bug or am I missing something?
Thank you,
Lorenzo
Not sure what you search, but the problem when navigating row is described here
In your case I have tested and the following code work:
$('#grid'). jqGrid('navGrid', pager, {params},
...
{ // edit params
{ afterclickPgButtons : function(button, form, id ) {
$("#name").trigger('change.select2');
},...
}
);
Note the difference of the link above.
UPDATED
In order to solve the problem you will need to use setTimeout within dataInit function. Try with one of the following settings:
{
name: "name",
index: "name",
autosize: true,
searchoptions:{clearSearch:false},
width:200,
editable:true,
edittype: 'select',
editoptions: {
// Simulo la risposta di una chiamata
// Per funzionare deve esistere più sotto
// ajaxSelectOptions
dataUrl:'/echo/html/',
postData: {
html: serverResponce
},
//
dataInit: function(element) {
setTimeout(function(){
$(element).select2({
allowClear: false,
// Imposto il tema bootstrap
theme: "bootstrap4",
dropdownAutoWidth : true,
width: 'auto',
placeholder: 'Search...'
});
}, 500);
}
}
}
I expect to have a demo with optgroup
I am new to the JQGRID, I need to format jqgrid based on certain values, lets say if the "NAME" column contains value of "HEMA" and "RAJU" then their respective row should contain the value of n/a (meaning their gender, mobile, location , country should be n/a). I am stuck as I could not figure out how to approach this problem in jqgrid. Guidance will be highly appreciated. I have attached image for clear explanation.
I did some searching but could not find anything closest I could find was formatter but did not work.
var url = "test/gridresult";
$(function(){
("#result").jqGrid({
url:url,
datatype: "jsonstring",
multiselect:false,
colNames:['Id','NAME', 'GENDER', 'MOBILE','LOCATION','COUNTRY'],
colModel:[
{name:'id',index:'id', resizable:true},
{name:'name',index:'name', resizable:true},
{name:'mobile',index:'mobile', resizable:true},
{name:'country',index:'country', resizable:true},
],
rowNum:100,
pager: '#prowed1',
sortname: 'id',
loadonce: true,
sortorder: "desc",
jsonReader;{
repeatitem:false,
root:"rows",
page:"page",
records:"records",
cell:""
}
});
});
this seems working, I am getting name from loop but how do I set n/a in a row for that particular name
var rows = $("#result").jqGrid('getDataIDs');
for (var i = 0; i < rows.length; i++)
{
var status = $("#resultTable2").getCell(rows[i],"NAME");
alert("initial value "+status);
if(status == "HEMA")
{
//need to set value of n/a for row that belongs to HEMA
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
demo pic for my question
Guys I was able to fix it using formatter. Spent good amount of time and finally got it fixed.
function valFormat( cellvalue, options, rowObject ){
var val;
if(rowObject.name=='HEMA' ){
val='N/A';
}else{
val=cellvalue;
}
return val;
}
and in the jqgrid:
{name:'name',index:'name', resizable:true, formatter:valFormat},
In the inline editing, before the editing be made, it creates internally an array (savedRow) and fill it with the values of the fields that are being editable, so I can access this values.
I'd like to know if in the form editing it has something similar to this, because I need to access the values of the fields before the editing will be completed to do a validation before the fields are "saved" in the database.
Someone could help me?
EDITED :
I'm posting here a part of my code (the code of one field), and I'm trying to validate in both way (inline editing and form editing). For inline editing I'm validating using dataEvents and there I'm using savedRow to access the data that were not stored yet. But when I try to edit using form editing because of the the use of savedRow, it shows me an error: savedRow is not defined. In the case of this field the editrules fits with what I want to do, but I don't know if this will occurs in all of those fields.
{ name: 'ac_fd', index: 'ac_fd', width: 50, editable: true,
formatter: 'number', editrules: { number:true, required:true, minValue: 0.1,
maxValue: 1.0 }, formatoptions: { decimalPlaces: 1, decimalSeparator: '.'},
editoptions: {
dataEvents: [ {
type: 'blur', fn: function(e) {
var savedrow = $("#list").getGridParam('savedRow');
console.log($(this).val());
if($(this).val() != savedrow[0]['ac_fd']) {
var eid='#' + savedrow[0]['id'] + '_ac_fd';
var val_fd=$(this).val();
var fd_min=0.1;
var fd_max=1.0;
if( isNaN(val_fd) || val_fd > fd_max || val_fd < fd_min) {
setTimeout(function(){
$(eid).focus().select();
},600);
$(eid).qtip({
content: {
text: 'Fator de Demanda deve ser um <b>número</b>
entre <b>' + fd_min.toFixed(1) + '</b> e <b>'
+ fd_max.toFixed(1) + '</b>.',
title: {
text: 'Atenção:',
button: true
}
},
show: {
event: false,
ready: true,
effect: function() {
$(this).stop(0, 1).fadeIn(400);
},
delay: 0,
},
hide: {
event: false,
effect: function(api) {
$(this).stop(0, 1).fadeOut(900).queue(function() {
api.destroy();
});
},
},
style: {
classes: 'qtip-red qtip-rounded trif_tip_err',
tip: {
width: 10,
height:12
}
},
position: {
my: 'bottom left',
at: 'top center',
},
events: {
render: function(event, api) {
tip_timer.call(api.elements.tooltip, event);
}
}
});
}
}
}
} ]
}
},
So if dataEvents is common and used for the three forms of edit, where can I do this type of validation (using qtip too and I want that this validation be used in inline editing too)?
The reason why jqGrid save the editing row in interval savedRow parameter is because jqGrid modify the editing row in-place. Only because of that inline editing and cell editing use interval savedRow parameter. Form editing don't modifies the original row of grid till the editing will be finished. So no savedRow parameter are used by form editing.
If the form are closed or if the server response will contains some error HTTP code the new data entered by user will be not saved in the grid. So simple server side validation is typically enough. If you want implement additional client side validation you can use editrules feature. Custom validation is typically enough. It can help validate one field of the form. If you need compare multiple fields of form during validation (if the value of one field defines valid values of another field) then one uses beforeCheckValues callback additionally.
UPDATED: Inside of fn event handler you can test whether it will be called inside of form editing or not. There are many ways to do this. For example you can test $(e.target).closest(".FormGrid").length > 0. If it's true then the event is inside of form. Additionally it's important to understand that the current editing row is not changed till successful saving on the server. So you can use any time getGridParam with "selrow" option to get the id of editing row and you can use getRowData or getCell to get the data from the grid before modification started (the same as savedrow).
I have a grid where I put a custom button in the navgrid for inserting totally different data in another table so I used editGridRow("new",…) where in the php url I just post data to a different table. Actually I am stuck with the issue if I submit the form, even if I settled reloadAfterSubmit:false, it add a new empty row in the grid…
You can see the piece of code here:
jQuery("#"+child_table_id).navButtonAdd("#"+pager_id,
{
caption:"Insert",buttonicon:"ui-icon-arrow-1-se",
onClickButton:function(){
var rows = jQuery("#"+child_table_id).getRowData();
if ( rows.length != 0 ) {
jQuery("#"+child_table_id).editGridRow("new",{height:140,width:420,url:"http://.../edit_datatable.php?table_name=mytable&fact=insert&q=1&flag=yes&ref_id="+id_row,
reloadAfterSubmit:false,
recreateForm:true,
closeOnEscape:true,
closeAfterAdd:true,
addCaption:'Insert',
savekey: [true,13],
bSubmit:'Save',
afterSubmit:function(response, postdata){ alert('inserting to a total different table...'); return {0:true} }
});
}
},
position:"last",
title:"Insert new step...",
cursor:"pointer"
});
I tried even to add:
onClickButton:function(){ $("#"+child_table_id).setGridParam({ datatype: 'local' }); }
afterSubmit:function(response, postdata){ return {0:true} },
onclickSubmit : function(params, posdata) {return {0:true} },
afterComplete:function(response, postdata, formid) { $("#"+child_table_id).setGridParam({ datatype: 'json' }); }
but it added anyway a row in the grid…
So how I can prevent jqGrid to add a new empty grid and refreshing the grid?…
You wrote about "inserting totally different data in another table", but you add button to the navigator bar of the grid "#"+child_table_id and your code inside of onClickButton callback adds new row to the same grid:
jQuery("#"+child_table_id).navButtonAdd("#"+pager_id, { ...
onClickButton:function(){
...
jQuery("#"+child_table_id).editGridRow("new", ...
}
});
If you really want to add new row to another grid you should use id of another in the editGridRow (like jQuery("#"+another_table_id).editGridRow("new",...).
I am quite new to jquery and jqgrid. I use ASP.NET WebForms. I am able to get some data prom server and show it in grid. I use PageMethods to get data from server. Usually my code is
function CreateGrid(){
$("#sestGrid").jqGrid({
datatype: GetData,
//toolbar: [true, "top"],
colNames: ['Name', 'Age'],
colModel: [
{ name: 'Name', index: 'Name', width: 170, align: 'left',
sortable: false, key: true },
{ name: 'Age', index: 'Age', width: 40, align: 'center',
sortable: false, editable: true },
],
ondblClickRow: function () {
var row_id = $("#sestGrid").getGridParam('selrow');
$('#sestGrid').editRow(row_id, true);
}
});
}
function GetData() {
PageMethods.GetSestevalniStevecData(GotData);
}
function GotData (data) {
$("#sestGrid").clearGridData(false);
for (var j = 0; j <= data.length; j++)
$("#sestGrid").jqGrid('addRowData', j + 1, data[j]);
}
So, now I would like to edit some data and post it to server. How can I do that using PageMethods? Should I use any other approach?
And one more thing. I checked the demos http://trirand.com/blog/jqgrid/jqgrid.html and in all edit examples you are able to edit only one row and then you have to save changes… Is it possible to edit more than one row and save all changes in one step?
Thanks all.
jqGrid is designed to be used together with ajax services. So if the user change the data of some row then the changes will be send to the server: to the URL which you configure through jqGrid parameter editurl. So the easiest way to implement row editing will be to include an ASMX web-service or a WCF service in you web site. It is not important whether you use ASP.NET WebForms, ASP.NET MVC or just pure HTML for your pages. So just choose the technology which you prefer and add the corresponding page to your site.
The ASMX or WCF should has a method with the signature like
public string MyDataEdit (string Age, string oper, string id)
(see this old answer for more information). The method should return the id of the new added item (the Name in your case) in case of Add operation.
One more small remark. You can change the definition of the ondblClickRow function from function() to function(row_id) and remove the line used getGridParam('selrow').
I used your example and changed it a bit:
ondblClickRow: function (rowid) {
if (rowid && rowid != lastsel) {
changedRows.push(rowid); //keep row id
jQuery('#jqgrid').editRow(rowid, true);
}
}
Under the save button click event:
$.each(changedRows, function () {
var row = $("#jqgrid").getRowData(this);
var Id = row['ID'];
var price = $(row['Price']).val(); //this is an input type
});
HTH someone :)