Problem: unable to get updatable value of textbox in jqgrid.
It just retrieve old value.
example - default value of textbox field inside jqgrid is - "0"
now, if i update its value to "1" and inspect the field then its value does not get updated into HTML and not able to retrieve with jqgrid object through below syntax.
var rowData = $('#gerList').jqGrid('getRowData', rowId);
Below is my jqgrid stuff:
$('#gerList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#gerList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetEnrolls", "Attendance")/' + 0,
gridview: true,
autoencode: true,
postData: { adID: rowID },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'syStudentID' },
mtype: 'GET',
colNames: ['GrdID', 'name', 'Minutes', 'comment'],
colModel: [
{ name: 'syID', index: 'syID', hidden: true },
{ name: 'FullName', index: 'FullName', width: 150 },
{
name: 'Min', index: 'Min', width: 75, align: 'left', formatter: function (cellValue, option) {
return '<input type="text" style="width: 40px" name="txtMin" id="txt_' + option.rowId + '" value="' + cellValue + '" />';
}
},
{ name: 'MSG', index: 'MSG', width: 150 }
],
pager: $('#gerListPager'),
sortname: 'syStudentID',
rowNum: 40,
rowList: [40, 80, 120],
width: '525',
height: '100%',
viewrecords: true,
beforeSelectRow: function (rowid, e) {
console.log("final");
var $txt = $(e.target).closest('tr').find('input[type="text"]');
alert($txt);
$txt.attr('value', rowid);
return true; // allow row selection*/
return true;
},
sortorder: 'desc'
}).navGrid('#gerListPager', { edit: false, add: false, del: false, search: false, refresh: false });
Please suggest me what is wrong to use this textbox in jqgrid.
In grid UI, all fields are non editable except textbox field appear to allow edit always.
Thanks
Try to use this:
jQuery("#gerList").saveRow("rowid", false, 'clientArray');
Related
I have the following code in page which binds the data to j query grid.
Now i want to add one more column for check-boxes to the existing grid and when i select some check boxes and press some button .. i need to get the selected row values .
I have seen some tutorials for this they mentioned about some formatter .... but they are not clear
Please help me to achieve this.
Thanks in advance.
Code:
$(document).ready(function () {
$("#btn_GenerateEmpList").click(function () {
var firstClick = true;
if (!firstClick) {
$("#EmpTable").trigger("reloadGrid");
}
firstClick = false;
var empId= $("#txt_emp").val();
$.ajax({
type: "POST",
url: "PLBased.aspx/GetEmpNames",
data: JSON.stringify({ empId: empId}),
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
result = result.d;
jQuery("#EmpTable").jqGrid({
datatype: "local",
colNames: ['Emp Name'],
colModel: [
{ name: "EmpName", Index: "EmpName", width: 80 }
],
data: JSON.parse(result),
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
loadonce: false,
viewrecords: true,
sortorder: 'asc',
gridview: true,
autowidth: true,
sortname: 'EMPID',
height: 'auto',
altrows: true,
});
},
error: function (result) {
alert("There was some error ");
}
});
});
});
You can use customformatter to show checkbox in the column. For this, you can write the code as below in your jqGrid Code.
colNames: ['Id','Emp Name','Emp Checkbox'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'EmpName', Index: 'EmpName', width: 80 },
{ name: 'Empchk', Index: 'Empchk', width: 50, align: 'center', editable: true, edittype: "checkbox", editoptions: { value: "true:false" },
formatter: generateEmpCheckBox, formatoptions: { disabled: false } }
],
formatter function code as below,
function generateEmpCheckBox(cellvalue, options, rowObject) {
var checkedStr = "";
if (cellvalue == true) {
checkedStr = " checked=checked ";
}
return '<input type="checkbox" onchange="UpdateEmpcheckbox(' + rowObject.Id + ',this)" value="' + cellvalue + '" ' + checkedStr + '/>';
}
function UpdateEmpcheckbox(selectedId, chkBox) {
if ($(chkBox).prop("checked")) {
//you can write an ajax here, to update the server
//when the checkbox is checked
}
else if (!($(chkBox).prop("checked"))) {
//you can write an ajax here to update the server
//when the checkbox is unchecked
}
return false;
}
Set the option multiselect:true which will add column of checkboxes. Then add
$('#EmpTable').jqGrid('getGridParam', 'selarrrow')
will return an array of selected id's.
$("#addressList").jqGrid({
url: '/Storage/Shipping/GetCustomerAddresses?q=2&Customerid=' + $("#saveCustomerID").val(),
datatype: "Json",
jsonReader: {
root: "Data.rows",
page: "Data.page",
total: "Data.total",
records: "Data.records",
repeatitems: true,
userdata: "userdata",
cell: "cell"
},
colNames: ['', 'Line 1', 'Line 2', 'City', 'State'],
colModel: [
{ name: 'myradio', width: 30, fixed: true, align: 'center', resizable: false, sortable: false,
formatter: function (cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" />';
}
},
{ name: 'Line1', index: 'Line1', width: 250 },
{ name: 'Line2', index: 'Line2', width: 250 },
{ name: 'City', index: 'City', width: 210 },
{ name: 'State', index: 'State', width: 75 }
],
page: 1,
rowNum: 50,
rowList: [20, 50, 100],
pager: '#pager',
viewrecords: true,
grouping: false,
caption: "Addresses",
mtype: "POST",
width: "100%",
height: "100%",
loadonce: true,
sortable: false,
beforeSelectRow: function (rowid, e) {
var radio = $(e.target).closest('tr').find('input[type="radio"]');
radio.attr('checked', 'checked');
$("#saveCustomerAddressID").val(rowid.toString());
return true; // allow row selection
},
loadComplete: function () {
var grid_ids = $("#addressList").jqGrid('getDataIDs');
for (var i = 0; i < grid_ids.length; i++) {
if ($("#saveCustomerAddressID").val() == grid_ids[i]) {
{
$("#addressList").jqGrid('setSelection', grid_ids[i], true);
}
}
}
}
//, postdata: { CustomerID: $("#saveCustomerID").val() }
});
The above code sets the selection correctly in loadcomplete. The $("#saveCustomerAddressID").val() is the rowid fro the JSON Data.
The radiobutton is set in the beforeSelectRow. I know the row number and grid column of of the radiobutton to be set, but how do you set the radiobutton?
if you have row number and grid column, then it shouldn't be difficult. get the id(css) of that column where you have your radio button(check developer tools for this). now lets say that radio button is in a column name "Demo"
so the id would look like something like this i suppose
var demo= $("'#'+rowid+'Demo'")//check developer tools for confirmation
demo.attr('checked', 'checked');
$("#saveCustomerAddressID").val(rowid.toString());//continue with you loadComplete code
and for set selection use setSelection method of jqgrid after this continue with your code of loadcomplete
I've put a jqgrid the page. In Jqgrid placed a column that I want when user click on the column, Fill Other Jqgrid.Now when I click on the desired column. Only first-time Fill second JQGrid,But the next time the server side code will not run.
The code is written as follows
var firstButtonColumnIndex = 0;
grid = $('#list'); buttonNames = {};
grid.jqGrid({
url: 'jQGridHandler.ashx?Request=1',
loadonce: true,
direction: "rtl",
pgtext: "صفحه {0} از {1}",
datatype: 'json',
height: 250,
colNames: ['شماره درخواست', 'شماره اموال', 'شرح دستور کار', 'تاریخ دستور کار', 'زمان دستور کار', 'ملاحظات', '', ''],
colModel: [
{ name: 'WorkOrderNo', width: 100, sortable: true },
{ name: 'AssetNo', width: 100, sortable: true },
{ name: 'WorkDescription', width: 400, sortable: true },
{ name: 'WorkOrderDate', width: 80, sortable: true },
{ name: 'WorkOrderTime', width: 80, sortable: true },
{ name: 'Remark', width: 100, sortable: true },
{ name: 'del', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-trash'></span>";
}
},
{ name: 'details', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>";
}
}
],
gridview: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
// sortname: 'WorkOrderNo',
viewrecords: true,
sortorder: 'asc',
caption: 'درخواست ها...........',
rownumbers: true,
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == 7) {
//alert("rowid=" + rowid + "\nButton name: " + buttonNames[iCol]);
// $('img').each(function () {
$("#workRequestPopUp").draggable();
// });
} else if (iCol == 8) {
workOrderId = rowid;
$("#tblRequestWorks tr").remove();
$("#tblRequestWorks").jqGrid({
// url: 'jQGridHandler.ashx?RequestWorksFill=1&workOrderId=' + workOrderId,
url: "PublicHandler.ashx?Request=1&workOrderId: rowid",
direction: "rtl",
pgtext: "",
datatype: 'json',
height: 250,
colNames: ['نام کار', 'نام واحد', 'سرپرست واحد', 'تعداد', 'پایان کار', ''],
colModel: [
{ name: 'WorkName', width: 300, sortable: true },
{ name: 'SectionName', width: 100, sortable: true },
{ name: 'SectionSupervisor', width: 100, sortable: true },
{ name: 'RequestCount', width: 80, sortable: true },
{ name: 'FinishWork', width: 100, sortable: true },
{ name: 'details', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>";
}
}
],
rowNum: 10,
rowList: [10, 20, 30],
sortorder: 'asc',
caption: 'Test',
rownumbers: true,
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == 6) {
alert(rowid);
Fill12(rowid);
} else if (iCol == 8) {
alert(rowid);
Fill12(rowid);
return true;
// return (iCol >= firstButtonColumnIndex) ? false : true;
}
},
dataType: "json"
});
// fillRequestWorkPopup(workOrderId);
popup(e);
}
// prevent row selection if one click on the button
// return (iCol >= firstButtonColumnIndex) ? false : true;
return true;
}
});
It is Delegate Function in tr in JQGrid?
I respected professors can help. thanks All
The URL "PublicHandler.ashx?Request=1&workOrderId: rowid" seems me wrong. Do you mean probably "PublicHandler.ashx?Request=1&workOrderId=" + rowid? The better will be to use url: "PublicHandler.ashx" with postData: {Request: 1, workOrderId: rowid}.
The next problem is the usage of $("#tblRequestWorks tr").remove();. You don't included any HTML code which you use on the page. If you want to destroy the old grid and create a new one on the same place you should use GridUnload instead of $("#tblRequestWorks tr").remove();: $("#tblRequestWorks").jqGrid('GridUnload'); (see here and example).
You can also remove dataType: "json" from the code. jqGrid don't know the option and you already use the correct datatype: "json" option.
I think you can change your code so that the usage of GridUnload will be not needed. Only changing on some parameters of the second grid ($("#tblRequestWorks")) and reloading it with respect of $("#tblRequestWorks").trigger('reloadGrid', [{page: 1}]); seems me enough.
One more remark: you should be very careful in the id values for the second grid. It is not permitted to have id duplicates on the page. If you can't generate unique ids on the server you can consider to use idPrefix option of the grid.
Ive got a jqGrid where i have a some columns and 1 of the columns is a dropdownlist(select) populated from database.
What i want is : When im not in editmode column with dropdowns just have to show text which have to be taken from query, and when im in edit mode it should show dropdown list.
exactly like here: http://www.trirand.com/blog/jqgrid/jqgrid.html go into row editing/input tipyes
here is the code for my grid:
<script type="text/javascript">
var lastsel;
$(document).ready(function () {
$.getJSON('#Url.Action("ConstructSelect")', function (data) {
setupGrid(data);
});
});
function setupGrid(data) {
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Action("GetStoreList")',
datatype: 'json',
mtype: 'GET',
colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
colModel: [
{ name: 'Id', index: 'Id', width: 50 },
{ name: 'Butiks Kategori', index: 'StoreId', width: 200, edittype: 'text', align: 'center', editable: false },
{ name: 'Buttiks Navn', index: 'StoreName', width: 200, edittype: 'text', align: 'center', editable: false },
{ name: 'Country', index: 'Country', width: 80, sortable: true, editable: true, edittype: "select", editoptions: { value: data }}],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '#Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "500px",
imgpath: '/scripts/themes/base/images'
});
jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false });
});
}
</script>
P.S. Ill link code as soon as i am back home
UPDATED: Thanks for an answer, im new to jq, so im making alot of mistakes ofc., but now im back to where i was before, the dropdownlist is not populated with data. i cleaned up the code as u said, so it looks like this now:
btw. The ConstructSelect return a list of Strings
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Action("GetStoreList")',
ajaxSelectOptions: { type: "POST", dataType: "json" },
datatype: 'json',
mtype: 'GET',
colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
colModel: [
{ name: 'Kategori', index: 'Kategori', width: 50, key: false},
{ name: 'Navn', index: 'Navn', align: 'center', editable: false },
{ name: 'By', index: 'By', align: 'center', editable: false },
{ name: 'Sælger', index: 'Sælger', editable: true, edittype: "select",
editoptions: { dataUrl: '#Url.Action("ConstructSelect")',
buildSelect: function (data) {
var response = jQuery.parseJSON(data.responseText);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
}
}
}],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '#Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "900px"
});
jQuery("#list").jqGrid('navGrid', "#page", {edit:false, add:false, del:false});
});
Okay, slight modifications was needed to get it working :
var response = typeof(data) === "string" ? jQuery.parseJSON(data.responseText):data;
aparently u have to tell buildselect that the data u want to modify is String
But i still have the problem that it doesnt show from begining which sellers is already selected!
Okay after restart it mysticly worked... it is solved now
What you need to do is to use
editoptions: { dataUrl: '#Url.Action("ConstructSelect")' }
instead of
editoptions: { value: data }
Depend on the format of the output of the action ConstructSelect you can need to use an additional property buildSelect of the editoptions. jqGrid expected that the server response on the HTTP 'GET' request of dataUrl will be HTML fragment which represent <select>. For example:
<select>
<option value="de">Germany</option>
<option value="us">USA</option>
</select>
If the server return other formatted data, like JSON data
["Germany","USA"]
or
[{"code":"de","display":"Germany"},{"code":"us","display":"USA"}]
you can write JavaScript function which convert the server response to the HTML fragment of the <select> and set the value of the property buildSelect to the function.
In the answer you will find an example of the function.
If your action support only HTTP POST and no GET you will have to use ajaxSelectOptions: { type: "POST" } parameter additionally, to overwrite the type of the corresponding ajax requests. In the same way you can overwrite other ajax parameters. For example you can use
ajaxSelectOptions: { type: "POST", dataType: "json"}
(defaults are type : "GET" and dataType: "html")
Some other small remarks to the code:
you should not place $(document).ready(function () { inside of another $(document).ready(function () {.
You use 'Id' instead of 'id'. So jqGrid will not find the id property. You can a) rename
'Id' to 'id' b) include additional parameter jsonReader: {id: 'Id'} c) include additional property key: true in the definition of the column 'Id'. Any from the ways will solve the described problem.
You can remove default properties like edittype: 'text', sortable: true or editable: false. See jqGrid documentation which describes the default values of all colModel properties.
You should remove imgpath parameter of jqGrid. The parameter is not exist since many many versions of jqGrid (see here).
Am using jqgrid, loading data once, sorting and filtering locally and doing a refresh after each update/insert/delete. It works fine, besides that if I am using a filter (on top of grid), the filter remains the same after refresh, but the filter is not re-applied on the newly loaded data.
I have tried to call mygrid[0].triggerToolbar() after reloading grid with trigger('reloadGrid'), but there is no effect.
Thanks for any help or pointers :-)
Code below:
var lastsel;
var mygrid;
var currentLang;
//setup grid with columns, properties, events
function initGrid(lang, productData, resellerData, resellerSearchData) {
mygrid = jQuery("#list2").jqGrid({
//data loading settings
url: '/public/Gadgets/LinkGadget/ProductLinks/' + lang,
editurl: "/public/Gadgets/LinkGadget/Edit/" + lang,
datatype: "json",
mtype: 'POST',
jsonReader: {
root: "rows",
cell: "",
page: "currpage",
//total: "totalrecords",
repeatitems: false
},
loadError: function (xhr, status, error) { alert(status + " " + error); },
//column definitions
colNames: ['Id', 'ProductId', 'Reseller Name', 'Link', 'Link Status'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, sortable: false, resizable: true, editable: false, search: false, key: true, editrules: { edithidden: true }, hidden: true },
{ name: 'ProductId', index: 'ProductId', width: 190, sortable: true, sorttype: 'text', resizable: true, editable: true, search: true, stype: 'select', edittype: "select", editoptions: { value: productData }, editrules: { required: true} },
{ name: 'ResellerName', indexme: 'ResellerName', width: 190, sortable: false, sorttype: 'text', resizable: true, editable: true, search: true, stype: 'select', edittype: "select", editoptions: { value: resellerData }, editrules: { required: true }, searchoptions: { sopt: ['eq'], value: resellerSearchData} },
{ name: 'Link', index: 'Link', width: 320, sortable: true, sorttype: 'text', resizable: true, editable: true, search: true, edittype: "textarea", editoptions: { rows: "3", cols: "50" }, editrules: { required: true }, searchoptions: { sopt: ['cn']} },
{ name: 'LinkStatus', index: 'LinkStatus', width: 100, sortable: false, resizable: true, editable: false, search: false, formatter: linkStatusFormatter}],
//grid settings
//rowList: [10, 25, 50],
rowNum: 20,
pager: '#pager2',
sortname: 'ProductId',
sortorder: 'asc',
height: '100%',
viewrecords: true,
gridview: true,
loadonce: true,
viewsortcols: [false, 'vertical', true],
caption: " Product links ",
//grid events
onSelectRow: function (id) {
if (id && id !== lastsel) {
if (lastsel == "newid") {
jQuery('#list2').jqGrid('delRowData', lastsel, true);
}
else {
jQuery('#list2').jqGrid('restoreRow', lastsel);
}
jQuery('#list2').jqGrid('editRow', id, true, null, afterSave); //reload on success
lastsel = id;
}
},
gridComplete: function () {
//$("#list2").setGridParam({ datatype: 'local', page: 1 });
$("#pager2 .ui-pg-selbox").val(25); //changing the selected values triggers paging to work for some reason
}
});
//page settings
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ del: false, refresh: false, search: false, add: false, edit: false }
);
//refresh grid button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Refresh", title: "Refresh grid", buttonicon: 'ui-icon-refresh',
onClickButton: function () {
reload();
}
});
//clear search button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Clear search", title: "Clear Search", buttonicon: 'ui-icon-refresh',
onClickButton: function () {
mygrid[0].clearToolbar();
}
});
//add row button
jQuery("#list2").jqGrid('navButtonAdd', '#pager2', { caption: "New", buttonicon: 'ui-icon-circle-plus',
onClickButton: function (id) {
var datarow = { Id: "newid", ProductId: "", ResellerName: "", Link: "" };
jQuery('#list2').jqGrid('restoreRow', lastsel); //if editing other row, cancel this
lastsel = "newid"; // id;
var su = jQuery("#list2").addRowData(lastsel, datarow, "first");
if (su) {
jQuery('#list2').jqGrid('editRow', lastsel, true, null, afterSave); //reload on success
jQuery("#list2").setSelection(lastsel, true);
}
},
title: "New row"
});
//delete row button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Delete", title: "Delete row", buttonicon: 'ui-icon-circle-minus',
onClickButton: function () {
if (lastsel) {
if (confirm('Are you sure you want to delete this row?')) {
var url = '/public/Gadgets/LinkGadget/Edit/' + currentLang;
var data = { oper: 'del', id: lastsel };
$.post(url, data, function (data, textStatus, XMLHttpRequest) {
reload();
});
lastsel = null;
}
else {
jQuery("#list2").resetSelection();
}
}
else {
alert("No row selected to delete.");
}
}
});
jQuery("#list2").jqGrid('filterToolbar');
}
//Used by initGrid - formats link status column by adding button
function linkStatusFormatter(cellvalue, options, rowObject) {
if (rowObject.Id != "newrow")
return "<input style='height:22px;width:90px;' type='button' " + "value='Check link' " + "onclick=\"CheckLink(this, '" + rowObject.Id + "'); \" />";
else
return "";
}
//Used by initGrid - reloads grid
function reload() {
//jqgrid setting "loadonce: true" will reset datatype from json to local after grid has loaded. "datatype: local"
// does not allow server reloads, therefore datatype is reset before trying to reload grid
$("#list2").setGridParam({ datatype: 'json' }).trigger('reloadGrid');
//mygrid[0].clearToolbar();
lastsel = null;
//Comments: after reload, toolbar filter is not applied to refreshed data. Tried row below without luck
//mygrid[0].triggerToolbar();
}
//after successful save, reload grid and deselect row
function afterSave() {
reload();
}
Your data is not getting re binded to the grid after save/update delete