We Keep Coding

jqGrid - how to delete row from local data?

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".

Implementing a Dependent jqGrid

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.

Extjs Scroll to position inside tabPanel

I have a window, containing a tabPanel, this tabPanel has 4 tabs.
I wanted to write down something like user manual so I created several panels as blocks, each panel contains some text and pics.
from another button, I want to scroll to a particular postiton in that tab. How can I do it? here is my structure, and let's say I want the button to open the first tab, scrolling to the third panel (id:here).
tabPanel:
var tabs = Ext.createWidget('tabpanel', {
id: 'myTabs',
header: false,
activeTab: 3,
closable: true,
defaults:{ autoScroll:true },
items: [
{
title: 'first',
itemId: 'firstTab',
items: [
{
xtype: 'panel',
html: text39,
cls: 'layout_text1'
},
{
xtype: 'panel',
html: text40,
cls:'layout_subtitle'
},{
xtype: 'panel',
id: 'here',
html: text41,
cls: 'layout_text2'
}]
});
window:
var UMwindow = new Ext.Window({
id: 'myWindow',
name: 'userManual',
closable: true,
floating: true,
width: 900,
height: 600,
items : myTabs,
}).show();
I managed to open the window then activating the first tab using: Ext.getCmp('tabs').setActiveTab('firstTab'); but then I couldn't figure out how to scroll down to the position i need "third panel in my example". do I have to add property to the panel such as position or something?

I would gladly help but I'm unable to get a working jsfiddle demo out of this. I imagine that what you are trying to do requires firing setActiveTab for the tab panel then jumping to the item you would like to show, using that item's offset.

jQgrid : Disable inline Save and Esc Handler while editing grid Row?

I am developing a asp.net MVC 4 project which uses jQgrid for generating table data.In my generated grid i am providing an inline edit option for particular columns in a row.
My problem is like while editing a particular row if i press Enter or Esc key my selected row is going out of edit mode.
I want to disable those events Enter and Esc .
I googled about this problem and i get some interesting posts How to disable Save Handler on Jqgrid while doing editing
Here in the above reference post i can see that some of the lines are commented out from Jqgrid.src.js file which i dont think as a best solution.
Is there any other method so that i can disable both Enter and Esc Event in Jqgrid while doing inline editing.
Javascript COde
jQuery("#Grid").jqGrid({
url: baseUrl + '/api/Controller/method',
datatype: "json",
mtype: "POST",
colNames: ['Col1', 'Col2', 'Col3', 'Col4', 'Col5'],
colModel: [
{ name: 'col1', index: 'col1', align: 'center', editable: true, key:true },
{ name: 'col2', index: 'col2', align: 'center' },
{ name: 'col3', index: 'col3', align: 'center', editable: true, key:true },
{ name: 'col4', index: 'col4', align: 'center' },
{ name: 'col5', index: 'col5', align: 'center', editable: true, key:true }
],
jsonReader: {
root: 'data',
id: 'col2',
repeatitems: false
},
pager: $('#Pager'),
rowNum: 10,
rowList: [10, 25, 50, 100],
autowidth: true,
shrinkToFit: false,
viewrecords: true,
loadonce: true,
autoencode: true,
multiselect: true,
height: '100%',
width: '100%',
caption: "Record"
});
Sample Grid Structure
Note: Grid Image shown is not the actual grid generated with the above code.
Here in the above grid there are some columns are left editable.My scenario is like i want to put data in all editable column in each row , so that i can update the grid data to server by a button click placed below the grid(Button not shown in the above image).Here i am not using editUrl property of grid.
Currently if i edit first row and accidently if i press enter or Esc key the selected row will become non editable.I want to keep all editable cells in a row as editable untill i press the Submit button placed below the Grid.
My jQgrid Version is 4.5.4
Any help is appreciated.

It's difficult to answer on the question which don't contains neither JavaScript code nor exact references on jqGrid version which you use. You don't describe in which form you use inline editing in the grid.
The usage of Esc and Enter during inline editing can be managed by keys: true option. The exact syntax of the usage of keys option depend on how you use inline editing. For example you can call editRow directly or use some other methods mile inlineNav or the formatter: "actions" which calls editRow for you. The default value of keys option is already false, so you change the value somewhere in your code to true.

File upload hiding text field in extJS

I'm using extJS4 for my GUI and thus also to display the file upload dialog.
In the end I want to only have a button which when I click it it displays the file upload dialog, and when I select something there it automatically uploads the file.
For the automatic "submit" I know that I must write a handler for the onChange event of the file upload dialog. Thus this is not the problem. But is there a way to disable the textfield without having to resort to CSS?
(when I select a file to upload the name is written into the textfield....and I want to either eliminate the textfield or at least make it invisible).

The property you search is buttonOnly: true
Here you find the documentation
Just add it to the example like this:
Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
buttonOnly: true,
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
}],
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});