$("#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
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
}]
}]
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.
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.
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?
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\">");