I am using jqgrid, and added one subgrid inside it, which looks like as below,
As you can see,
Rows with columns having 11 and 13 are main grid rows
And every row has subgrid having interest,
The Add Record element shows Add Pop up for Subgrid
Here is the code for subgrid looks like,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"shops?q=2&ShopID="+row_id,
datatype: "xml",
colNames: ['Interest'],
colModel: [
//{name:"Id",index:"ShopID",width:80,editable:false,editoptions:{readonly:false,size:40}}, //Shop ID not required
{name:"id",index:"id",editable:true,edittype:"select",editoptions:{dataUrl:'shops?q=3&ShopID='+row_id},editrules:{required:true}}
],
rowNum:10,
pager: pager_id,
width: '100%',
height: '100%',
scrollOffset: 0,
sortname: 'num',
sortorder: "asc",
height: '100%',
editurl:'shops?q=5&ShopID='+row_id
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:true})
},
subGridRowColapsed: function(subgrid_id, row_id) {
// this function is called before removing the data
//var subgrid_table_id;
//subgrid_table_id = subgrid_id+"_t";
//jQuery("#"+subgrid_table_id).remove();
}
Problem is , when there are more than one element in subgrid, i can select that (I use latest version of Chrome) but when there is only single element in subgrid surprisingly I can select it ( if you notice the color difference please see subgrid element 'Gifts' -selected below row 13 ) and once select that 'Gifts' can be deleted.
UPDATE:
In firefox and IE , only first row gets selected from subgrid
Is there something wrong in the code ? why can't i select single element when there are more than one elements in subgrid ?
Appreciate your time, thanks
I suppose that you have problem with id duplicates. HTML don't allow to use id attributes on the same HTML pages with the same values. The values of all id attributes must be unique. I recommend you to verify that you have the problem by usage of Developer Tools of Chrome/IE or using Firebug. You need just examine the id attributes which you have now on <tr> elements of grid and subgrids.
On the other side all rows (all <tr> elements) of jqGrid become an id attribute assigned. Typically you have to fill id in the server side in the response of url. The problem is that one use typically the values from id from the database, but you have typically unique id only over one table of the database and not over all tables on the database. So you can easy have the scenario where multiple jqGrids (or grid with subrird) get rows with id duplicates.
The most easy way to fix the problem is to use idPrefix option which was introduced in jqGrid after my suggestion. The main advantage is that you can continue to use the original id values which you have in the database and use id attributes in jqGrid which will be unique because of building id attributes from the id values returned from the server, but with the usage of prefixes. In the answer. So I recommend you to use different idPrefixes for all subgrids. For example you can use idPrefix: 's' + row_id + '_' in subgrid (see the answer and this one).
Related
I'm using a webix treetable with data loading from a server url with pagination.
Server url loads 100 records per page with total_count as say 1000.
It works fine so far.
But if I apply grouping on a column, it's throwing error. When I debug I understood that it's failing because it's trying to process 1000 records (based on the total_count) where as there are only 100 records loaded so far and throwing an error.
Is it possible to have grouping + remote pagination together on webix treetable.
Please check the sample code I'm using -
webix.ready(function () {
var gridColumns = [{
// ...
}];
var grid = webix.ui({
container: "testA",
view: "treetable",
columns: gridColumns,
url: "server-url.php"
scheme: {
$group: gridColumns[0].id
},
datafetch: 100,
pager: {
container: "paging_here",// the container where the pager controls will be placed into
size: 100, // the number of records per a page
group: 5 // the number of pages in the pager
}
});
});
and the html is
<div id="testA" style='width:1200px; height:600px;'></div>
<div id="paging_here"></div>
It will not work, unfortunately.
The grouping requires that all data is available on the client side, which means it doesn't compatible with dynamic loading.
If you have up to few thousands of records, you an try to load all data at once. Except the extra bandwidth, it will not have a negative impact on the performance.
I have a trouble about hiding columns in a Grid at runtime.
In a project I use a function that returns the configuration of a column in a Grid.
For take the list of my columns in the Grid I use this piece of code:
var cmV = cmpGrid.getView();
var cmH = cmV.getHeaderCt();
var cm = cmH.getGridColumns();
The variable "cm" returns an array with the configured columns in the grid.
When I manually hide a column with the "column" option in the header Grid with ExtJS version 3.4.1 I can get the property
hidden:true
for the configured column.
But with ExtJS 6 the configured column doesn't include this property.
How I can resolve this issue?
Thanks at all in advance,
Lorenzo.
**
UPDATE
**
I have discovered this about my previous question.
With
var cm = cmH.getGridColumns();
I can get the array of the columns in the grid.
Analyzing this array with Firebug I had found the subarray "config" that contains the properties required by the columns for the configuration.
However now this array doesn't reflect more the changed configuration of a column but the default configuration applied.
My first question is if this new behavior is a bug or not.
Because I have found this new behavior I have changed my code to get the properties of a column not from the subarray config but from the radix. However now the possible configurations are so much.
Now my second question is if there is a way to reduce or to have only the principal properties for type of columns in a grid.
Why not just use grid.columns[index].setHidden(true) ?
Or if you want to take the list of columns, how about reconfigure columns.
var tempColumns = [];
// "cm" returns an array with the configured columns in the grid
cm.forEach(function(e) {
if (some conditions) {
tempColumns.push({
xtype: e.xtype,
text: e.text,
dataIndex: e.dataIndex,
hidden: true,
width: e.width,
align: e.align,
format: e.format
});
}
else{
tempColumns.push({
xtype: e.xtype,
text: e.text,
dataIndex: e.dataIndex,
hidden: e.hidden,
width: e.width,
align: e.align,
format: e.format
});
}
});
grid.reconfigre(null, tempColumns);
https://fiddle.sencha.com/#fiddle/17lq
I have a custom controller in SQLFORM.grid and I am using links. The problem is (so it appears) that since I am using left join there when my custom function works, edit and view do not work.
So my links is the following
links = [lambda row: A('',_class='glyphicon glyphicon glyphicon-remove-sign',
callback=URL('settings','deactivate',vars=dict(table='workers_skills',field = 'ws_status'
,value = row.workers_skills.id )))]
my grid constructor
grid_workersskills= SQLFORM.grid(query=query,left=[db.workers.on(db.workers_skills.ws_worker==db.workers.id),
db.skills.on(db.workers_skills.ws_skill==db.skills.id)],
fields=fields, searchable=False, orderby=[db.workers.w_nick_name],create=True,
deletable=False, editable=True, paginate=50, buttons_placement = 'right',
showbuttontext = False,
links = links,
#oncreate=myfunction,
ui = dict(widget='',
header='',
content='',
default='',
cornerall='',
cornertop='',
cornerbottom='',
button='button btn btn-default',
buttontext='buttontext button',
buttonadd='icon plus icon-plus glyphicon glyphicon-plus',
buttonback='icon leftarrow icon-arrow-left glyphicon glyphicon-arrow-left',
buttonexport='icon downarrow icon-download glyphicon glyphicon-download',
buttondelete='icon trash icon-trash glyphicon glyphicon-trash',
buttonedit='icon pen icon-pencil glyphicon glyphicon-pencil',
buttontable='icon rightarrow icon-arrow-right glyphicon glyphicon-arrow-right',
buttonview='icon magnifier icon-zoom-in glyphicon glyphicon-eye-open',
),
exportclasses = dict(csv_with_hidden_cols=False, html = False, tsv = False, tsv_with_hidden_cols=False, json = False))
the problem is caused by row.workers_skills.id
If i keep it this way my function deactivate works ok, but when I click on edit or view of the record I get an error
Row attribute has no object workers_skills
If I put it to row.id the view and edit work, but my deactivate function not because ID or the record is not created.
I have been struggling with this for the last week. Please help
Thank you
When the grid involves a join, you must refer to fields within a row via the row.table.field format. However, when you view/edit a record from such a grid, only the record from a single table is shown (i.e., there is no longer a join involved), so you must now refer to fields within a row via the row.field format. Because your "link" appears in the grid as well as in the view/edit page, whichever format you use to refer to the id field, it will result in an error in one of those two contexts.
So, all you need to do is ensure your code works in both contexts. Here's a simple trick:
Instead of:
row.workers_skills.id
do:
row.get('workers_skills', row).id
The .get() method attempts to retrieves the 'workers_skills' key, but if it doesn't exist, it instead returns a default value, which in this case is just the original row. It then retrieves the "id" field of that returned object (either the original row or the row.workers_skills sub-row).
I'm using the JQuery tablesorter plugin and I"m trying to sort a filter select list (alphabetically).
The column has full names of people with their titles and I only want to sort by last name. In addition I want the select field to filter those names and display the full name alphabetically in the drop down.
So far, I have the data parsed by textExtraction and the sort works. I set filter_useParsedData to true, but it is only showing the extracted text (last name) in the select field.
$('table').tablesorter({
theme: 'blue',
textExtraction: {
0: function(node, table, cellIndex){ return $(node).find("lname").text(); }},
widgets: ['columns', 'filter', 'stickyHeaders', 'zebra'],
widgetOptions : {
filter_useParsedData : true, }
});
Here is a demo of the table http://jsfiddle.net/UwKge/.
Anyway this can work?
wasted my day while searching how to get selected options values in JQuery UI widget by Michael Aufreiter. Here's the link to his demo site and github: http://quasipartikel.at/multiselect/
As a result I just need value fields of selected options without POST/GET sendings to PHP script.
I tried many methods and resultless.
Need your help and ideas
*Found many topics about jquery ui multiselect but useless because of Aufreiter :s *
That should work. Tested with Chrome console
$("#countries").val();
I went to the site you've got listed above, and was able to run this in my chrome console:
$('.ui-multiselect .selected li').each(function(idx,el){ console.log(el.title); });
It seems like the values you want are stored in the title attributes of the list items within the div.selected element.
Edit:
Doh! Well of course you want the values. Sorry mate. Completely missed that. The real goods are stored in the jQuery data() objects. In this case, the key you want is 'optionLink'. It maintains a reference to an option element. Each list item in the '.selected' div used the jQuery.data() method to add the underlying option to it.
So, you need to get the selected list items, iterate through, grab the 'optionLink' from the data jQuery data store, and then get the value.
The following code works on the example page:
$('.ui-multiselect .selected li').each(function(idx,el){
console.log(el);
var link = $(el).data('optionLink');
// link now points to a jQuery wrapped <option> tag
// I do a test on link first. not sure why, but one of them was undefined.
// however, I got all four values. So I'm not sure what the first <li>
// is. I'm thinking it's the header...
if(link){
// here's your value. add it to an array, or whatever you need to do.
console.log(link.val());
}
});
This is the first I've seen of the multiselect. It's slick. But I sympathize with your frustration trying to get something out. A 'getSelectedOptions()' method would be nice.
Cheers
Try accessing the selected values on the close event.
e.g.
$("#dropdown").multiselect({
header: false,
selectedList : 1,
height: "auto",
}).multiselectfilter().bind("multiselectclose", function(event, ui) {
var value = $("#dropdown").val();
});
Hope that helps.
Best solution
$('#select').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
height: "auto",
close: function() {
debugger;
var values = new Array();
$(this).multiselect("getChecked").each(function(index, item) {
values.push($(item).val());
});
$("input[id*=SelectedValues]").val(values.join(","));
}
});
You can try this:
$('#ListBoxId').multiselect({
isOpen: true,
keepOpen: true,
filter: true
});