I have a query that returns all the column titles in a table.
I want to populate the values box labels for each checkbox in my group with the values returned from the query. the id node will be the value and the text node will be the checkbox label.
The query is initiated by the ActionName in the store load event.
Here is my code
{
xtype : 'checkboxgroup',
fieldLabel : 'Column Names',
id : 'chkColumnNames',
itemId : 'chkColumnNames',
cls : 'x-check-group-alt',
// Distribute controls across 5 even columns, filling each row
// from left to right before starting the next row
columns: 5,
store : Ext.create('Ext.data.Store', {
model : 'Personnel.ART.String.ChoiceList',
autoLoad : true,
sorters: [{
property: 'text',
direction: 'ASC'
}],
proxy : {
type : 'ajax',
url : IXYZ.portal.path + 'IXYZDBService.asmx/jsonSQLActions',
actionMethods : {read : 'POST'},
extraParams : {
AppAcronym : IXYZ.application.acronym,
WFAcronym : IXYZ.workflow.acronym,
Process_id : -1,
ActionName : 'ART.SELECT.ADHOC.COMBINED_PERSONNEL.COLUMN.NAMES',
suppressLog : true,
tokenProcessing : 'False'
},
reader : {type : 'xml', record : 'row'}
},
listeners : {
load: function(store, records, successful) {
columnNamesCheckbox = Ext.getCmp('chkColumnNames');
var columnNameItems = [];
for(var i = 0; i < records.length; i++) {
columnNameItems.push({id: records[i].data.id, boxLabel: records[i].data.text});
}
}
}
}),
items: [
]
}
Here is the xml from the query
<row id="PersonnelID" text="PersonnelID" />
<row id="UserID" text="UserID" />
<row id="FirstName" text="FirstName" />
<row id="LastName" text="LastName" />
<row id="MiddleName" text="MiddleName" />
<row id="PreferredName" text="PreferredName" />
<row id="HomePhone" text="HomePhone" />
<row id="WorkEmail" text="WorkEmail" />
<row id="bActing" text="bActing" />
<row id="HomeAddress" text="HomeAddress" />
<row id="GSLevel" text="GSLevel" />
Here is what worked for me.I referenced the checkbox group by id since I was running code from the store then looped through the records and used checkboxgroup.add to populate the checkbox group
{
xtype : 'checkboxgroup',
fieldLabel : 'Column Names',
id : 'chkColumnNames',
itemId : 'chkColumnNames',
cls : 'x-check-group-alt',
// Distribute controls across 5 even columns, filling each row
// from left to right before starting the next row
columns: 5,
store : Ext.create('Ext.data.Store', {
model : 'Personnel.ART.String.ChoiceList',
autoLoad : true,
sorters: [{
property: 'text',
direction: 'ASC'
}],
proxy : {
type : 'ajax',
url : ICWF.portal.path + 'ICWFDBService.asmx/jsonSQLActions',
actionMethods : {read : 'POST'},
extraParams : {
AppAcronym : ICWF.application.acronym,
WFAcronym : ICWF.workflow.acronym,
Process_id : -1,
ActionName : 'ART.SELECT.ADHOC.COMBINED_PERSONNEL.COLUMN.NAMES',
suppressLog : true,
tokenProcessing : 'False'
},
reader : {type : 'xml', record : 'row'}
},
listeners : {
load: function(store, records, successful) {
var checkboxgroup = Ext.getCmp('chkColumnNames');
for(var i = 0; i < records.length; i++) {
//ICWF.reports.itemArray.push({id: records[i].data.id, boxLabel: records[i].data.text});
checkboxgroup.add({
xtype: 'checkbox',
inputValue: records[i].data.id,
boxLabel: records[i].data.text,
//checked: rec.get(cField),
//name: 'fName'
});
}
debugger;
}
}
}),
items: []
}
Related
Hi I'm trying to create a table that consists of checkboxes. And each row has its own class and ID.
$('#niisPrprtyCoverageTable').dataTable({
"data" : coverageList,
"columns" : [ {
"data" : "seqNo",
"visible" : false
}, {
"data" : "coverageCode"
}, {
"data" : "coverageName"
}, {
"data" : "coverageCode",
"width" : "80px",
"className" : "text-center",
render : function(data, type, row) {
var arrData = data.split(";");
var coverageCd = arrData[0];
var coverageRel = nvl(arrData[1], coverageCd);
data = '<input class="'+coverageRel+'" id="'+coverageCd+'" type="checkbox" onClick="addToArray('
+ coverageCd
+ ','
+ coverageRel
+ ')">';
return data;
}
} ],
"searching" : false,
"bLengthChange" : false,
"iDisplayLength" : 15 ,
"bSort" : false,
"columnDefs" : [ {
"targets" : [ 1, 2 ],
"className" : "left"
}, {
"targets" : [ 2 ],
"width" : "150px",
}, {
"targets" : [ 1 ],
"width" : "100px",
}, {
"targets" : [ 3 ],
"width" : "50px",
"className" : "text-center"
} ]
});
niisPrptyCoverageTable = $('#niisPrprtyCoverageTable').DataTable();
$('#select-all').on('click', function(){
alert('ss');
// Get all rows with search applied
var rows = niisPrptyCoverageTable.rows({ 'search': 'applied' }).nodes();
// Check/uncheck checkboxes for all rows in the table
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
What should happen is, if I check the main row, all the rows under his 'code or id' should be checked also.
It works but only on the first page
but doesn't work on the second page of the datatable
var array = [];
function addToArray(coverageCd, coverageRel) {
var rows = niisPrptyCoverageTable.rows('.'+coverageRel).nodes().className;
$('input[class='+coverageCd+']', rows).prop('checked', '#'+coverageCd.checked);
}
Use $() API method to get access to elements on all pages, not just current page.
For example:
var array = [];
function addToArray(coverageCd, coverageRel) {
var rows = niisPrptyCoverageTable.rows('.'+coverageRel).nodes().className;
niisPrptyCoverageTable.$('input[class='+coverageCd+']', rows).prop('checked', '#'+coverageCd.checked);
}
Alternatively see jQuery DataTables Checkboxes extension for easier handling of checkboxes in a table powered by jQuery DataTables.
I have 100 rows of data, i want to remove selected data based on ID and add new row for that ID. I want to edit the rows based on ID.
Here is my code:
oCustomization : {
sExportFunctionCall : oMapUrls.exportLiveFleetReport,
bAdvanceExport : true,
bShowDefaultAll : !bLivePaginate
},
pageLength : !bLivePaginate ? -1 : Global.rowLength,
scrollCollapse : false,
scrollY : iDataTableHeight,
serverSide : bLivePaginate,
order : [ [ 3, "desc" ] ],
columns : [
{
"data" : "trackeeName",
"width" : aColumnWidths[0],
"class" : "no-word-break",
"settings" : {
source : function(request, oCallback) {
oCallback($.ui.autocomplete.filter(Global.aJSTreeVehicleItems || [], request.term));
}
},
"render" : function(value, type, rowData) {
//Some code here
}
},
{
"data" : "firstName",
"width" : aColumnWidths[1],
"class" : "no-word-break",
settings : {
source : Global.getDriverSuggestion
},
"title" : jQuery.i18n.prop("driver.title.txtInfo"),
"visible" : Global['show.driver.in.reports'] == 1,
"render" : function(value, type, rowData) {
return getUserName(rowData.firstName, rowData.lastName);
}
},
{
"data" : "groupName",
"width" : aColumnWidths[2],
"class" : "no-word-break",
"settings" : {
source : function(request, oCallback) {
oCallback($.ui.autocomplete.filter(Global.aJSTreeGroupItems || [], request.term));
}
},
"title" : jQuery.i18n.prop("vehicle.col2label")
},
{
"data" : "dateAndTime",
"width" : aColumnWidths[3],
"searchable" : !bLivePaginate,
"class" : "wordBreak",
"title" : jQuery.i18n.prop("report.columnTitle.date"),
"render" : function(value, type, rowData) {
if (type == "display") {
return rowData.formattedDate;
}
return value;
}
}
I get data in JSON format. I want to remove selected rows , it should not affect other rows data.
Simply use WHERE
DELETE FROM DBNAME WHERE ID=XXX
then Insert into the table with that ID
however, if you want to delete and insert together always, an UPDATE query will work better
I am using Kendo grid. I want to get the value(field-nlv_id) for the multiple row selected if select the rows. Also i want to get the number of selected rows and pass to the controller. Let me know the way to do it.
columns : [
{
'field' : 'nlv_id',
'title' : 'Asset ID'
},
{
'field' : 'due_date',
'title' : 'Partner Due Date'
},
{
'field' : 'link',
'title' : 'Partner'
},
{
'field' : 'playlist_type',
'title' : 'Playlist Style'
},
{
'field' : 'show_code',
'title' : 'Show Code'
},
{
'field' : 'status',
'title' : 'Status'
},
{
'field' : 'retry_count',
'title' : '# Retries'
}
],
scrollable : false,
pageable : {
pageSizes : [ 10, 25, 50 ],
buttonCount : 5,
refresh : true,
messages : {
display : "{0} - {1} of {2} assets",
itemsPerPage : "assets per page",
empty : "No assets to display"
}
},
dataSource : new kendo.data.DataSource({
serverPaging : true,
transport : {
read : getJobs
},
pageSize : 10,
schema : {
total : returnTotalCount
}
}),
selectable : 'multiple',
sortable : true
};
You will need to do an change() event on grid, then you will have selected items, for convinience i did an example using an list with all selected items, so you can easily get numbers of rows selected.
change: function (e, args) {
var currentSelected = this.select();
var dataSource = $grid.dataSource.data();
currentItems = [];
$.map(currentSelected, function (item) {
currentItems.push($grid.dataItem(item).nlv_id) ;
return $grid.dataItem(item).nlv_id;
});
alert(currentItems);
},
You can get count like that
currentItems.length;
EDIT: For convinience i create an example to do, is easier.
Important: you must set you 'nlv_id' in Schema!
http://jsfiddle.net/2ojwwpLf/
hope this help
I'm working with slickgrid in my webpage, the problem I'm getting while using it that I'm unable to see the data in the grid. While when I try to get the data through grid object (i.e. grid.getData();) , I can get the whole data which I have previously set in the grid but don't know why its not showing up. May be I'm missing some thing.
following is my code for drawing the grid.
HTML code:
<div id="myGrid" width="100%"; height="500px"></div>
JS code:
drawBlotterForOrders : function(data){
try{
var columns = this.getBlotterColumns();
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
var dataArray = [];
dataArray = self.setDataInGrid(data);
gridObj = new Slick.Grid("#myGrid" , dataArray , columns , options);
console.log(gridObj.getData());//here I'm able to get the data
}catch(exp){
}
},
setDataInGrid : function(data){
try{
var dataArray = [];
i++;
dataArray[0] = {
id : i,
clOrdId : data.clOrdId,
cumQty : data.cumQty,
execId : data.execId,
execType : data.execType,
leavesQty : data.leavesQty,
ordStatus : data.ordStatus,
orderId : data.orderId,
orderQty : data.orderQty,
side : data.side,
symbol : data.symbol
};
return dataArray;
}catch(exp){
}
},
getBlotterColumns : function(){
var col = [
{ id: 'id',
name : 'id',
field : 'id'
},{
id: 'clOrdId',
name : 'clOrdId',
field : 'clOrdId'
},{
id: 'cumQty',
name : 'cumQty',
field : 'cumQty'
},{
id: 'execId',
name : 'execId',
field : 'execId'
},{
id: 'execType',
name : 'execType',
field : 'execType'
},{
id: 'leavesQty',
name : 'leavesQty',
field : 'leavesQty'
},{
id: 'ordStatus',
name : 'ordStatus',
field : 'ordStatus'
},{
id: 'orderId',
name : 'orderId',
field : 'orderId'
},{
id: 'orderQty',
name : 'orderQty',
field : 'orderQty'
},{
id: 'side',
name : 'side' ,
field : 'side'
},{
id: 'symbol',
name : 'symbol',
field : 'symbol'
}
];
return col;
}
I'm unable to detect the mistake I'm making. I'll be really thankful for any help.
You forgot to render the grid I think, did you put a grid.render() ?
I have a check box model grid which is loaded from JsonStore.
var drop_pick_grid = new Ext.grid.GridPanel({
store : dropPickGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170,
renderer : function(value, metaData, record, rowIndex,
colIndex, store) {
var refColor = record.data.tourTypeColor;
//console.log(record);
metaData.attr = 'style="background-color:' + refColor + ';"';
return record.get('locationName');
}
}, {
header : "Town/City",
sortable : true,
dataIndex : 'city',
width : 120
}, {
header : "Address",
sortable : true,
dataIndex : 'addr',
width : 170
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
} ]),
sm : new Ext.grid.CheckboxSelectionModel(),
//width : 570,
//height : 390,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});
This is my dropPickGridStore:
var dropPickGridStore = new Ext.data.JsonStore({
fields : [ {
name : 'locationCode'
}, {
name : 'locationName'
}, {
name : 'city'
}, {
name : 'addr'
}, {
name : 'estimatedTime'
}, {
name : 'tourTypeColor'
} ],
root : 'dropPickLoc',
idProperty : 'locationCode',
//autoDestroy : true,
autoLoad : true,
proxy : new Ext.data.HttpProxy({
url : "http://" + host + ":" + port + "/" + projectName + "/"
+ "PendingDropPicks"
}),
reader : {
type : 'json',
root : 'dropPickLoc'
//idProperty : 'locationName',
},
});
My Json data is like this.
{'dropPickLoc':[{ 'locationCode' : '10007', 'locationName' : 'Gayan Hardware', 'city' : 'Galle', 'addr' : '121, Wijaya Rd, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10004', 'locationName' : 'Kandy Hardware', 'city' : 'Kandy', 'addr' : '11, Kurunagala Road, Kandy', 'estimatedTime' : '40', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10009', 'locationName' : 'Mala Stores', 'city' : 'Colombo', 'addr' : '11B, Thimbirigasyaya, Colombo', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10003', 'locationName' : 'Namal Ceramic', 'city' : 'Kurunagala', 'addr' : '12B, Lumbini Udyanaya, Kurinagala', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10000', 'locationName' : 'Priya Ceramic', 'city' : 'Nugegoda', 'addr' : '15, Nugegoda', 'estimatedTime' : '40', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10002', 'locationName' : 'Sam Stores', 'city' : 'Galle', 'addr' : '46A, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationCode' : '10008', 'locationName' : 'Saman Stores', 'city' : 'Polgahawela', 'addr' : '111, Kurunagala Rd, Kurunagala', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10006', 'locationName' : 'Sell-X Computors', 'city' : 'Ratnapura', 'addr' : '12, Tiriwanakatiya, Ratnapura', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationCode' : '10001', 'locationName' : 'Super Stores', 'city' : 'Kandy', 'addr' : '16, Kandy Road', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10005', 'locationName' : 'Wijesingha Hardware', 'city' : 'Galle', 'addr' : '113A, Wackewella Road, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } ]}
User can select items from this grid and move them into another grid(on button click). Here is my second grid pane;.
var gps_grid = new Ext.grid.GridPanel({
store : estore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170
}, {
header : "GPS",
sortable : true,
dataIndex : 'gps',
width : 100
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
}, {
header : "",
sortable : true,
dataIndex : 'colorCode',
width : 30
} ]),
sm : selectModel,
//width : 435,
//height : 400,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});
This is my attempt to move selected items to second grid panel.
This is a listener for my button.
listeners: {
click: function(){
if (drop_pick_grid.getSelectionModel().hasSelection()) {
selectedItems = drop_pick_grid.getSelectionModel().getSelections();
console.log(selectedItems);
var myReader = new Ext.data.ArrayReader({}, [{
name: 'locationName',
dataIndex: 'locationName'
}, {
name: 'estimatedTime',
dataIndex: 'estimatedTime'
} ]);
var gpsGridStore = new Ext.data.Store({
data : selectedItems,
reader : myReader,
autoLoad : true
});
console.log(gpsGridStore);
}
}
}
I tried to create a new store for my second grid (gpsGridStore) with selected items from the first grid panel. I lete it to print in my firebug console. But gpsGridStore items are empty. i.e. locationName and estimatedTime take empty values.
data
Object { locationName="", estimatedTime=""}
estimatedTime
""
locationName
""
And this the console output for selectedItems:
data
Object { locationCode="10000", locationName="Priya Ceramic", city="Nugegoda", more...}
addr
"15, Nugegoda"
city
"Nugegoda"
estimatedTime
"40"
locationCode
"10000"
locationName
"Priya Ceramic"
tourTypeColor
"yellow"
What's wrong with my codes ? I would be much appreciated if anyone please be so kind enough to explain whats the error in my codes and how can I fix it.
Thanx a lot
Don't create another store, just remove the selected records from the store of the first grid, and add them to the store of your second grid. The view will be updated automatically, following data changes.
Here's what the code of your button listener should look like:
var records = dropPickGrid.selModel.getSelections();
dropPickGrid.getStore().remove(records);
gpsGrid.getStore().add(records);
If your second grid uses a different model (i.e. different store fields), you can create new records from the selection instead of using the same ones. But still, you should not try to change the store of the grid. Work with records.
For complex examples like yours, putting everything in a running fiddle will help get fast and quality answers from here ;)