I have a jqGrid displaying the data in the table correctly and on gridComplete when the table loads, it applies some click functions to some icons in certain table cells on each row. When the table initially loads, all the functions work properly, but when I click a column header and sort a column in either asc or desc order, the table sorts the rows and then the click functions no longer work. Has anybody run into this issue using jqGrid before? I am using pagination with the table and when i go to the next page, the click functions work again until I sort a column. Any help would be greatly appreciated.
*I forgot to mention before that I also have a subgrid for each row that is collapsed and will expand when an arrow icon is clicked on at the beginning of the row.
Figured it out. When I created the table, I added a small div element that was hidden at the bottom of the main table div element that holds all the data. The small div slides up and down with setting options inside of it. When you sort the table, the jqgrid seems to sort the table and place it within the div inside of the main table. Since it probably doesn't specify what div to put the sorted data back into, it places it into both div elements. When i sorted the data and looked at the smaller div, the sorting recreated the table within the small div as well. So, I ended up with two tables, my original and the new one within the small div. This messed up my java scripts, because the references were all jacked up at that point. So, my solution was to remove the small div when sorting and then when the sorting finished, recreate the small div so the sorting function doesn't get confused. Also, Zikes, the gridComplete function does not run on sort for me. I put an alert statement within the gridComplete function and it shows when the table is loaded initially, but when you sort a column it never shows. I placed the alert at the very beginning of the function, so I know it wasn't running. Either the documentation you are looking at is incorrect or i have some sort of setting that disables the gridComplete function from running on sort. Thanks for the input.
Related
I have a big problem with my angular project. In my website i have a lot of tables (in different sections) with fixed padding/height values for the cells. If i click on a button, the padding and heights values that i've fixed of all the tables returns to original values. Does anyone know why?
I Thank you
I need a table as shown in the image.
The requirements are:
the header row (very first blurred row) is fixed when we start scrolling down the table
the first column is fixed when we start horizontal scrolling
additionally, as we scroll down, the colspanned rows in black color (I'll call it the row-group heading row) - "Title 1" and "Title 2" - will become fixed, below the header row, when all rows that belong to its group are in view. And when we scroll further down, and when the next group of rows come into view, the previous row-group heading row will go away and in its place (right below the fixed main header row) the row-group heading row that corresponds to the rows in current view will be fixed.
We're building a react app. We checked out: react-sticky-table, and other non-react libraries like: Stickytable and Sticky-kit.
None of them seem to be doing what we want.
Is there a JS (react or non-react and preferably non-jquery) library that does this?
If not, assuming that we get the first-row header and the first column fixed using any of the above mentioned libraries, is there a way to make the row-group heading rows fixed/static based on scrolling?
I also prefer the table be built using <table> group of elems, and not just divs. But it's not a strict requirement.
UPDATE: Just found this plugin that seems to be doing this: http://maslianok.github.io/stickyRows/multiplerows.html. It's great, but keeping this question open for pureJS or react solution.
I have worked on the same UI but it was the mixture of pure javascript and jQuery, however less concerned about the front end library, as most of them fail at certain point of requirement or amount of data.
I suggest go with your own solution I did the same it is acceptable to clients since 5 years.
1. Create a separate tables for your header and content.
2. Give each cloumn exactly same column span width. E.g. ,<colspan width="50px">
3. Place a separate table with one column in LHS.
4. Write a code in javascript which scrolls your LHS table along with your main table.
Apologies as it is hard to give working example.
I am using datatables and wanted to represent hierarchical JSON data in a grid. I got the data to display hierarchically in the datatable through ajax, but I am having trouble with javascript implementing the expanding and collapsing of the rows.
Please take a look at this JSBin and try expanding and collapsing and you will see the issue:
http://live.datatables.net/qedufunu/1/edit
The behavior should be like any hierarchical data (like the windows explorer):
When the grid loads, it should display first level rows with the expand icon.
When the top level expand button is clicked, it should open second level rows for the same parent with an expand button (if there are 3rd level rows).
When the second level expand button is clicked, it should open the third level rows.
Please take a look and suggest any JS changes. Please feel free to modify the fiddle.
Thanks.
Okay. I fixed it myself. For folks who need a solution for nested rows in datatable, this should help immensely.
http://live.datatables.net/qedufunu/2/edit
I'm trying to create a two column sortable layout using Scriptaculous and without handles, it works absolutely fine and i'm able to swap div elements between the two columns and change the order of them in the current column. However, when attempting to add a handle to the div elements, I am unable to successfully move them between the two columns or change the order of them in the current column.
I have tried to swap the handle element to an image which hasn't fixed the issue and changed the div identifier from a class to an id, but once again it hasn't fixed the issue.
Code without handles (Able to grab from anywhere within the div, works fine)
Code with handles (The handles are the red bordered boxes, doesn't work - for best example, change output size to 1100px)
I've been searching both here and elsewhere on the internet to find a solution to this, or see if anybody else is experiencing the same issue but i'm yet to find another case of this happening.
I can see from your code that you have $$(.handle) this should not have any $'s
I refer to my previous question on JQuery Rotating List. You can view the post here.
JQuery Rotating List
My previous post was to make elements in my table list move horizontally. Applying td:first-child and referencing it to my jQuery script as a selector, it works.
But now I'm trying to make my table move vertically. I tried referencing it to tr:first-child but the script just doesn't seem to work.
If I were to change my (tr) to (td), table will be screwed as there are no (tr)'s to seperate the different items in my list. I wonder if there are any way around it.
Or else the other option is to use <li> which will require me to change a whole bulk of code.
Anyone who can offer some advice here will be greatly appreciated.
You mean moving rows of the table vertically, like in this jsfiddle? Or do you want to move individual table cells?