Develop Reference

Get Jqgrid Column checkbox cheked value using MVC

I have to implement one good looking Grid in MVC4+Razor. Till now I have done by using jqgrid. Since I am new to jQuery grid, can someone suggest how to get checked checkbox value in column of checkbox of some id? Can someone help me how I can get that checkbox checked values in jgrid? I am attaching my HTML and Javascript code. So please send me solution using sample code.
Javascript code:
(function ($) {
$('#JQGrid1').jqGrid({
url: '/ExamForm/GetSubjects/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
width: 950,
height: 150,
colNames:['SubjectID', 'SubjectName', 'GroupName', ' SubjectCode'],
colModel:[
{name: "SubjectID", width: 70, align: "center",
formatter: "checkbox", formatoptions: { disabled: false},
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "No"},
stype: "select", searchoptions: { sopt: ["eq", "ne"],
value: ":Any;true:Yes;false:No" },key:true },
{ name: 'SubjectName', index: 'SubjectName', width: 60 },
{
name: 'GroupName', index: 'GroupName', width: 60, editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true
},
{ name: 'SubjectUniversityCode', index: 'SubjectUniversityCode', width: 20 }
],
rowNum: 100,
//loadonce: true,
grouping: true,
groupingView: {
groupField: ['GroupName']
},
multiselect: true
});
})(jQuery);
Get Selected row i have use following function
function getSelectedRows() {
var grid = $("#JQGrid1");
var rowKey = grid.getGridParam("selrow");
if (!rowKey)
alert("No rows are selected");
else {
var selectedIDs = grid.getGridParam("selarrrow");
var result = "";
for (var i = 0; i < selectedIDs.length; i++) {
result += selectedIDs[i] + ",";
}
alert(result);
}
});

Update specific rows without reloading the JqGrid

I am current using a JqGrid for my data visualization.
Here is my JqGrid configurations.
$('#jqGrid').jqGrid({
url: '/ConfirmationOfEmployment/GetUsers',
mtype: "POST",
rowNum: currentPageSize,
datatype: "json",
colNames: ['UserId', 'First Name', 'Last Name', 'Email Address', 'Expiry Date', 'Remaining Days', 'Actions','Remind Status'],
colModel: [
{ name: 'UserId', index: 'UserId', align: 'left', hidden: true, edittype: 'text' },
{ name: 'FirstName', index: 'FirstName', align: 'left' },
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'Email', index: 'Email', align: 'left' },
{ name: 'userExpiryDate', index: 'ExpiryDate', align: 'center', classes: 'createdDate' },
{ name: 'remainingDays', index: 'RemainingDays', align: 'center' },
{ name: 'isReminded', index: 'isReminded', align: 'left', hidden: true, edittype: 'text' },
{ name: 'act', index: 'act' },
],
pager: $('#jqPager'),
sortname: currentSortName,
width: '700',
shrinkToFit: false,
sortorder: currentSortOrder,
search: true,
postData: {
filters: RetrieveFilters
},
gridComplete: function () {
var ids = jQuery('#jqGrid').jqGrid('getDataIDs');
var remindStatus = jQuery('#jqGrid').jqGrid('getCol', 'isReminded');
for (var i = 0; i < ids.length; i++) {
var userId = ids[i];
var isUserReminded = remindStatus[i];
var confrim = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Confirm' onclick=\"ConfirmUser('" + userId + "','"+i+"');\" />";
var remove = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Delete' onclick=\"DeleteUser('" + userId + "');\" />";
var remind;
if (isUserReminded == 'True') {
remind = "<input style='height:25px;width:60px;margin-left:5px;' type='button' disabled value='Remind' onclick=\"RemindUser('" + userId + "');\" />";
}
else {
remind = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Remind' onclick=\"RemindUser('" + userId + "');\" />";
}
jQuery('#jqGrid').jqGrid('setRowData', ids[i], { act: confrim + remind + remove });
};
PageIndexHashUpdate();
}
});
In each of row, there are three buttons. Once user click on the "Confirm button" it fire the ConfirmUser javascript ajax call to the server and update the expiry date and the remaining days of the particular user.Once it's get succeeded, it will reload the grid.So its working fine.Here is the code.
ConfirmUser = function (selectedUserId, rowId) {
$.ajax({
url: "/ConfirmationOfEmployment/ConfirmUser",
async: false,
cache: false,
type: "POST",
dataType: "json",
data: { userId: selectedUserId },
error: function (jqXHR, textStatus, errorThrown) {
$.flashMessage({ "error": errorThrown, "alert": "error" });
},
success: function (data, textStatus, jqXHR) {
console.log(rowId);
console.log(data.newExpiryDate);
var rowData = $('#jqGrid').jqGrid('getRowData', rowId);
console.log(rowData);
//rowData.remainingDays = '180';
//rowData.userExpiryDate = data.newExpiryDate;
//$('#jqGrid').jqGrid('setRowData', rowId, rowData)
//$("#jqGrid").jqGrid('setCell', rowid, 'remainingDays', data.remaining);
//$("#jqGrid").jqGrid('getLocalRow', rowid).remainingDays = data.remaining;
$('#jqGrid').trigger("reloadGrid", [{ page: currentPage, current: true }]);
}
});
};
But the problem is that,once the user keep on clicking the confirm button for various user records, each and every time it will reload the grid which is much time consuming.So what I am seeking is a way to update the particular row only(instead of reloading the grid.)
I tried to use 'setCell' and 'setRowData' methods(commented out lines.) but I failed. So I would like to know how to do update particular cell or row without reloading the grid? Thank you.

