Jqgrid row height changes on mouseover - javascript

Here is my colNames:
colNames: ['', '<span class="ui-icon ui-icon-flag"></span>', 'NTPEP Number', 'Manufacturer', 'Product', 'Status','','Data', 'Actions'],
Here is my colModel:
colModel: [{ name: 'tc_id', index: 'tc_id', align: 'left', hidden: true, resizable: false, key: true },
{ name: 'Flag', index: 'Flag', width:30,align: 'left', resizable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= flag_" + rowObject[0] + " class='flag'><span class='ui-icon ui-icon-flag'></span></div>" } },
{ name: 'NTPEP_Number', index: 'NTPEP_Number', width: 150, align: 'left', resizable: false, formatter: fontColorFormat },
{ name: 'Manufacturer', index: 'Manufacturer', width: 200, align: 'left', resizable: false },
{ name: 'Product', index: 'Product', width: 150, align: 'left', resizable: false, formatter: fontColorFormat },
{ name: 'Status', index: 'Status', width: 80, align: 'left', resizable: false },
{ name: 'Locked_Flag', index: 'Locked_Flag', width: 30, align: 'left', resizable: false,formatter:lockedFlag},
{ name: 'Data', sortable: false, edittype: 'select', width: 70, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= action_" + rowObject[0] + " class='action'><div class='btn-group' id='actions'><div class='collapse navbar-collapse'><ul class='actions'><li class='dropdown'><a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a><ul class='dropdown-menu'><li><a href='#'>Product</a></li><li><a href='#'>Test</a></li></ul></li></ul></div></div><div class='clear'></div></div>"; }, resizable: false },
{ name: 'Actions', index: 'Actions', sortable: false, edittype: 'select', width: 85, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= action1_" + rowObject[0] + " class='action1'><div class='btn-group' id='actions'><div class='collapse navbar-collapse'><ul class='actions'><li class='dropdown'><a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a><ul class='dropdown-menu'><li><a href='#'>Product</a></li><li><a href='#'>Test</a></li></ul></li></ul></div></div><div class='clear'></div></div>"; }, resizable: false }],
rowNum: 20,
rowList: [2, 10, 20, 50], // page size dropdown
pager: jQuery('#pager_Alerts'),
pgbuttons: true,
viewrecords: true,
pagerpos: 'right',
recordpos: 'left',
shrinkToFit: false,
sortorder: "asc",
sortname: "tc_id",
loadtext: "Loading",
width: 795,
height: "100%",
hoverrows: false,
onCellSelect: function (rowid, iCol, cellcontent, e) {}
In Chrome,when i move the mouse over rows,row height increase automatically like as follow.
This is not desired behavior:
While in IE,it works fine ,just like normal jqgrid row.
Kindly tell me,what is the problem?Is it css problem or i am missing some property?

Related

After row saved call back in jqgrid

I need to able to tap into an event after row has been updated, I use inline editing. There is a beforeSend event in ajaxRowOptions but no matching after.
How do I implement an after save callback?
Here is my grid:
$('#myGrid').jqGrid({
datatype: 'local',
jsonReader: common.jqgrid.jsonReader('Code'),
editurl: common.getServerPath() + 'myAjax/updateSomething/',
ajaxRowOptions: {
beforeSend: function (jqXhr, settings) {
//something here
}
}
},
mtype: 'POST',
pager: '#myPager',
colNames: ['Method', 'Type', 'Package', 'Disc %'],
colModel: [
{
name: 'Code',
index: 'Code',
width: 25,
sortable: false
},
{
name: 'MethodType',
index: 'MethodType',
width: 10,
sortable: false,
align: 'center'
},
{
name: 'ProfNo',
index: 'ProfNo',
width: 15,
sortable: false,
align: 'center'
},
{
name: 'Discount',
index: 'Discount',
width: 15,
sortable: false,
edittype: 'text',
align: 'right',
editable: true,
editrules: {
number: false,
custom: true,
custom_func: validateDiscount
}
}],
scroll: true,
hidegrid: false,
altRows: true,
altclass: 'gridAltRowClass',
height: 330,
scrollOffset: 0,
width: 770,
rowNum: 500,
footerrow: true,
userDataOnFooter: true
});
and
validateDiscount: function (value) {
if (isNaN(value)) {
return [false, 'Discount must be a number.'];
}
else {
var numValue = parseFloat(Number(value).toFixed(2));
if (numValue >= 100.00) {
return [false, 'is not a valid value. Discount must be a number less than 100.'];
}
}
return [true, ''];
},

How to unchecked all checked checkbox upon loading of dialog box contain JQgrid?

Hello as title above I have a problem that when I checked my checkedbox name ( $("#divLeaveIsHalfDay").click(function () ) that call the dialog box to open and contains my JQgrid name LeaveHalfDay.
function LeaveHalfDay() {
var url1 = URL;
$("#LeaveHalfDayDataEntryList").jqGrid({
url: url1,
datatype: 'json',
mtype: 'POST',
colNames: ['RowId', 'With Halfday <br /> Morning', 'With Halfday <br /> Afternoon', 'Date', 'Day'],
colModel: [
{ name: 'rowId', index: 'rowId', hidden: true, editable: true, sortable: false, width: 80, align: 'left' },
{name: 'cbox_leave_half', index: 'cbox_leave_half', editable: true, formatter: cboxFormatterLeaveHalfDay, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'cbox_leave_halfPM', index: 'cbox_leave_halfPM', editable: true, formatter: cboxFormatterLeaveHalfDayPM, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'LStartDate', index: 'LStartDate', editable: false, sortable: false, width: 70, align: 'left' },
{ name: 'LDate', index: 'LDate', editable: false, sortable: false, width: 55, align: 'left' }
],
pager: $('#LeaveHalfDayDataEntryPager'),
rowNum: 5,
rowList: [5, 10, 20],
sortname: '',
sortorder: '',
viewrecords: true,
imgpath: '/Content/themes/redmond/images/',
height: '100%',
loadComplete: function (result, rowid) {
var ids = jQuery("#LeaveHalfDayDataEntryList").getDataIDs();
var len = ids.length, newLine;
if (len < 5) {
AddNewRowToGrid(len, "#LeaveHalfDayDataEntryList");
}
}
});
return false;
}
I want to unchecked all checked, checked boxes upon showing of my dialog box.
This are my checked boxes cbox_leave_half and cbox_leave_halfPM in my grid. Thanks.

Jquery flexigrid select check box by selecting the row

$("#rfqDetails").flexigrid({
dataType: 'json',
colModel: [
{ display: 'checkbox', name: '', width: 30, align: 'center' },
{ display: 'RfqNo', name: 'RfqNo', width: 80, sortable: false, align: 'center' },
{ display: 'PreferredSupplier', name: 'PreferredSupplier', width: 100, sortable: false, align: 'center' },
{ display: 'Status', name: 'Status', width: 80, sortable: false, align: 'center' },
{ display: 'Company', name: 'Company', width: 80, sortable: false, align: 'center' },
{ display: 'Edit', name: '', width: 80, sortable: false, align: 'center' },
{ display: 'View', name: '', width: 80, sortable: false, align: 'center' },
],
title: "RFQ Summary",
height: 320,
showToggleBtn: false,
singleSelect: false,
resizable: false
});
$('#rfqDetails').click(function ()
{
var selected = $('#rfqDetails .trSelected td:eq(0)');
$(selected).each(function ()
{
selected.attr('checked', 'checked')
});
});
The above is my code for flexigrid. In the first column I have the checkbox by selecting the row I have to select the checkbox and when deselecting the row the checkbox has to deselect.

Call Jquery grid inside a function

I have a jquery grid.
I want to change the data of jquery grid on dropdown change event.
So I need to call the jqgrid inside the change event.
below is my code
$("#ddlCategory").change(function () {
UserJqGrid();
GetMapDataOnChange();
});
The first function return a jqgrid and the 2nd function will return a map.
But only 1st time the jqgrid load.After that on change the dropdown list the data of the grid not updated.
my UserJqGrid() function is
$("#list").jqGrid({
url: "<?php echo base_url() ; ?>userController/GetUserGirdData?catIds=" + str + "&cityId=" + cityId,
datatype: 'json',
mtype: 'GET',
colNames: ['Object Id', 'Name', 'Longitute', 'Latitute', 'Country', 'City'],
colModel: [{
name: "id",
index: "id",
key: true,
width: 20,
editable: true,
key: true,
editoptions: {
readonly: true,
size: 10
}
}, {
name: "objName",
index: "objName",
width: 100,
editable: true
}, {
name: "longi",
index: "longi",
width: 30,
align: "left",
editable: true
}, {
name: "lati",
index: "lati",
width: 30,
align: "left",
editable: true
}, {
name: "countryName",
index: "countryName",
width: 50,
align: "left",
editable: true
}, {
name: "cityName",
index: "cityName",
width: 50,
align: "left",
sortable: false,
editable: true
}, ],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
width: 900,
gridview: true,
shrinkToFit: true,
//rownumbers: true,
height: 200,
caption: 'Shipping Method',
editurl: '../php/EditShipping.php'
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: false,
excel: false,
search: false
});
I solved my problem.
I call this reload event of grid.As the grid is already created so we don't need to call the whole function again.Just need to reload the grid with new data.
jQuery("#list")
.jqGrid('setGridParam',
{
url:"<?php echo base_url() ; ?>userController/GetUserGirdData?catIds=" + str + "&cityId=" +cityId,
datatype: 'json',
mtype: 'GET'
}).trigger("reloadGrid");

using JSON when trying to add checkboxes to each dynamic list item

I am trying to populate a row with a checkbox in front as it is dynamically built.
I am new to Json.
Here is where I dynamically format the columns:
while(reader.Read()) {
if(i>=startRead&&i<maxCount) {
var actionBtns=new StringBuilder("");
jsonWriter.WriteStartObject();
jsonWriter.WritePropertyName("id");
jsonWriter.WriteValue("a"+i);
jsonWriter.WritePropertyName("cell");
jsonWriter.WriteStartObject();
//trying to add checkboxes here but not sure what to put as Value????
//need help with this part: i want to add a checkbox here ----------------
jsonWriter.WritePropertyName("exhibitCheckBox");
jsonWriter.WritePropertyName("actionBtns");
jsonWriter.WriteValue(actionBtns.ToString());
jsonWriter.WritePropertyName("ExhibitMovementID");
jsonWriter.WriteValue(reader["ExhibitMovementID"].ToString());
jsonWriter.WritePropertyName("Location");
jsonWriter.WriteValue(reader["Location"].ToString());
jsonWriter.WritePropertyName("TrackingNumber");
jsonWriter.WriteValue(reader["TrackingNumber"].ToString());
jsonWriter.WritePropertyName("MovedBy");
jsonWriter.WriteValue(reader["MovedBy"].ToString());
jsonWriter.WritePropertyName("ShipperName");
jsonWriter.WriteValue(reader["ShipperName"].ToString());
jsonWriter.WritePropertyName("ReceiverName");
jsonWriter.WriteValue(reader["ReceiverName"].ToString());
jsonWriter.WritePropertyName("Company");
jsonWriter.WriteValue(reader["Company"].ToString());
jsonWriter.WritePropertyName("Reason");
jsonWriter.WriteValue(reader["Reason"].ToString());
jsonWriter.WriteEndObject();
jsonWriter.WriteEndObject();
sb.Append(",");
}
my checkbox in my javascript is called "exhibitCheckBox"
:
$('#viewExhibitMoveHistoryGrid').flexigrid({
url: url,
dataType: 'json',
method: 'get',
colModel: [
//{ display: 'Actions', name: 'actionBtns', width: 50, sortable: true, align: 'center' },
{display: '<input type="checkbox" class="exhibitCheckBox" id="checkAllExhibits" />', name: 'checkbox', width: 20, sortable: false, align: 'left', process: caseFileRowSelected },
{ display: 'Move ID', name: 'ExhibitMovementID', width: 100, sortable: true, hide: false, align: 'center' },
{ display: 'Reason', name: 'Reason', width: 120, sortable: true, align: 'center' },
{ display: 'Moved By', name: 'MovedBy', width: 120, sortable: true, align: 'center' },
{ display: 'Moved To', name: 'ExhibitLocation', width: 120, sortable: true, align: 'center' },
{ display: 'Date', name: 'ExhibitMoveDate', width: 100, sortable: true, align: 'center' },
{ display: 'Time', name: 'ExhibitMoveTime', width: 100, sortable: true, align: 'center' },
{ display: 'Receiver', name: 'ReceiverName', width: 120, sortable: true, align: 'center' },
{ display: 'Company', name: 'Company', width:120, sortable: true, align: 'center' },
{ display: 'Shipper', name: 'ShipperName', width: 120, sortable: true, align: 'center' },
{ display: 'Tracking #', name: 'TrackingNumber', width: 120, sortable: true, align: 'center' },
{ display: 'Cost', name: 'ShippingCost', width: 120, sortable: true, align: 'center' }
],
figured it out:
jsonWriter.WritePropertyName("checkbox");
jsonWriter.WriteValue("<input class=\"exhibitMoveCheckBox\" id=\"exhibitMoveCheckBox_"+reader["ExhibitID"].ToString()+"\" type=\"checkbox\">");

Categories