JQ Grid HTML Control in a Grid
jQuery("#gvUserManager").jqGrid({
data: mydata,
datatype: "local",
editurl: 'clientArray',
colNames: ['Name', 'User Name', 'Email', 'Staff Level', ' User Type', "Send Password", "User ID"],
colModel: [
{ name: 'Name', index: 'Name', width: 100, editable: true, editoptions: { readonly: false, size: 25 } },
{
name: 'UserName', index: 'UserName', width: 100, editable: true, editoptions: {
dataInit: function(e) {
$(e).autocomplete({
source: availableTags,
minLength: 1,
focus: function(event, ui) {
$(e).val(ui.item.label);
},
classes: {
"ui-autocomplete": "highlight"
},
select: function(event, ui) {
$(e).val(ui.item.label);
$("input#UserName").val(ui.item.value);
}
});
}
}
},
{ name: 'Email', index: 'Email', width: 200, editable: true, editoptions: { size: 30 } },
{ name: 'StaffLevel', index: 'Active', width: 100, align: "center", editable: true, edittype: "select", editoptions: { value: "1:1;2:2;3:3" } },
{ name: 'UserType', index: 'Staff', width: 100, editable: true, formatter: UserTypeFormater, edittype: "select", editoptions: { value: " Admin:Admin;staff:staff" } },
{ name: 'action', index: 'action', sortable: false, formatter: sendPasswordFormater },
{ name: 'UserId', index: 'UserId', width: 100, editable: false, hidden: true }
],
shrinkToFit: false,
rowNum: 50,
recreateForm: false,
rowList: [10, 20, 30],
pager: '#userManagerPagenav',
sortname: 'id',
viewrecords: true,
caption: "User Manager",
multiselect: true,
width: 500,
height: 210,
hidegrid: false
});
function sendPasswordFormater(cellvalue, options, rowObject) {
var edit = "";
if (typeof (rowObject.UserId) !== "undefined") {
edit = "<input style='padding:5px' type='button' value='Send Password' onclick=\"GetPassword('" + options.rowId + "');\" />";
}
return edit;
}
data: mydata,
datatype: "local",
editurl: 'clientArray',
colNames: ['Name', 'User Name', 'Email', 'Staff Level', ' User Type', "Send Password", "User ID"],
colModel: [
{ name: 'Name', index: 'Name', width: 100, editable: true, editoptions: { readonly: false, size: 25 } },
{
name: 'UserName', index: 'UserName', width: 100, editable: true, editoptions: {
dataInit: function(e) {
$(e).autocomplete({
source: availableTags,
minLength: 1,
focus: function(event, ui) {
$(e).val(ui.item.label);
},
classes: {
"ui-autocomplete": "highlight"
},
select: function(event, ui) {
$(e).val(ui.item.label);
$("input#UserName").val(ui.item.value);
}
});
}
}
},
{ name: 'Email', index: 'Email', width: 200, editable: true, editoptions: { size: 30 } },
{ name: 'StaffLevel', index: 'Active', width: 100, align: "center", editable: true, edittype: "select", editoptions: { value: "1:1;2:2;3:3" } },
{ name: 'UserType', index: 'Staff', width: 100, editable: true, formatter: UserTypeFormater, edittype: "select", editoptions: { value: " Admin:Admin;staff:staff" } },
{ name: 'action', index: 'action', sortable: false, formatter: sendPasswordFormater },
{ name: 'UserId', index: 'UserId', width: 100, editable: false, hidden: true }
],
shrinkToFit: false,
rowNum: 50,
recreateForm: false,
rowList: [10, 20, 30],
pager: '#userManagerPagenav',
sortname: 'id',
viewrecords: true,
caption: "User Manager",
multiselect: true,
width: 500,
height: 210,
hidegrid: false
});
function sendPasswordFormater(cellvalue, options, rowObject) {
var edit = "";
if (typeof (rowObject.UserId) !== "undefined") {
edit = "<input style='padding:5px' type='button' value='Send Password' onclick=\"GetPassword('" + options.rowId + "');\" />";
}
return edit;
}
Comments