Jqgrid - Table not displaying responsive behavior

Hi I Have the following code which displays the table using jqgrid. But, i noticed
that none of the jqGrid is being responsive.
How can i make existing jqGrid responsive for tablet and smart phones
UPUDATE
I have updated my code with the following
$(window).on("resize", function () {
var newWidth = $("#loanGrid").closest(".ui-jqgrid").parent().width();
$("#loanGrid").jqGrid("setGridWidth", newWidth, true);
});
The respomnsiveness works but not completely.
Here is the code below and fiddle here
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-11">
<h3 class="subheader"> Sample Info </h4>
<div class="redmond">
<table id="output"></table>
</div>
</div>
</div>
</div>
jqGrid JavaScript
$("#output").jqGrid({
url: jsonData,
mtype: "GET",
datatype: "json",
/* postData: {
json: JSON.stringify(data)
},
*/
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'Symbol',
label: 'Symbol',
align: 'left',
width: 65
}, {
name: 'Description',
label: 'Description',
align: 'left',
width: 165
}, {
name: 'ShareQuantity',
label: 'ShareQuantity',
align: 'right',
width: "85",
formatter: 'currency',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'SharePrice',
label: 'Share Price',
align: 'right',
width: 100,
template: "number",
formatoptions: {
prefix: " $",
decimalPlaces: 4
}
},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{
name: 'TotalValue',
label: 'Total Value',
width: 160,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}, {
name: 'LTVRatio',
label: 'LTV Ratio',
width: 70,
sorttype: 'number',
align: "right",
formatter: 'percentage',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'LTVCategory',
label: 'LTV Category',
width: 120,
width: 165
},
{
name: 'MaxLoanAmt',
label: 'MaxLoanAmount',
width: 165,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}
],
additionalProperties: ["Num1"],
/*beforeProcessing: function (data) {
var item, i, n = data.length;
for (i = 0; i < n; i++) {
item = data[i];
item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
item.Value = parseFloat($.trim(item.Value).replace(",", ""));
item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
}, */
iconSet: "fontAwesome",
loadonce: true,
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoResizing: {
compact: true
},
forceClientSorting: true,
sortname: "Symbol",
footerrow: true,
caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",
loadComplete: function() {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
//ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
$self.jqGrid("footerData", "set", {
LTVCategory: "Max Approved Loan Amount:",
Price: sum,
MaxLoanAmt: sum1
});
}
});
//jQuery("#loanGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
});

You can use Bootstrap classes .visible-* or hidden-* to hide/show some elements on the page depend on the window resolution (see the documentation). The properties classes, labelClasses or colModel can be used in free jqGrid (starting with version 4.8, see here and here) to assign the classes to the column. For example the demo https://jsfiddle.net/OlegKi/w7pxts0z/7/ uses
classes: "hidden-xs hidden-sm", labelClasses: "hidden-xs hidden-sm"
in LTVCategory column and the properties
classes: "hidden-xs", labelClasses: "hidden-xs"
in ShareQuantity and SharePrice columns. As the result the column LTVCategory will be hidden on "extra small devices" (width<768px) and "small devices" (width<992px, but width>=768px).

Unable to bind the data to dropdown in jqgrid when it is editing getting data using web api

