I am using a combogrid for load data to insert into datagrid. I call the insert data to datagrid in onSelect. Thats mean when i select any data or press down key to scroll all my data then those rows will be selected any inserted automatically . But i want to look through the rows but only when i press inter then the selected row will be inserted.
I am trying this by using KeyUp function. But this wont working.
This is my previous code:
Combogrid add to row
function combogridData() {
var g = $('#itemListGrid').combogrid('grid'); // get datagrid object
var r = g.datagrid('getSelected'); // get the selected row
$('#itemListGrid').keyup(function(e){
if(e.keyCode == 13)
{
addrowtogrid(r);
}
});
$('#itemListGrid').combogrid('clear');
}
My Combogrid :
<select id="itemListGrid" class="easyui-combogrid" style="width:100%" data-options="
panelWidth: 600,
loader: myloader,
mode: 'remote',
idField: 'book_id',
textField: 'name',
method: 'get',
value: '',
columns: [[
{field:'book_id',title:'Item ID',width:'7%'},
{field:'name',title:'Book Name',width:'48%'},
{field:'retail',title:'retail',width:'5%',align:'right',hidden:true},
{field:'local_sale',title:'local',width:'7%',align:'right'},
{field:'whole_sale',title:'Whole',width:'8%',align:'right'},
{field:'isbn',title:'ISBN',width:'15%'},
{field:'authors',title:'Authors',width:'15%'},
]],
fitColumns: true,
labelPosition: 'top',
onSelect:combogridData ">
I am trying by using this code :
function combogridData() {
var g = $('#itemListGrid').combogrid('grid'); // get datagrid object
var r = g.datagrid('getSelected'); // get the selected row
$('#itemListGrid').keyup(function(e){
if(e.keyCode == 13)
{
addrowtogrid(r);
}
});
$('#itemListGrid').combogrid('clear');
}
I got My Own solution.
don't need to add onSelect anymore.
Just added
$('#itemListGrid').combogrid('textbox').bind('keyup', function(e){
if (e.keyCode == 13){ // when press ENTER key, accept the inputed value.
var g = $('#itemListGrid').combogrid('grid'); //get the combogrid
var r = g.datagrid('getSelected'); //get selected value
addrowtogrid(r); //add to another datagrid
}
});
under JQuery document.ready().
It's working perfectly. Thanks.
Related
When using your own cell renderer for e.g. an action column - with links or buttons in it -, AgGridReact still triggers a onRowClicked event when you click on one of the links or buttons. event.stopPropagation and event.preventDefault do not help.
// list of rowActions ...
function RowActionsRenderer(props) {
let row = props.data;
return <div>{
rowActions.map((actionDef, index) =>
<Button onClick={(event) => {
event.stopPropagation();
event.preventDefault();
//_processAction(actionDef, row)
}}>{label(actionDef.name)}</Button>
)
}</div>;
}
Definition of cellRenderer:
// ...
columnDefs.push({
headerName: 'actions',
field: '-actions-',
width: 120,
sortable: false,
filter: false,
cellRenderer: 'rowActionsRenderer'
});
// ...
frameworkComponents: {
rowActionsRenderer: RowActionsRenderer
},
Registration of event listening:
onRowClicked={(row) => {
// always runs event when when clicked on button in the '-actions-' column !!!
}}
Now, how do you prevent onRowClicked being called when clicking anything in the '-actions-' column?
There are some rather complicated low level calls to the AgGrid api I like to avoid.
So my proposed solution would be:
First, do not listen to row clicks.
Second listen to cell clicks and filter out column id '-actions-'
onCellClicked={(cell) => {
if (cell.column.getColId() === '-actions-') {
return;
}
let row = cell.data;
// process row data ...
}
I'm preloading my table using PHP and then have processAjaxOnInit: false in my config. What happens is that the call to my Ajax url is still made and instead of appending rows to the table it wipes out the rows that are there. I'm assuming that it's still making the call to get the total number of rows. Can I set this on page load and completely bypass calling the Ajax url?
Thanks
.tablesorterPager({
container: $(".pager"),
ajaxUrl : '/documents_table_data.php?page={page}&size={size}&{filterList:filter}&{sortList:column}',
// use this option to manipulate and/or add additional parameters to the ajax url
customAjaxUrl: function(table, url) {
// manipulate the url string as you desire
//url += '&archive=<?php echo $_GET[archive] ?>&wor=<?php echo $_GET[wor] ?>';
// trigger a custom event; if you want
$(table).trigger('changingUrl', url);
// send the server the current page
return url;
},
ajaxError: null,
ajaxObject: {
dataType: 'json'
},
ajaxProcessing: function(data){
if (data && data.hasOwnProperty('rows')) {
var r, row, c, d = data.rows,
total = data.total_rows,
headers = data.headers,
rows = [],
len = d.length;
for ( r=0; r < len; r++ ) {
row = [];
for ( c in d[r] ) {
if (typeof(c) === "string") {
row.push(d[r][c]);
}
}
// is there a way to do that here when it pushes the row onto the array
// or perhaps there is another funtion you have implemented that will let me do that
rows.push(row);
}
return [ total, rows, headers ];
}
},
// Set this option to false if your table data is preloaded into the table, but you are still using ajax
processAjaxOnInit: false,
output: '{startRow} to {endRow} ({totalRows})',
updateArrows: true,
page: 0,
size: 10,
savePages: true,
storageKey: 'tablesorter-pager',
pageReset: 0,
fixedHeight: false,
removeRows: false,
countChildRows: false,
// css class names of pager arrows
cssNext : '.next', // next page arrow
cssPrev : '.prev', // previous page arrow
cssFirst : '.first', // go to first page arrow
cssLast : '.last', // go to last page arrow
cssGoto : '.gotoPage', // page select dropdown - select dropdown that set the "page" option
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes; see the "updateArrows" option
// (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled : 'disabled', // Note there is no period "." in front of this class name
cssErrorRow : 'tablesorter-errorRow' // error information row
});
I just added a pager option named initialRows (currently only available in the master branch). When processAjaxOnInit is false and this option is set, no initial ajax call to the server is done (demo):
$(function(){
$('table').tablesorter({
widgets: ['pager'],
widgetOptions : {
pager_processAjaxOnInit: false,
pager_initialRows: {
// these are both set to 50 initially
// the server can return different values
// and the output will update automatically
total: 50,
filtered: 50
},
// other ajax settings...
}
});
});
I've created an app using tabBar. I've created a separate search Window Containing a searchBar and a TableView to display the recent search items. Whenever the return event is fired a new window called searchresult.js opens up displaying the data searched. When I click on the back button it goes from searchresult.js-->searchpage.js, but the problem is the table for recent data gets updated in the database but it isn't showing on the table and I've to go to the main page and open the searchpage.js again to see the correct data... Pls help...Thanx in advance
I've used the following code: searchpage.js
//*** Search Field ***
var search = Titanium.UI.createSearchBar({
barColor:'#000',
showCancel:true,
height:43,
hintText:'Name of the part you want to search',
autocorrect:true,
top:0,
});
content.add(search);
//*** Table For Recent Search ***
var db = Titanium.Database.install('car.db','dbversion1');
var sql = db.execute ('SELECT * FROM search_history ORDER BY id DESC LIMIT 0, 10');
var data = [];
while (sql.isValidRow()){
var searchQuery = sql.fieldByName('search_query');
var selectedCategory = sql.fieldByName('selected_category');
var searchID = sql.fieldByName ('id');
data.push({title: searchQuery});
sql.next();
}
var searchTable = Titanium.UI.createTableView({
headerTitle:'RECENT SEARCH',
data: data,
});
Ti.API.info(searchTable.title);
content.add(searchTable);
//Search Action
search.addEventListener('blur', function(e) {
Titanium.API.info('search bar:blur received');
});
search.addEventListener('cancel', function(e) {
Titanium.API.info('search bar:cancel received');
search.blur();
});
search.addEventListener('return', function(e){
var insertSql = db.execute('INSERT INTO search_history (search_query, selected_category) VALUES ("' + search.value + '", 1)');
var win = Titanium.UI.createWindow({
backgroundColor:'#ffffff',
url:'searchresult.js',
title: 'Search Result',
searchValue: search.value
});
Ti.API.info(search.value);
search.blur();
Titanium.UI.currentTab.open(win, {animation:true});
});
// Back Button Action
bckButton.addEventListener('click', function(e){
if (Ti.Android){
win.close();
}else{
win.close({animated:true});
}
});
and searchresult.js
// *** Content ***
var content = Titanium.UI.createView({
backgroundColor:'#fff',
height:'100%',
width:'100%',
layout:'vertical'
});
wrapper.add(content);
var searchQuery = win.searchValue;
var db = Titanium.Database.install('car.db', 'dbversion1');
var sql = db.execute ("SELECT * FROM part_category WHERE part_name LIKE \'%"+ searchQuery +"%\'");
var data = [];
while(sql.isValidRow()){
var partName = sql.fieldByName ('part_name');
var partID = sql.fieldByName ('id');
data.push({title: partName, hasChild:true, id:partID, url:'partsubcategory.js'});
sql.next()
};
var resultTable = Titanium.UI.createTableView({
data : data,
});
content.add(resultTable);
// Back Button Action
bckButton.addEventListener('click', function(e){
if (Ti.Android){
win.close();
}else{
win.close({animated:true});
}
});
you should save the search results in a data structure and fire an event after the search is complete. Any other tables that you want to update should be listening for that event and update when it recieves the event.
I believe there is an example of this in the training documentation for tiBountyHunter
http://docs.appcelerator.com/titanium/latest/#!/guide/Event_Handling
I am getting tooltip on mouse hover by each row for current column but I am unable to get next column tooltip on continue hover on same row.
But I can get it if I hover on another row & again hover any column of the previous row by using:
listeners:{
'itemmouseenter': function (view, record, item, index, e, eOpts) {
var gridColums = view.getGridColumns();
var column = gridColums[e.getTarget(this.view.cellSelector).cellIndex];
Ext.fly(item).set({ 'data-qtip': 'Des:' + column.dataIndex });
}
}
Can anyone show me what I'm missing or point me in the right direction?
I have an easy one, using the renderer function:
{
xtype : 'gridcolumn',
dataIndex : 'status',
text : 'Status',
renderer : function(value, metadata) {
metadata.tdAttr = 'data-qtip="' + value + '"';
return value;
}
}
I was looking through this. I could manage to get the tool tip for each cell by doing something like this:
Ext.getCmp('DynamicDemandGrid').getView().on('render', function(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.cellSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
var gridColums = view.getGridColumns();
var column = gridColums[tip.triggerElement.cellIndex];
var val=view.getRecord(tip.triggerElement.parentNode).get(column.dataIndex);
tip.update(val);
}
}
});
});
Let me know if it helps
{
text: name,
width: 80,
dataIndex: dataIndex,
sortable: true,
listeners: {
afterrender: function ()
{
Ext.create('Ext.ToolTip',
{
target: this.getEl(),
anchor: direction | "top",
trackMouse: true,
html: this.text
});
}
}
}
I'm a begginer jQuery dev, and I'm using the jQuery UI dialog to show up properties of an object (whatever).
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Properties'
});
So this is the dialog, and let's say I have a FOR structure in which I add properties (p tags) and for some of those properties I want a button.
var dialogHtml = "";
var dialog_buttons = {};
for (var key in d.properties){
var str;
var str = '<p>' + something + '</p>';
if (condition){
dialog_buttons[key] = function()
{ functionName(key); };
}
dialogHtml = dialogHtml + str;
}
$dialog.dialog( "option", "buttons", dialog_buttons );
$dialog.dialog('open');
And somewhere else I have the function:
function functionName(key){
// something something
}
This is where I have the problem: the key variable that's passed to the function... when the button is called the key is the last value from the iteration.
Let's say we have keys 1, 2, 3, 4 then when the button is clicked, the key parameter will be 4.
I want when I click a button from the dialog, to know which button was pressed.
Can anybody help me?
Thanks!
Using the event data from the click event (see here)
$('#btn').click(function(e) {
functionName(e.target);
});
Explanation of Event.Target