Handsontable column hiding not working - javascript

I have 10 columns (C1, C2...C10) in the data array. What I want is to have all the columns in the background but display only C1 to C5 to the user. The reason: In the validations part, I need to have these hidden fields to find whether the values typed in visible columns are valid or not. I am using javascript on a button click outside the handsontable definition for these validation.
What I did currently is to define the data array with values for ALL 10 columns and while defining the new handsontable statement, used columns [ ] tag to display only the columns to be visible. (In the columns section, I have inserted only C1 to C5 and did not include C6 to C10). Now the problem is that, when In used .getData() to get the dataset, the hidden columns (on other words the columns not included in the columns [ ] tag of the handsontable definition) are coming as undefined, when accessing using
var gettablearray = handsontable1.getData();
window.alert(gettablearray[rowindex][columnindex]);
Is this is achievable though an existing straight forward official way? Or please advice what could be a work around.
Thanks in advance.

The nice way
You can refer to your data array whenever you check any data. Assuming you are enabling sorting, the best way is to use the sortIndex method which translates from the view data row to the original data index:
physicalIndex = instance.sortIndex[logicalIndex][0];
The ugly way
Render all 10 columns, then hide columns 6-10. This way you can access all data on the same level.

Related

Sort columns in DataTables by data type instead of formatted string from AJAX

When we build the HTML on server-side and only then apply DataTables, we can place the raw data in data-sort attribute and the formatted value on the cell's text, and it will properly sort the column.
I'm in such need, but data is coming as json, and I'm adding it as DataTable({data: object}).
I'm using columnDefs-render to format those values, and as we know DataTables uses the rendered string instead of raw data to sort.
I'd need some columnDefs setting to provide the raw data for sorting, but can't find how. Any ideas?
I figured it out!
1) On the web service response, make sure there's a field with the proper data type to be used on the sorting. In case (not best practice) the data is being formatted to string on the application and not by DataTables, add a field for the formatted string and another field for the proper data type
2) On DataTables settings, columns area, set as usual the proper column linked to the proper field
3) if DataTables is responsible for formatting, as usual, add the render setting for doing it
4) back to the columns area, add a new column on the end of the list, linked to the proper data type field, and add visible: false to it, this way this column will be available for other settings and functions to use, but won't be rendered visually
5) on columnDefs area, add { "orderData": 8, "targets": 5 }, this way when the column 5 is ordered, DataTables will use column 8 instead to do it, being column 8 the new invisible column added on (4)

DataTables - Search in multiple columns with a single drop down

I'm working with DataTables and i'm trying to search a result in a table with a dropdown. But rather than searching one column, I need to search in two specific columns.
The below syntax works with a single column but how do i do it with multiple columns?
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.column([4]).search($(this).val()).draw();
});
I tried doing this but when i use this code it only searches the result in the first column, E.g. 4th Column. and ignores the rest.
table.column([4,5]).search($(this).val()).draw();
What is the proper method for this?
Lets summarize all things here. It will help other people as well.
You can achieve this as follow:
table.column(4).search(this.value).column(5).search(this.val‌​ue).draw();
It will perform search on 4 column (4 is index of column), after that it will filter data from 5 column against provided filter value and at the end it will draw the table.
One thing to keep in mind is that Filter is applied on both columns, so both columns must contains matching data.
Here is its filddle
This can be achieved by using fnMultiFilter as it documentation explains:
This plug-in adds to DataTables the ability to set multiple column filtering terms in a single call (particularly useful if using server-side processing). Used in combination with the column sName parameter, simply pass in an object with the key/value pair being the column you wish to search on, and the value you wish to search for.
Use columns() in place of column():
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.columns([4,5]).search($(this).val()).draw();
});
From the doc, you should be using .columns() (note the plural)
For an OR search among multiple columns, disable columns for the search using
columns.searchableSince: Enable or disable search on the data in a certain column.
Alternatively, you can also use an HTML attribute to remove the column from the search
<th data-searchable=false>