$j(document).ready(function () {
$j.ajax({
type: "GET",
url: "http://localhost:9611/api/Master/GetBackendUsersList",
contentType: "json",
dataType: "json",
success: function (data) {
var dataList;
var StatusList = '';
$j('#list2').jqGrid({
caption: "Users Details",
data: data,
datatype: "local",
height: '100%',
width: '100%',
colNames: ["UserName", "RoleId", "Name", "RoleName", "LoginId"],
colModel: [
{ name: "UserName", index: 'UserName', editable: true },
{ name: 'RoleId', index: "RoleId", hidden: true, width: 150, editable: true },
{ name: "Name", index: "Name", editable: true },
{
name: "RoleName", index: "RoleName", editable: true, edittype: 'select', editoptions: {
dataInit: function (element)
{
$j.ajax({
type: "GET",
url: "http://localhost:9611/api/Master/GetRoles",
contentType: "json",
dataType: "json",
success: function (mydata) {
dataList = mydata;
for (var i = 0; i < dataList.length; i++) {
//if (StatusList == "")
// StatusList = dataList[i].RoleId + ":" + dataList[i].RoleName;
//else
StatusList = StatusList + dataList[i].RoleId + ":" + dataList[i].RoleName+ ';' ;
}
}
});
},
value: "0:Select;" + StatusList,
}
},
{ name: 'LoginId', index: "LoginId", hidden: true, width: 150 }
],
gridview: true,
rowNum: 5,
rowList: [5, 10, 15],
pager: '#jQGridDemoPager',
sortname: "UserName",
viewrecords: true,
sortorder: "desc",
//width: '100%',
//height: '100%',
shrinkToFit: false,
editurl: SiteUrl + "api/Master/UpdateBackendUserDetails/" ,
});
$j.extend(true, $j.jgrid.edit, {
recreateForm: true,
beforeShowForm: function ($jform) {
$jform.closest(".ui-jqdialog").position({
of: window, // or any other element
my: "center center",
at: "center center"
});
}
});
$j('#list2').jqGrid('navGrid', '#jQGridDemoPager',
{
add: false,
search: false,
recreateForm: true,
beforeShowForm: function ($jform) {
$jform.find(".FormElement[readonly]")
.prop("disabled", true)
.addClass("ui-state-disabled")
.closest("LoginId")
.prev(".CaptionTD")
.prop("disabled", true)
.addClass("ui-state-disabled");
},
},
{ recreateForm: true }
);
}
});
});
Dropdown data from api is like:
[{"RoleId":1,"RoleName":"Administrator"},{"RoleId":2,"RoleName":"Sales"},{"RoleId":3,"RoleName":"Secretory/President"},{"RoleId":4,"RoleName":"Apartment Owner"},{"RoleId":5,"RoleName":"Apartment User"}]

Use this way :
editoptions:{value: getData()}
and then create one method
function getData(){
var states = [{"RoleId":1,"RoleName":"Administrator"},{"RoleId":2,"RoleName":"Sales"},{"RoleId":3,"RoleName":"Secretory/President"},{"RoleId":4,"RoleName":"Apartment Owner"},{"RoleId":5,"RoleName":"Apartment User"}];
return states;
}
In your case you need to add ajax call in getData() and return values/array which has been created by the result.

Unable to set date format & dropdown text in jqGrid

