Related
I am really new to the jqGrid. I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. I tried to resolve my problem using various answers from here like:
Adding new row to jqGrid using modal form on client only
There I have found the example made by Oleg for the 4.7 version of jqGrid and reproduced the same code for my purpose. The result was that I am able to delete row which I added after the grid initialisation but I am unable to delete any other row which was loaded from the array.
Another interesting thing is that I am able to modify the rows loaded from array, the only thing I cannot do with the grid is to delete rows loaded from array. I appreciate any advices.
Here is part of the code with jqGrid:
var delSettings = {
onclickSubmit: function () {
var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;
if (p.lastpage > 1) {// on the multipage grid reload the grid
if (p.reccount === 1 && newPage === p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
setTimeout(function () {
$this.trigger("reloadGrid", [{page: newPage}]);
}, 50);
}
return true;
}
};
$("#jqGrid").jqGrid({
datatype: "local",
data: results.data,
editurl: "clientArray",
colModel: [
{
label: 'Id',
name: 'Id',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Company',
name: 'Company',
width: 90,
editoptions: {size: 40},
editable: true,
sorttype: 'string'
},
{
label: 'Address',
name: 'Address',
width: 100,
editoptions: {size: 40},
editable: true
},
{
label: 'City',
name: 'City',
width: 80,
editoptions: {size: 40},
editable: true
}
],
height: '100%',
viewrecords: true,
caption: "Baza klientów Klimatest",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
cmTemplate: {editable: true, searchoptions: {clearSearch: true }},
rowNum: 5,
rowList: [5, 10, 20],
});
// toolbar searching
$('#jqGrid').jqGrid('filterToolbar', { defaultSearch: 'cn'});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: true, refresh: true, view: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
},
// options for the View Dialog
{
});
// add first custom button
$('#jqGrid').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-calculator",
title: "Column chooser",
caption: "Columns",
position: "last",
onClickButton: function() {
// call the column chooser method
jQuery("#jqGrid").jqGrid('columnChooser');
}
});
EDIT
Data source is the result of parsed CSV file via Papaparse.js plugin (array of objects), which looks like this:
Id: "100,1"
Address: "Strefowa 8"
Company: "DSSE Sp. z o.o."
City: "Warsaw"
I edited the code just like Oleg suggested and I'm still able to delete only records which are added via interface of jqGrid.
I don't know if it may help, but when I click delete icon and confirm that I want to delete selected row, that row is no longer highlighted, but still visible. Thanks for feedback.
You have clear error in your code near // options for the View Dialog block. The View option should be included after delete and search options (see the documentation). So your current code don't use delSettings options.
I recommend you additionally to include test data in your next questions, because some problems exist only with some specific format of input data.
UPDATED: The problem is in the data which you use. The value for Id which you use contains comma ("100,1"). It's not allowed for jqGrid. First of all id in HTML should not use characters which have special meaning in CSS. The second problem: delGridRow method uses commas in separator to delete multiple rows at once. So the usage of id="100,1" will follows to attempt to delete tow rows: one row with id=100 and the second one with the id=1. By the way I'm developing now jqGrid in my fork of GitHub. I fixed many restrictions with the usage of special characters in ids. So you will be do able to use id="100,1" and successfully delete the rows if you would use jqGrid from my fork.
I recommend you to use underscore if you need to construct id which consist from multiple numbers: Id: "100_1" instead of Id: "100,1".
I have created a jqGrid, and in that I have a column which is a hyperlink, on click, data is fetched and a new jqGrid is created below the parent Grid.
My problem is, that when I click on any link of the parent grid, the child Grid is created successfully. But after that if I click any other link, the child grid shows the same data.
Issue is that the grid is not getting refreshed with the new data.
I have also tried jQuery('grid1').trigger('reloadGrid')
But this also doesn't change anything.
EDIT
*Below is the code which gets called onClick of the element in the Parent Grid:*
var dynaData2 = getDataForWelfareStatusDetails(memberId);
jQuery('#grid1').jqGrid({
datatype: 'local',
data: dynaData2,
colNames:['Effective Date ','Welfare Status ', 'State', 'IV-A/IV-E Case ID', 'Receipt No.','Case Type'],
colMandReq:['-1','-1','-1','-1'],
colModel: [
{ name: 'effectiveDate',index:'effectiveDate', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false},
{ name: 'welfareStatus', index:'welfareStatus', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false},
{ name: 'stateCode', index:'stateCode', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false},
{ name: 'refCaseId', index:'refCaseId', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false,formatter: returnCaseLink},
{ name: 'receiptNum', index:'receiptNum', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false},
{ name: 'caseType', index:'caseType', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false}
],
loadComplete: function()
{
jQuery('#grid1').trigger('reloadGrid');
},
pager: '#pager1',
gridview: true,
rownumbers: false,
autoencode: true,
shrinkToFit: true,
autowidth: true,
sortable: false,
height: '100%',
rowNum: 100,
caption:""
});
Any input is welcome and appreciated
Try this,
jQuery("#grid1")
.jqGrid('setGridParam',
{
datatype: 'local',
data:dynaData2
})
.trigger("reloadGrid");
or you could try with,
jQuery('#grid1').jqGrid("GridUnload");
SEE THIS DOCUMENTATION
First of all about your main problem: Why the grid is not getting refreshed with the new data? The reason is: you try to create the grid #grid1 multiple times. It's wrong. During the first call of jQuery('#grid1').jqGrid({...}); the initial empty <table id="grid1"></table> will be converted to relatively complex structure of divs and tables. The second attempt to create grid from the structure will be just ignored and you don't see refreshing of the grid.
You can fix the code in many ways. The smallest code, but not the best one, you will get if you includes jQuery('#grid1').jqGrid("GridUnload");.
In any way you should remove jQuery('#grid1').trigger('reloadGrid'); from loadComplete of jQuery('#grid1'). The callback loadComplete will be processed during loading or reloading of the grid. So you can have recursion.
Another possibility will be in separation of initial creating of the grid and the later refreshing of the grid content. With the code jQuery('#grid1').jqGrid({...}); you can create the grid. To refresh the data you need 1) delete old data of the grid 2) set new data with respect of setGridParam for example and 3) reload the grid with respect of trigger("reloadGrid").
You don't posted onClick part. I would recommend you to use the approach described in the answer (or this one) which uses beforeSelectRow callback instead of setting multiple click handles.
I'm sure my questions have been addressed somewhere, but I've researched for a while now and can't seem to find the answers I'm looking for.
When using the inlineNav feature, is there a "delete" option? I haven't found any, so in order to use it, I have to create the grid using both the navGrid and inlineNav features, like this:
$("#attributeEditList").jqGrid( {
datatype: "local",
height: 150,
colNames: ['rowid', 'Vendor', 'Category', 'Key', 'Value', 'Flags', 'Status'],
colModel: [
{name: 'rowid', index: 'rowid', hidden: true, key: true},
{name: 'vendorCode', index: 'vendorCode', hidden: true},
{name: 'category', index: 'category', width: 120, editable: true, editrules:{required: true} },
{name: 'key', index: 'key', width: 120, editable: true, editrules:{required: true} },
{name: 'value', index: 'value', width: 200, editable: true, editrules:{required: true} },
{name: 'flags', index: 'flags', width: 80, editable: true, editrules:{required: true, integer: true} },
{name: 'status', index: 'status', hidden: true }
],
sortname: "category",
viewrecords: true,
caption: "Attributes",
rowNum: 20000,
pager: '#attributeEditPager',
editurl: "vendor/ajax/dummy.do",
data: vendor.attributes,
jsonReader : { repeatitems: false }
});
$("#attributeEditList").jqGrid( "navGrid", '#attributeEditPager', {
edit: false,
add: false,
del: true,
search: false,
refresh: false,
delfunc: deleteAttribute
}
);
$("#attributeEditList").jqGrid( "inlineNav", '#attributeEditPager' );
Is there any way to make the edits in the grid strictly client-side? I want my user to be able to make several edits (add/edit/delete) then post all of the changes in the grid, plus some other form changes outside of the grid, back to the server atomically. As far as I can tell, the editurl parameter is required, and must actually be a valid url, for editing to work.
Last, and I think this is the biggest issue I'm having, is when using the inlineNav feature. First, I click the "Add (+)" button to add a row, add the data, then click the "save" button. Then, if I click the "Add" button again, a new row is added, but the "Add" and "Edit" buttons remain active, while the "Save" and "Cancel" buttons are still disabled.
If you have any advice on these issues, please let me know.
Look at the demo from the old answer where I demonstrate how one can implement local form editing in jqGrid. You first question was about the "Delete" added by navGrid. So you can use the trick with setting processing: true which I suggested to make "Delete" button working locally. You should additionally use editurl: 'clientArray'. I posted my suggestion to trirand about one year ago (see here), but the local form editing is still not the part of jqGrid.
You are right that there are many situations in which inlineNav work buggy and if the user clicks on the buttons in a little other order one have wrong activated or wrong deactivated buttons. You have to activate/deactivate the buttons manually using $("#attributeEditList_ilsave").removeClass('ui-state-disabled'); or $("#attributeEditList_ilsave").addClass('ui-state-disabled');. The ids of the buttons will be constructed from the gridid and the postfix "_iladd", "_iledit", "_ilsave", "_ilcancel". I recommend you include such code in the onSelectRow or beforeSelectRow till the bugs will be not fixed in the main code of jqGrid.
Hi I am trying to get showlink formatter working by following this document from trirand.
What I want to achieve is a hyperlink I can click for a edit view to update/edit records. But for some reason, the column are empty where I want show a hyperlink.
Here is my code snippets, and link is the last column:
<script type="text/javascript">
$(document).ready(function () {
$("#grid_products").jqGrid({
jsonReader: {
repeatitems: false,
id: 'Guid'
},
url: '/Product/jqgridJSON/',
datatype: 'json',
mtype: 'GET',
colNames: ['ProductCode', 'ProductDescription', 'DefaultSellPrice', 'LastCost', 'Edit'],
colModel: [
{ name: 'ProductCode', index: 'Productcode' },
{ name: 'ProductDescription', index: 'ProductDescription' },
{ name: 'DefaultSellPrice', formatter: 'currency', index: 'DefaultSellPrice' },
{ name: 'LastCost', formatter: 'currency', index: 'LastCost' },
{ name: 'MyLink',
edittype: 'select',
formatter: 'showlink',
formatoptions: { baseLinkUrl: '/Product/Update/', idName: 'Guid' }
},
],
pager: '#pager',
rowNum: 10,
rowList: [20, 50, 100, 200],
sortname: 'ProductCode',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
caption: 'Products'
}).navGrid('#pager', { edit: true, add: false, del: false });
});
</script>
#{
ViewBag.Title = "JSONGrid";
}
<h2>JSONGrid</h2>
<table id="grid_products"></table>
<div id="pager"></div>
The formatter from jqGrid is working for currency, but for some reason, it just didn't shown for hyperlink.
Update:
Got it working by using custom formatter.
...
{ name: 'MyLink',
formatter: myLinkFormatter,
},
...
function myLinkFormatter (cellvalue, options, rowObjcet) {
return 'Edit this product';
}
I suppose that you fill no value in JSON input for the 'MyLink' column. Because of this the hyperlink is empty. If you want to place the link with any fixed text in column I would recommend you to use custom formatter. See the recent answer for an example.
One more possible solution way is to use formatter: 'showlink' and include jsonmap: function() { return "Edit"; } to the 'MyLink' column definition. In the case you will not need to include in the JSON data "MyLink":"Edit" for every row of data. It's important to understand that the trick works only in case of usage jsonReader: {repeatitems: false} (so it should work for your grid).
If you have another problem you should include in the text of your question the JSON data which you use.
Some small remarks to your current code:
the usage of edittype: 'select' together with formatter: 'showlink' has no sense. You should remove it if you will do use formatter: 'showlink'.
the parameter height: 'atuo' should be height: 'auto'.
pager: $('#pager') is better to replace to pager: '#pager'. If you use pager: $('#pager'), the jqGrid will replace it internally to pager: '#pager' and the object $('#pager') will be discarded.
If you use jsonReader: { id: 'Guid'} and you don't plan to show the guids to the user you can remove the 'Guid' column from the grid. The id (the Guid in your case) will be used to assign ids of <tr> elements (table rows) of the grid. So you don't need to hold the same information twice
I'm looking for way how to on button click reset all fields in EditorGridPanel in one column
There is a code of column
....
{
id: 'field_id',
header: "Amount [ton/ha]",
sortable: true,
dataIndex: 'amountId',
width: 150,
summaryType: 'sum',
summaryRenderer: function(v){
return v +' [ton/ha]';
},
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: 'text-align:left'
}),
groupName: 'Amount'
},
.....
So far this is going to be editable, what you can see from the code and it works perfect, just want to add possibility to reset all values, is it posible at all?
Store and even Record have methods for rejecting and commiting changes. I haven't used them but I believe it would be like this:
Ext.getCmp('myGrid').getStore().getAt(0).rejectChanges();
and for all rows in the store:
Ext.getCmp('myGrid').getStore().rejectChanges();