Develop Reference

jqGrid Inline edit: Append custom element next to dropdown

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.

jqgrid pass extra parameters with inline delete using delData

I have a jqgrid with an inline delete button. This button sends a post to a php file which would, in turn, go delete the record from the database. Unfortunately, I cannot seem to figure out how to send additional data with the post call. I don't want to rely on the row number. Rather, I wish to add the value from a column (childId) to the POST.
Here is my table:
jQuery("#team").jqGrid({
url: 'TeamRetrieval.php?userId='+userId,
datatype: "json",
colNames: ['User Id', 'Email', 'Created', 'Delete'],
colModel: [
{name: 'childId', index: 'childId', align: 'center', sorttype: 'string'},
{name: 'user_email', index: 'user_email', align: 'center', sorttype: 'string'},
{name: 'user_registered', index: 'user_registered', align: 'center', sorttype: 'string'},
{ name: 'delete', formatter: 'actions', width: 40, align:'center', sortable: false,
formatoptions:{
keys: true,
editbutton: false,
editformbutton: false,
delbutton: true,
delOptions: { url: 'TeamRetrieval.php?userId='+userId}
}
}
],
mtype: "GET",
sortorder: 'asc',
sortname: 'childId',
caption: "Existing Team Members",
});
This seems to me like it should be pretty straightforward. I did find an option delData in the documentation here:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing&s[]=deldata
Another SO post showed Oleg suggesting delData can be used in the format options on an inline delete button, thus allowing one to pass additional parameters via the POST.
http://stackoverflow.com/questions/16798420/inline-delete-deloptions-how-to-add-additional-data-to-restful-post
However, there wasn't an example of how one would go about doing this. I'm pretty new to javascript (I come from java/c# land) and it isn't clear to me how to reference the column value from an array inside delData.
Could I please ask someone to explain how one would pass the value of the 'childId' column along in the POST which is made when the inline delete button is clicked?

Tony over at the jqgrid help forms was able to answer this. It is very easy to achieve what I describe, provided you know how to do it. =)
In order to pass parameters with jqgrid's default delete functionality, one must identify the fields they wish to pass as keys. For example, note the key:true below:
{name: 'childId', index: 'childId', align: 'center', sorttype: 'string', key:true}

Refresh Kendo UI grid data by reading a variable

Grid reads data from a javascript variable.
$("#grid").kendoGrid({
dataSource: {
type: "text",
data: jsvar,
schema: {
model: {
fields: {
id: {type: "string", editable: false},
name: {type: "string"}
}
}
},
pageSize: 20
},
pageable: {
input: true,
numeric: true
},
//toolbar: [{text: "Add"}],
columns: [
{command: [{text: "Edit", click: showDetailse}, {text: "View", click: viewoneitm}], title: " ", width: "170px"},
]
});
Then I change value of this variable jsvar with ajax and wait for ajax response and after that when I refresh grid with
jQuery("#grid").data("kendoGrid").dataSource.read();
jQuery("#grid").data("kendoGrid").refresh();
The grid is not repopulated with new data and old data stays in grid. Please tell me how to refresh grid data.
This worked fine and grid used to refresh perfectly untill I proviced static data, but after I used ajax and then 'refresh' it failed to update

If jsvar contains an array, the Kendo data source will create a model for each array item, so if you modify the original array, it won't change the DataSource. If you want to change the data, you should do it like this:
grid.dataSource.data(jsvar);

Jqgrid pager not working with "local" dataType

Does Jqgrid allow us to add pager which we are using dataType local and don't want the whole data to be loaded at once. I am trying to do the same without success. It only shows the first page and show Page 1 Of 1 on the pager when there are many more records to be displayed.

Probably you fill the grid contain in the wrong way. Look at the example to see how you can use data parameter of jqGrid.

I have this same issue. I have a "local" jqgrid setup and it's showing my data but the pager values aren't completely accurate. Until I figured out that I needed to muck with the 'localReader' property. On the jqgrid wiki I saw that the jsonReader can have functions that define how to get the page, records, etc. It also states that the localReader can do whatever the jsonReader does so I gave it shot. Here's what I am doing.
var grid = $('#table').jqGrid({
datatype: 'local',
altRows: true,
colModel: [
{name: '0', label: "Name"},
{name: '1', label: "Color"},
],
pager: "#pager",
rowNum: 15,
sortname: '0',
viewrecords: true,
gridview: true,
height: '100%',
autowidth: '100%'
});
var reader = {
root: function(obj) { return results.rows; },
page: function(obj) { return results.page; },
total: function(obj) { return results.total; },
records: function(obj) { return results.records; },
grid.setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
My "results" is an object like this:
{page: "1", total: "70", records: "1045", rows:[.....]}
This seems to work as desired.

Jqgrid and Zend framework trouble

I have a list of products on my site. I draw it with jqGrid. Also I have a form, to create new product, or update existing one. Is there any way to set in jqGrid, that when I press 'edit' button in grid, it redirects me to page like
'mysite/product/edit/id/{id}'
Here is my grid script:
$(document).ready(function() {
$("#list").jqGrid({
url:'product/getjson',
datatype: "json",
colNames:['id','Name', 'description', 'Publication date','Picture'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:90},
{name:'description',index:'description', width:200},
{name:'pubDate',index:'pubDate', width:200, align:"right"},
{name:'picPath',index:'picPath', width:200, align:"right"},
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc", caption: 'Products'});
$("#list").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});
})

You can change url with respect of onclickSubmit function (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow):
$("#list").jqGrid({
url:'product/getjson',
// ...
});
$("#list").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true},
{ onclickSubmit: function(rp_ge, postdata) {
rp_ge.url = 'mysite/product/edit/id/' + postdata.list_id;
}
});

Try to add editurl field in your config:
$("#list").jqGrid({
editurl:'mysite/product/edit/'
});
id will be passed in row data