I am using jqGrid to display data. Data is in xml format.
I am unable to format date column (source format : yyyyMMdd, target format : dd-mm-yyy).
My Grid is unable to display text value from select, It shows values instead of text.
Strange thing is it is working in some other screen.
<SalesOpportunitiesLines>
<row>
<LineNum>0</LineNum>
<SalesPerson>1</SalesPerson>
<StartDate>20131126</StartDate>
<ClosingDate>20131126</ClosingDate>
<StageKey>1</StageKey>
<PercentageRate>0.000000</PercentageRate>
<MaxLocalTotal>1000000.000000</MaxLocalTotal>
<DocumentType>bodt_MinusOne</DocumentType>
<BPChanelName>ACCM Services</BPChanelName>
<BPChanelCode>CLINAC0709</BPChanelCode>
<SequenceNo>366</SequenceNo>
<DataOwnershipfield>1</DataOwnershipfield>
<BPChannelContact>1212</BPChannelContact>
</row>
</SalesOpportunities>
$("#uxStages").jqGrid({
datatype: 'xmlstring',
datastr: xmlstring,
mtype: 'GET',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
xmlReader: { repeatitems: false, root: "BO>SalesOpportunitiesLines", row: 'row' },
colNames: ['LineNum', 'Star tDate', 'Clos Date', 'Sales Employee', 'Stage', 'Percentage', 'Potential Amount', 'Document Type', 'Doc. No.', 'Owner'],
colModel: [
{ name: 'LineNum', key: true, index: 'LineNum', hidden: true, sortable: false, width: 60 },
{ name: 'StartDate', key: false, index: 'StartDate', sortable: false, align: "left", width: 90,
editable: true,
formatter: 'date',
formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
editoptions: {
dataInit: function (elem) {
$(elem).datepicker({ dateFormat: 'dd-M-yy' });
}
}
},
{ name: 'ClosingDate', key: false, index: 'ClosingDate', sortable: false, align: "left", width: 90,
editable: true,
formatter: 'date',
formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
editoptions: {
dataInit: function (elem) {
$(elem).datepicker({ dateFormat: 'dd-M-yy' });
}
}
},
{ name: 'SalesPerson', key: false, index: 'SalesPerson', sortable: false, width: 80,
editable: true,
edittype: "select"
},
{ name: 'StageKey', key: false, index: 'StageKey', hidden: false, sortable: false, width:80,
editable: true,
edittype: "select"
},
{ name: 'PercentageRate', key: false, index: 'PercentageRate', sortable: false, width: 60 },
{ name: 'MaxLocalTotal', key: false, index: 'MaxLocalTotal', sortable: false, width: 100,
editable: true,
edittype: "text",
formatter: 'currency',
formatoptions: { thousandsSeparator: ',' }
},
{ name: 'DocumentType', key: false, index: 'DocumentType', sortable: false, width: 90,
editable: true,
edittype: 'select',
formatter: 'select',
editoptions: { value: "bodt_MinusOne:;bodt_Quotation:Sales Quotations;bodt_Order:Sales Orders;bodt_DeliveryNote:Deliveries;bodt_Invoice:A/R Invoice" }
},
{ name: 'DocumentNumber', key: false, index: 'DocumentNumber', sortable: false, width: 40 },
{ name: 'DataOwnershipfield', key: false, index: 'DataOwnershipfield', hidden: false, sortable: false, width: 60,
editable: true,
edittype: "select"
}
],
rowNum: 100,
viewrecords: true,
gridview: true,
rownumbers: true,
height: 150,
loadonce: true,
width: 1120,
scrollOffset: 0,
ondblClickRow: function (rowid) {
var grid = $("#uxStages");
var selectedRowId = grid.jqGrid('getGridParam', 'selrow');
lastSelection = selectedRowId;
grid.jqGrid('editRow', selectedRowId, true, null, null, null, null, OnSuccessEdit_Stages);
$('#' + selectedRowId + "_StageKey").css('width', '100%');
$('#' + selectedRowId + "_SalesPerson").css('width', '100%');
$('#' + selectedRowId + "_DataOwnershipfield").css('width', '100%');
},
loadComplete: function () {
var ids = $("#uxStages").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
if (i < ids.length - 1) {
$('#' + $.jgrid.jqID(id)).addClass('not-editable-row');
$('#' + $.jgrid.jqID(id)).addClass('ui-state-error');
}
}
},
onSelectRow: function (id) {
if (id && id !== lastSelection) {
var grid = $("#uxStages");
$('#uxStages').saveRow(lastSelection);
}
}
}).jqGrid('navGrid', { edit: true, edit: true, add: true, del: true, searchOnEnter: false, search: false }, {}, {}, {}, { multipleSearch: false }).trigger('reloadGrid');
$("#uxStages").setColProp('SalesPerson', { edittype: "select", editoptions: { value: GetSalesValues()} }); //Here i m fetching values in namedvalue pairs
$("#uxStages").setColProp('StageKey', { edittype: "select", editoptions: { value: GetStagesValues()} }); //Here i m fetching values in namedvalue pairs
$("#uxStages").setColProp('DataOwnershipfield', { edittype: "select", editoptions: { value: GetDataOwnershipValues()} }); //Here i m fetching values in namedvalue pairs
Can anybody help me out?

The predefined formatter: "date" of jqGrid don't support input fields without separators. So you have to use custom formatter. The implementation could be something like the following
formatter: function (cellValue, opts, rawdata, action) {
if (action === "edit") {
// input data have format "dd-mm-yy" format - "20-03-2015"
var input = cellValue.split("-");
if (input.length === 3) {
return input[0] + "-" + input[1] + "-" + input[2];
}
} else if (cellValue.length === 8) {
// input data have format "yymmdd" format - "20150320"
var year = cellValue.substr(0,4), month = cellValue.substr(4,2),
day = cellValue.substr(6,2);
return day + "-" + month + "-" + year;
}
return cellValue; // for empty input for example
}
Depend on other options (like the usage of loadonce: true) and depend on exact version of jqGrid which you use, you could need to implement additional callbacks in the column. For example if you use loadonce: true then the editing data will be saved locally. To hold the data in the same format as input data one can use saveLocally callback of free jqGrid (see here). In the case you can implement saveLocally callback in the column as the following
saveLocally: function (options) {
var input = String(options.newValue).split("-");
options.newItem[options.cmName] = input.length === 3 ?
input[2] + input[1] + input[0] :
options.newValue;
}
See the corresponding demo uses the above code. It uses local input data in the same format. The date will be displayed in the desired format, but the edited data will be saved locally in the same format like original date.