Jquery flexigrid select check box by selecting the row - javascript

$("#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.

Related

ExtJS4 - Grid columns not filling up screen

I have a multi-header grid that is not filling up the screen on load. Only a few of the columns have set widths but the rest are flex.
Header 1 should take up about a third of the screen while Header 2 should expand the rest. Is there a better way to dynamically size the grid?
fiddle
Columns
columns: [Ext.create('Ext.grid.RowNumberer'), {
header: 'Header 1',
flex: 1,
columns: [{
header: 'Asset Name',
//maxWidth: 200,
menuDisabled: false,
flex: 1,
sortable: true
}, {
header: 'State',
menuDisabled: false,
sortable: true
//width: 150
}]
}, {
header: 'Header 2',
flex: 1,
columns: [{
header: 'Application',
//width: 250,
flex: 2,
menuDisabled: false,
sortable: true
}, {
header: 'Account name',
//width: 150,
flex: 1,
menuDisabled: false,
sortable: true
}, {
header: 'Type',
//width: 75,
menuDisabled: false,
sortable: true,
flex: 1
}, {
header: 'Status',
menuDisabled: false,
sortable: true,
//width: 100,
flex: 1
}, {
header: 'Access',
menuDisabled: false,
sortable: true,
//width: 150,
flex: 1
}, {
header: 'Category',
menuDisabled: false,
sortable: true,
//width: 100,
flex: 1
}, {
header: 'Classification',
menuDisabled: false,
sortable: true,
//width: 150,
// flex: 1
}, {
header: 'Test',
menuDisabled: false,
sortable: true,
//width: 50
flex: 1
}, {
header: 'Owner',
menuDisabled: false,
sortable: true,
//width: 150,
flex: 1
}, {
header: 'Progress',
menuDisabled: false,
sortable: true,
//width: 150,
flex: 1
}]
}]

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.

Why does BootstrapTable work just once?

I'm making a webApp and in one screen there are two tables, the first one for the categories I store on a DB and the second for the elements that belong to those categories. Both are BootstrapTable. What I'm trying to do is that when the user clicks on a row of the first table, the items of that category will load in the second table, and I managed to do so but it just works once. If I click on the first table then the second fills up, but if i click again over any other element of the first table nothing happens. I even used console.log to see if the event works and it does, before and after the table "reload".
function getProductos(Categoria) {
var id_cat=Categoria||iSeldCat;
$('div#tableProds').bootstrapTable({
url: '../../../controllers/classproductos?getProductos=-&categoria='+id_cat,
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
console.log(id_cat + " Print");
}
When running that code, I get in my console 1 Print, 3 Print and son on, but the table just doesn't do anything.
This is the first table, including the event which as I said before, works everytime:
function getCategorias(){
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
}
Any idea what it could be?
This approach of bootstrapping the table again should be avoided. Handle this in the following way.
On document ready
$(document.ready(function() {
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
$('div#tableProds').bootstrapTable({
data: [],
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
}
On selection of item
function getProductos(iSeldCat) {
$('div#tableProds').bootstrapTable('refresh', {url: "../../../controllers/classproductos?getProductos=-&categoria=" + iSeldCat});
}
I have not tested this code functionality. But this should be the approach. You may refer Bootstrap Table documentation for property and method call details.

Jqgrid row height changes on mouseover

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?

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