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?
Related
I am loading the data in select2 dropdown on page load. On the UI I can see the dropdown being populated but when I clear the dropdown value and reload the value again, it is not getting populated, though I can see the data is available in the dropdown.
I have tried to use val() and then trigger the change. It did not change the value. I have verified that the value which is passed to the dropdown has the value in the dropdown list.
This is how I am trying to assign the value - $('#s1').val(v.Name);
This is how I am clearing the dropdown value - $("#s1").val("");
$scope.vendorlist = d.data;
d.data.forEach(function (v) {
vendors.push({ id: v.Id, text: v.Name });
});
$('#s1').select2({
placeholder: 'Select a field',
data: vendors,
}).on('select2:select', function (e) {
});
The dropdown should show the passed value in the dropdownbox.
In a .net MVC app, trying to learn semantic UI. (2.2.13) I've been beating my head against the wall on this one.
I have a remote populated dropdown, that I'm trying to create a default value for at initial page load.
The API is working, returning expected data.
My problem is that when a user 'tabs' into the element, the forceSelection default of the apiSettings forces the selection of the first item in the dropdown, which in this case is not what my default value is. (In this case, say that CAT is the first option in the list)
The desired behavior is keeping 'DOG' as the selected value when tabbed through, and i would like to keep the functionality of 'forceSelection' to prevent a user from leaving the dropdown with something typed that isn't included in the dropdown options.
I'm THINKING that i need a way of passing the current (default) value, and making that the selected value when the dropdown is initialized?
Here's the .js, in a doc ready.
$('.quom').dropdown({
apiSettings: {
url: 'ActualUrlRemoved',
cache: false
},
fields: {
name: 'Animal_Name',
value: 'Animal_Name'
},
onShow: function (val) {
///set active based on val here??
// $(this).val('DOG');
}
});
And the HTML setting the default 'DOG' (and using the "" value as the label) :
<select id="animalTest" name="ANIMAL" class="ui fluid search selection dropdown quom">
<option value="">Animal*</option>
<option value="DOG" selected>DOG</option>
</select>
Figured it out. This works for me.
$('.quom').dropdown({
apiSettings: {
url: 'URLHERE',
cache: false
},
fields: {
name: 'Animal_Name',
value: 'Animal_Name'
},
onShow: function () {
current = $(this).val();
$(this).dropdown('set selected', current);
}
});
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 am using the TableSorter jQuery plugin. I'm trying to place a select element as one of my column headers. I've disabled that particular column for sorting by doing this:
$('#rankings').tablesorter(headers: {5: {sorter:false}});
But when I click on the select element in the column header the options don't populate. It's as if there is something "blocking" me from clicking on it.
Is there something in the TableSorter code that will disable clicking on the element if it is disabled?
I was even experimenting on their example page, and you can't even seem to highlight the text in the column headers for those column headers that are disabled.
Is there any way to place a select in a disabled column header using TableSorter? Thanks for your help!
There is an undocumented option cancelSelection which can be set to false (missing docs post), then you'll need to use the onRenderHeader to disable selection on the other headers (if you want) (demo):
$('table').tablesorter({
// make header text selectable
cancelSelection: false,
headers: {
0: {
sorter: false
}
},
// prevent text selections (optional)
onRenderHeader: function (index) {
if (index > 0) {
$(this)
.addClass('no-select')
.attr('unselectable', 'on')
.bind('selectstart', false);
}
}
});
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).