Lightswitch HTML - Table filter where not null

When you create a browse screen and add a table control on, you can filter it down to find specific's, however eliminating null values is not one of the basic options, please could someone point me in the direction of how I can achieve this or if this even possible?
Example:
When the "EstTravelFromSite" is null, I would like the table not to show this result.
can I achieve this on this screen or by entering some JS code on the table?
Thankyou for any help
Lightswitch will give you the options "is null" or "is not null" if the column you're filtering on is a nullable datatype. If you're using the Lightswitch table designer to create your data models, Lightswitch will expose any column which isn't marked Required as a nullable data type (oversimplification but sufficient here). So check your data definitions.
Table designer showing required and not required (implicitly nullable) integer properties.
Screen query filter for a nullable property
Screen query filter for a required property
The other alternative if that won't work in your design is to create a query (right click on the table and select Add Query) then add code to filter out records with nulls (Write Code -> Query1_PreProcessQuery). Because this is happening on the server side, the code will be VB or c# depending on how your project was created. Then use the query rather than the table as the source for the screen.

Tablesorter Custom Filter Function - Full Table Filter

I have a tablesorter, with 2 filter Columns. The first Filter works as a drop down and has no issues right now. The second filter is intended to be a full table search and filter mechanism.
That is to say, even though it is associated with the computer column, it should return results for child rows as well
The Computer Filter should respond to all child rows. For instance, if I searched for z840, , only Computers with Model z840 should appear.
However, I have a custom secondary filter mechanism by request The gauge at the top, works as a filter for workgroup
However, If I am filtered in a workgroup, and use the Computer Filter, it ignores the custom hidden rows, and searches against any row in the table. (Child Row Searching works fine).
My Question is, Is there a way to overwrite the functionality of the filter, to ignore any rows that are already satisfying some condition IE: $(row).hasClass('hide')
I have tried using filter_functions but every result ends up searching on computer name only
I am using Jinja Templating so it was a little hard to get a fiddle up and running but here is a sample.
http://jsfiddle.net/brianz820/856bzzeL/813/
Sort by wg02 (at top, no results), and then use the computer filter to search for say, 3.3. No results show up, but once you delete the search, the original workgroup filter is removed.
On my production copy, even typing 3.3 would have returned results for any workgroup, ignoring the filter.
There may be lots of extraneous code on Fiddle, just wanted to get a working version up
Thanks for reading, Goal to maintain free form child searching and filtering on filter selection, but maintain external hidden rows.
if there is any more required information please let me know
I'm not exactly sure if this is what you meant, but the hideRows function can be simplified by using the filter widget (demo):
function hideRows() {
var $table = $('.tablesorter'),
filters = $.tablesorter.getFilters( $table );
filters[2] = selected === 'All' ? '' : selected;
$.tablesorter.setFilters( $table, filters );
}

Comparison of an array of products using javascript, knockout js

I would like any guidance or a starting point to implement a product comparator in out html5 knockout app. The comparator can add upto 3 products for comparison side by side, user has choice to remove any and add in a new product.
My problem is basically its easier to delete a div but how do i remove entire columns off in knockout?
for eg:
Prod1 x Prod2 x Prod3 x
col1 value1
col2 value2
col3 value3
etc..
Each of the x's is the delete. not quite used to posting here..please let me know in case of any queries. Thanks a lot again. Preferably I would like to create a template and let it handle the generation of the html..
Think of it this way, knockout is used to display your data model stored in a JS object. Your requirements mean your data structure should be an array of objects [{},{},{}], so your delete button should destroy that object from the main array leaving [{},{}]. When knockout refreshes the view you'll not have that column anymore. Remember that knockout is a replicator, so your hidden container acts as a template to create the others. You won't make the containers the user sees, knockout will.
Your columns can be divs (using float (probably better) or absolute positioning). I would prefer not to use knockout to repeat <TABLE> columns because you would need to use foreach in each table row to repeat the cells for each object in your data bound array. But this is possible.

Categories