Datatables - Only allow sorting with buttons - javascript

Is there a way of disabling the column sorting in datatables when clicking on the column header and only allow sorting with the sorting icons (check the red arrow in the picture below)?
My reason for wanting to disable the sorting is that I am using the headers for column filtering and when you click on the header to enter a string the table sorts by that column (I know it's ugly, but I will change the input box design later).
I checked their options and could not find anything. I also checked the source code but that was way way way way beyond my knowledge level.
Thanks for any help/suggestion!
/Patrik

SOLUTION
Add click event handler for each input in the header and stop event propagation to the DataTables plug-in.
$('.filter').on('click', function(e){
e.stopPropagation();
});
DEMO
See this jsFiddle for code and demonstration.

Related

In in-cell edit mode, kendo (sortable) grid values do not update when clicking a different row

In in-cell edit mode, grid values do not update when clicking a different row. The update is only triggered when the user hits enter, when clicking outside of the grid, OR by tabbing/clicking to another cell in the same row. The other examples I've seen don't have this behavior so I'm wondering what I might be doing wrong. This has been an issue for sometime now and it has to be fixed before going live.
I have been able to duplicate the issue in an isolated state. Implementing drag and drop reordering (Kendo Sortable) seems to cause this behavior. Again, the behavior is when you are in an editor, change the value in the editor and click an editor in a different row - you will notice that the value doesn't update. Is this a documented bug? What is your suggested workaround?
Here is a jsfiddle demonstrating the issue:
https://jsfiddle.net/bhr7Lmpy/1/
<script async src="//jsfiddle.net/bhr7Lmpy/1/embed/"></script>
The Telerik Team responded here:
https://www.telerik.com/forums/in-in-cell-edit-mode-grid-values-do-not-update-when-i-click-a-different-row#aIdr3qwkX0aJnnNY9irSJg
You might be able to put a focusout event on the grid cell that programatically presses the enter key or clicks the save button.

Filtering a sorted column with SelectOneMenu in PrimeFaces DataTable

I have the following column in a DataTable:
The problem is when I click the blue area, it first sorts the column and then opens the select options.
I tried adding event.stopPropagation();return false to the events onclick, onkeyup and onkeydown of my p:selectOneMenu but no success. I thought it was bubbling until the column and then sorting it but it seems that is not the case.
I think that is a bug, but I only have time to an workaround.
So my question is: Does anyone have experienced it and know how to fix it ?
5.1 seems to have fixed it.
There are many other bugs, but this one have been fixed.
Some known bugs and fixed by myself (I just overwrote the js code):
Usage of pe:inputNumber (PrimeFaces Extension) in editable column
Usage of TAB when only some(not all) columns are editable
Context Menu on editable columns
Usage of ESC to close dialogs created with Dialog Framework
Prevent from auto focusing elements with refresh effect on blur

Best way for custom filtering in SlickGrid

In my app, I have a SlickGrid data grid and I would like to support filtering on it.
I went through these examples:
SlickGrid example 4:
Model
Using fixed header row for quick
filters
I am not interested in the UI of those two examples. I want to provide a filter icon on the column header and when a user clicks it, a drop down should popup with distinct items in the column and checking or unchecking these should filter the column by them.
I can code all this up on my own but as there is some filtering supported in SlickGrid, is there any way I can change the UI as I described earlier?
I am assuming that many people must have already thought in that direction.
Any other suggestions are welcome.
Thanks
I did it using my own coding..there is no inbuilt way of providing a filter like what you want..
You have to first create a button in every header column clicking which will show/hide the panel in which all columns with checkboxes will be there...
Now when you check/uncheck any CB you need to trigger the updateFilter function which is called on keypress in the examples links which you have posted and then check if the entered string is in the columns which are checked(all columns if nothing checked or whatever is your approach) and return true or false accordingly

It's possible to remove the expand/collapse column from the jqGrid header?

I'm using the jqGrid available at http://www.trirand.com/jqgrid/jqgrid.html and I can't find a way to disable its expand/collapse button on the top right of the header. Anyone know if there's an option to do that?
I tried jQuery("#list13").hideCol('subgrid');
but it does not work and made it worst.
You need adjust additionally the value of colspan attribute of td.subgrid-data which hold the main information of subgrid. The structure of the subgrid row you can see on the picture below
I answered already on very close question. In the answer you should find all information and demos needed to solve your problem.
If you want to disable the main grids toggle button then you can set
hidegrid: false
If you are trying to disable or hide the subgrids expand and collapse button then use this on loadcomplete
jQuery("#GridTeableID").jqGrid('hideCol', "subgrid");

Method to use html table rows as check boxes?

I have an HTML table (that gets its data from a database, but thats besides the point) that has a checkbox for each row. Is ther an easy way to allow the user to check the checkbox by clicking anywhere in the row, rather than the checkbox itself? I know this can be done using javascript, but is there an easy way to do it in rails? Anyone know of any gems or tutorials online?
Here's a working jsfiddle example: http://jsfiddle.net/3XZvV/2/
It uses the first checkbox in each table row. Put them in any <td>. You can show the checkboxes, but you'll need to modify it to allow them to be clicked -- this design doesn't accommodate for clickable checkboxes since it fires the event when anything in that table row is clicked. (It was good enough for this question, but we're open to improvements.)
Here's the JavaScript to accomplish this:
$('.clickable tr').click(function() {
var c = $(this).find(':checkbox').filter(':first');
c.attr('checked', !c.attr('checked'));
$(this).toggleClass('selected');
});
Just put class="clickable" on your table. In order to make it obvious that you can interact with rows, some CSS is nice. See the fiddle.
You'd have to use JavaScript. It's actually no that hard. Just add a click event for each TR that toggles the checked="checked" state of the checkbox, and changes the background color of the TR as well to show that it has been selected.
As a further enhancement, you could remove the checkbox altogether and use a hidden field instead, to save visual space. Just be sure your users are aware that the table rows are selectable.

Categories