My problem now is trying to send the ID (editable: false) of a row when editing that row.
For example, i have a grid with columns userid(editable: false), username(editable: true), firstname(editable: true), lastname(editable: true). When editing the row the grid is only sending the parameters username, firstname and lastname. In the server side i need the userid to know to which user i've tu apply those new values.
the editUrl looks like:
editurl : CONTEXT_PATH+'/ajax/admin/savePart.do?category=1',
Thanks
This is the full code:
$.jgrid.useJSON = true;
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules
$(document).ready(function() {
//alert(CONTEXT_PATH);
var lastsel;
jQuery("#rowed3").jqGrid(
{
url : CONTEXT_PATH+'/ajax/getPartesByCategory.do?catid=<s:property value="categoryId" />',
//url : '/autoWEB/text.html',
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
headertitles: true,
colNames : [ 'ID', 'Pieza', 'Disponible'],
colModel : [ {
name : 'piezaId',
index : 'piezaId',
align : "right",
width : 50,
editable : false,
required : true
}, {
name : 'descripcion',
index : 'descripcion',
width : 390,
editable : true,
required : true
}, {
name : 'disponible',
index : 'disponible',
width : 80,
editable : true,
edittype : 'select',
editoptions:{value:"0:No;1:Si"},
required : true
} ],
rowNum : 20,
rowList : [ 20, 40, 60, 80 ],
pager : '#prowed3',
sortname : 'piezaId',
postData: {piezaId : lastsel},
mtype:"POST",
viewrecords : true,
sortorder : "desc",
onSelectRow : function(id) {
if (id && id !== lastsel) {
jQuery('#rowed3').jqGrid('restoreRow', lastsel);
jQuery('#rowed3').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl : CONTEXT_PATH+'/ajax/admin/savePieza.do?categoria=<s:property value="categoryId" />',
caption : "Piezas"
});
jQuery("#rowed3").jqGrid('navGrid', "#prowed3", {
edit : false,
add : false,
del : false
});
})
in your onSelectRow callback, you can modify the editUrl to be whatever you want, including passing in the ID you need.
$("#rowed3").jqGrid('setGridParam', {editurl:'whatever/url/you/need/with/the/id'});
jqGrid will add all the other nececessary params to that editurl for you.
You can use
hidden: true, editable: true, editrules: { edithidden: false }, hidedlg: true
in the definition of the piezaId (ID) column. The parameter hidedlg is currently not real needed, but can be useful if you decide the use other jqGrid features.
Passing values in the GET string worked for me.
editurl: '/ajax/update?line=1',
Related
Good morning. I made a data search & filter with datatables and it worked .. but when I moved the page and returned to that page the data was still stuck (not reset). In view I made it like the following image:
and in the js file I made it like this
brandmanage = $('#brandmanage').DataTable({
dom : 'rtpi',
pageLength: {{ $limit ?? '10' }},
language : {
paginate : {
previous : '<i class="fa fa-angle-left"></i>', // or '←'
next : '<i class="fa fa-angle-right"></i>', // or '→'
},
},
processing : true,
drawCallback : function( settings ) {
$('#lengthInput option[value={{ $limit ?? '10' }}]').attr('selected','selected');
},
serverSide : true,
stateSave : true,
ajax : {
url : "{{ route('lms.brand.getdata',['pfx'=>$pfx]) }}",
dataType : "json",
type : "POST",
data : { _token: "{{csrf_token()}}" }
},
columns : [
{ data : "brand" },
{ data : "corporate" },
{ data : "num_of_company" },
{ data : "primary" },
{ data : "secondary" },
{ data : "status" },
{ data : "action",
orderable : false,
className : "text-center",
},
],
});
$('#brandDataLength').on('change', function () {
brandmanage.page.len( $(this).val() ).draw();
});
$('#searchBrand').on('keyup', function () {
brandmanage.search( this.value ).draw();
});
What do I do so that when I have moved pages, the search results can be reset?
If you change stateSave to false, then dataTables will not remember the selected filters etc. Thereby the search results will be reset when you reload the page.
I'm new to jtable and trying to figure out how can I get the selected value of a field (Types, dropdown); and based on this value, I need to make a call to a Java class and get the value for field 2 (Price, input type).
$(document).ready(function() {
var selectedValue = null;
$('#StudentTableContainer').jtable({
title : 'Students List',
actions : {
listAction : 'Controller?action=list',
createAction : 'Controller?action=create',
updateAction: function(postData) {
var values = [];
console.log("updating from custom function...");
return $.Deferred(function($dfd) {
$.ajax({
url: './Controller?action=update',
type: 'POST',
`enter code here` dataType: 'json',
data: postData,
success: function(data) {
$.each(data, function(entryindex, entry) {
values.push(entry['typeId']);
});
alert(values);
$dfd.resolve(data);
},
error: function() {
$dfd.reject();
}
});
});
},
deleteAction : 'Controller?action=delete'
},
fields : {
studentId : {
title : 'Student Id',
width : '30%',
key : true,
list : true,
edit : false,
create : true
},
name : {
title : 'Name',
width : '30%',
edit : true
},
emailId : {
title : 'Email',
width : '20%',
edit : true
},
typeId : {
title : 'types',
width : '20%',
edit : true,
listClass:'genderClass',
options: { 'S':'Select','D': 'Dynamic', 'F': 'Fixed', 'C':'Customize' }
},
priceId : {
title : 'Price',
width : '20%',
edit : true
}
}
});
});
Based on the selection of 'TypeId', I need to populate the value of the Price. I tried putting in some logic in the 'updateAction', but no luck.
I have view file in extjs with a listener code, here it is:
initComponent: function() {
Ext.apply(this, {
title : 'Form Order',
iconCls : 'orderIcon',
width : 850,
maxHeight : 600,
x : 200,
y : 50,
resizable : true,
resizeHandles : 's n',
constrainHeader : true,
closable : true,
modal : true,
autoShow : false,
autoScroll : true,
overflow : 'auto',
layout: {
type: 'auto',
align: 'stretch'
},
items: [
this.createPanelMC()
]
});
this.callParent(arguments);
},
createPanelMC: function() {
this.requiredSign = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var panel = Ext.create('Ext.form.Panel', {
defaultType: 'textfield',
name: 'nodebPanel',
width: '100%',
layout: {
type: 'auto',
align: 'stretch'
},
items: [{
xtype : 'fieldset',
name : 'modlayanan',
title : 'Data Pelanggan',
layout : 'column',
width : '95%',
margin : '10',
items: [{
xtype : 'textfield',
name : 'nomor',
id : 'nomor',
itemId : 'nomor',
fieldLabel : 'PSTN',
emptyText : 'Nomor...',
margin : '10 0 0 0',
width : 350,
labelWidth : 100,
afterLabelTextTpl: this.requiredSign
}, {
xtype : 'textfield',
fieldLabel : 'Speedy',
name : 'speedy',
id : 'speedyVal',
itemId : 'speedyVal',
margin : '10 0 10 20',
width : 350,
labelWidth : 100
}, {
xtype : 'textareafield',
name : 'instaLAddress',
fieldLabel : 'Alamat Instalasi',
emptyText : 'Alamat Instalasi...',
readOnly : true,
labelWidth : 100,
autofocus: true,
//listener
listeners : {
render: function() {
this.getEl().on('mousedown', function(e, t, eOpts) {
var nopstn = Ext.getCmp('nomor').getValue();
var speedy = Ext.getCmp('speedyVal').getValue();
if (nopstn != '' && speedy != '') {
var store = Ext.ComponentQuery.query('#treeProduct')[0].getStore();
console.log(store);
store.load({
params: {
nopstn: nopstn,
speedy: speedy
}
});
}
});
}
}
},
this.createTreePaketExist(),
]
}]
});
return panel;
},
createTreePaketExist: function() {
var storeTree = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'data/newoss_get_paket.php',
actionMethods :{
create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
}
}
});
var groupProduct = Ext.create('Ext.tree.Panel', {
store : storeTree,
itemId : 'treeProduct',
renderTo : Ext.getBody(),
name : 'treeProduct',
rootVisible : false,
useArrows : true,
layout :'fit',
margin : '0 0 0 0',
autoScroll : true,
height : 150,
width : '93%',
listeners:
{
checkchange: function(node, checked, eOpts){
node.eachChild(function(n) {
node.cascadeBy(function(n){
n.set('checked', checked);
});
});
p = node.parentNode;
var pChildCheckedCount = 0;
p.suspendEvents();
p.eachChild(function(c) {
if (c.get('checked')) pChildCheckedCount++;
p.set('checked', !!pChildCheckedCount);
});
p.resumeEvents();
}
}
});
return groupProduct;
}
and the listener will show tree panel in createTreePaketExist(). the problem is.. i want show tree panel result without click anything,just show the result when panel is loading.
in my code, the result will show after i put pointer in textareafield. how can it just show without any click, just show when panel loaded? anybody can help me? thanks..
I think this has already been answered in your previous Question.
The issue that you are having here is that your store is dependent on user typed values, so your store can't load until the user has done something.
So you cannot automatically load the store without the values unless you provide default values to load the store with and then it can reload with different data if the user enters new information.
Its difficult to provide an in-depth answer to this without knowing what data the store is working with, how it is filtered based on the user data, what data they can enter or you expect them to enter.
I have used gridComplete to show HTML buttons but it shows the HTML text instead of button and encoded HTML as title which does not look good. Kindly help me remove or change the title (tooltip) and show the buttons
The Output
When I inspect this cell then I could see the following in chrome tools -
<td role="gridcell" style="" title="<input type='button' value='Publish' onclick='publish(100)' />" aria-describedby="list_actionBtn"><input type='button' value='Publish' onclick='publish(100)' /></td>
The jqgrid Code
var myColModel = [ {
name : "promoId",
index : 'Promotionid',
width : 60
}, {
name : "promoCode",
index : 'promotioncode',
width : 110
}, {
name : "name",
index : 'name',
width : 160
}, {
name : "description",
index : 'description',
width : 250
}, {
name : "distCode",
index : 'distributor_code',
width : 110
} , {
name : "statusId",
hidden : true
} , {
name : "statusVal",
index : 'status',
width : 90
}, {
name : "startDate",
index : 'start_date',
width : 100,
sorttype : "date",
align : "right"
}, {
name : "endDate",
index : 'end_date',
width : 100,
sorttype : "date",
align : "right"
}, {
name : "discount",
index : 'discount',
width : 80
}, {
name : "extension",
index : 'extension',
width : 80
}, {
name : "isDiscount",
hidden : true
}, {
name : "isExtension",
hidden : true
}, {
name : "actionBtn",
width : 100
} ];
$(function() {
$("#list")
.jqGrid(
{
url : '/suiactcodegen/action/promotion/promolist',
datatype : "json",
mtype : "GET",
colNames : [ "Promo ID", "Promo Code", "Name",
"Description", "Distributor Code", "Stt Id",
"Status", "Start Date", "End Date",
"Discount", "Extension", "Is Disc", "isExtn", "" ],
colModel : myColModel,
pager : "#pager",
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : "end_date",
sortorder : "asc",
viewrecords : true,
gridview : true,
rownumber : true,
autoencode : true,
width : '1000px',
height : 'auto',
caption : "Promotion Summary",
gridComplete: function() {
var ids = $("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var rowId = ids[i],
statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
activeBtn = "";
if (statusId == 0) { // Inactive
activeBtn = "<input type='button' value='Publish' " +
"onclick='publish(" + rowId + ")' />";
}
//else if (statusId == 1) { // Published
// activeBtn = "<input type='button' value='Expire' " +
// "onclick=\"expire(" + rowId + ");\" />";
//}
$("#list").jqGrid('setRowData', rowId, { actionBtn: activeBtn });
}
}
}).jqGrid('navGrid', '#pager', {
add : false,
edit : false,
del : false,
search : true,
refresh : false
}).jqGrid('navButtonAdd', '#pager', {
caption : " Edit ",
// buttonicon: "ui-icon-bookmark",
onClickButton : editPromo,
position : "last"
});
});
-- Update --
I have already tried autoencode = false for this column but it didn't work
IMP Update
The reason why it doesn't work I believe is because datatype is 'json' but button type is not json data type. How can I create it as a separate row? In case of 'local' data it works. See the fiddle http://jsfiddle.net/zpXCT/3/. Even tested it in my localhost
Sry I copied the basic grid from JqGrid site and then edited that and didn't notice that autoencode:true for grid level. So even though I mentioned it for column level it wasn't working. Now it appears.
Set colmodel datatype = 'html'
I've got some code that, when switching which row is selected, it triggers a save of the previously selected row.
The row is being successfully saved without any problem, however the successfunc isn't being called at all - my console.log output never shows up, and the code in this function isn't being run. I also tried specifying the function as the aftersavefunc, but couldn't get that to work either.
Seems like a simple syntax problem, but I can't quite get it right. Am I not specifying this function properly?
As a side note, I realize that reloading the entire grid after a row save seems like overkill, but in the context of where this particular piece of code is, within the larger structure of my app, this snippet of code is a special case.
The full jqGrid code is:
var lastSelectedMainGridRowID = 0;
var lastSelectedSubGridRowID = 0;
var translationsFeed = "/update/translations/ajax/translations_feed.php";
var translationsEdit = "/update/translations/ajax/translations_edit.php";
var translationsSubGridFeed = "ajax/translations_subgrid_feed.php";
var translationsSubGridFeedEdit = "ajax/translations_subgrid_feed_edit.php";
$(document).ready(function () {
$("#translationsList").jqGrid({
caption : "Translations",
datatype : "xml",
url : translationsFeed,
editurl : translationsEdit,
mtype : "get",
pager : "#translationsPager",
rowNum : 20,
autowidth : true,
sortname : "phrase",
sortorder : "asc",
viewrecords : true,
multiselect : false,
hidegrid : false,
height : 300,
altRows : true,
rownumbers : true,
toolbar : [false],
loadComplete: function(data) {
jQuery("#translationsList").setSelection (0, true);
},
colNames : ["phrase_id", "translation_id", "language_cd", "Phrase", "Translation", "Modified", "Created", "Active"],
colModel : [
{ name : "phrase_id", index : "phrase_id", sortable : true, search : false, editable: true, edittype : "text", editrules: { edithidden: true }, hidden: true},
{ name : "translation_id", index : "translation_id", sortable : false, search : false, editable: true, edittype : "text", editrules: { edithidden: true }, hidden: true},
{ name : "language_cd", index : "language_cd", sortable : true, search : true, editable: true, edittype : "text", editrules: { edithidden: true, required : true }, hidden: true },
{ name : "Phrase", width:200, index : "phrase", sortable : true, search : true, editable: true, edittype : "text", editrules: { required: true } },
{ name : "Translation", width:200, index : "translation", sortable : true, search : true, editable: true, edittype : "text", editrules: { required: false } },
{ name : "Modified", width:100, index : "modify_dt", sortable : true, search : true },
{ name : "Created", width:100, index : "create_dt", sortable : true, search : true },
{ name : "Active", width:20, index : "active", sortable : true, search : true, editable: true, edittype: "checkbox", editoptions: {value:"Yes:No", checked: true} }
],
onSelectRow: function(id) {
jQuery('#translationsList').jqGrid('saveRow', lastSelectedMainGridRowID);
jQuery('#translationsList').jqGrid('editRow', id, true);
lastSelectedMainGridRowID = id;
},
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id;
jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url: translationsSubGridFeed + "?phrase_id=" + row_id,
editurl: translationsSubGridFeedEdit,
datatype: "xml",
colNames: ['phrase_id', 'translation_id', 'language_cd', 'Translations', 'Language', 'Active'],
colModel: [
{name:"phrase_id", index:"phrase_id", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"translation_id", index:"translation_id", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"language_cd", index:"language_cd", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"Translation", index:"translation", sortable: true, editable: true, edittype:"text", width:589},
{name:"Language", index:"language_disp", sortable: true, editable: false, width:250},
{name:"Active", index:"active", sortable: true, editable: true, edittype:"checkbox", editoptions:{value:"Yes:No", checked: true}, width:80}
],
height: "100%",
rowNum:20,
sortname: 'language_cd',
sortorder: "asc",
onSelectRow: function(id) {
jQuery("#"+subgrid_table_id).jqGrid('saveRow', lastSelectedSubGridRowID, function(response) {
console.log("Data: " + response.responseText);
return false;
});
jQuery("#"+subgrid_table_id).jqGrid('editRow', id, true);
lastSelectedSubGridRowID = id;
}
});
}
});
Perhaps I don't need to use saveRow. In this case, what I'm doing is:
When you click on a row, it becomes editable
If you then click on a second row, the first row is saved (and no longer selected), and the new second row then becomes editable. Similar to saving a row "onBlur", so to speak.
I don't see the place of code where responseData variable are defined. The code responseData[0] should throw an exception, so the console.log("Data: " + responseData[0]); will not display any data. The line of code should be probably fixed as
console.log("Server response: " + result.responseText);
UPDATED: Without having the data for the both grid and for example the subgrid corresponds the first row one can't debug the code. Reading is not so effective. If you posted the test data (two XML files) I could try to localize the problem.
An important error is that you only declare subgrid_table_id variable, but not assign a value for it. Typically one construct an unique id name subgrid_table_id based on the subgrid_id. For example
var subgrid_table_id = subgrid_id+"_t";
instead of var subgrid_table_id; only.
Nevertheless some things I find a little suspected:
I don't understand why you return return false; from the successfunc. It means that you interpret the server response as an error and the normal actions on successful server response should be interrupted. I would recommend you additionally use errorfunc parameter of saveRow. In my server code the server always return error HTML status code in case of the server error. So I never need use successfunc and use aftersavefunc and errorfunc only.
The subgrid has many column which already exist in the corresponding row of the parent grid. The potential problems here are not only spending of additional memory. You don't posted the grid data and so I don't know what values you use as rowids for grids. It is very important to have no id duplicates on the HTML page. So you should be careful in the subject. Why you need ? Probably you can just use extraparam parameter of saveRow and editRow instead of the usage of phrase_id, translation_id and language_cd hidden columns having editable: true, editrules: { edithidden :true }, hidden: true properties?