Basically I want to add a td class based on the value it has. I cannot apply this in the renderer because of the nature of the requirement. Meaning, a click event in the ExtJS grid[already rendered] requires revisiting all the rows and apply a td class based on the value/condition it posses. Today we are reloading but we wanted to cut down because of performance.
My idea here is to traverse all the TR of the given grid and add a class based on the value. Any suggestion how to take this forward.
Completed the requirement with the help of Ext.DomQuery.select
for (recordIdx of grid)
Ext.DomQuery.select('.x-grid-cell-inner', grid.getNode(recordIdx));
Related
I've started a deep dive in to HTML + CSS + JS for the past couple of days and I'm curious to know is it possible to expand and collapse rest of the table data if I click my first table data on my table row.
I've tried myself using multiple combinations but couldn't succeed so I wanted to understand is it really possible or I have to improve further :)
Thanks!
https://jsfiddle.net/p9mtqhm7/553/
If I click on say - AUSDe451 or AUSDe441, rest of the corresponding columns should be either expand or collapse[i.e LAMP 6.93817139 & 51_REGALIA 456.352] should expand/collapse if I click - AUSDe451]
Your click handler is a bit wrong!
When you're handling clicks on the .server-name element, $(this) inside the function refers to the item that has been clicked, in this case the .server-name table row.
When you run $(this).find(...), you're looking for child elements of the table row, which do not exist. So rather than use $(this).find(...), you should probably be looking elsewhere in the DOM.
Also, you seem to be searching for span elements, which don't exist anywhere in your HTML markup, so that part of the function will never return anything anyway.
I am using columnClass property to assign different rendering (and event processing) to cells belonging to different columns.
When the table fits within the screen every element gets the class as specified by the columnClass property of its column and I can easily hook some rendering/processing functions to the elements.
However, when some of the columns don't fit within the page and I expand the row (by clicking the '+' button) the cells are renedered with no reference to the class of the column. I reviewed the custom renderer for the cells of the expanded columns and also see no way finding out what the column class of a cell is.
Ideally, I would like to use the same custom field renderer as defined in the table. Is there a way I can do it?
Example:
Let's say I have 3 columns: name, dob, salary.
I defined 3 classes for the columns: name_class, dob_class, salary_class.
For each class I use a jquery selector and assign diffrerent rendering/behavior for each cell of that column.
Now, I resize the table so that dob and salary get overflown and click on the '+' button to expand the row of interest.
I would expect to get the dob cell with the dob_class attribute and salary cell with the salary_class attribute, so I am able to link the same cell renderer to them.
However, ****the class attribute is no assigned (not retained) and I cannot link with jquery using the class attribute. ****
**Could you please suggest an solution that would allow me to retain the column class on the cells of the expanded row? **
Sorry, no, that's not currently possible. It has been raised against the code already, see https://github.com/DataTables/Responsive/issues/93, so it is on the todo list. I'm not sure why the OP has been voted down, seems a bit unfair to me, as it is a valid question.
I have a button in each row, when pressed that row is removed from one table, and added to another table:
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
and at first it appears to work perfectly, the row is removed from one table and added to another, but when I force a re-draw (by changing the sorting of one of the columns, for example) all the rows are back as they were, and the buttons no longer work. This is the case for both the removed rows, and the rows added to the other table.
Is this because I'm using a .jsp table as a data-source? Would this work correctly if I dynamically added all the rows to the table using JavaScript at load-time, or if I used a modelMap collection as a data-source?
Thanks a lot for any advice.
Solution for future googlers - I have no idea how my google-Fu did not find the answer, I had all the right keywords!
In short:
I was doing this to add:
$('.my-other-table-class').append(row);
And this to remove:
var row = $(this).closest("tr").remove().clone()
but I should've been doing this add:
$('.my-other-table-class').dataTable().fnAddData([$(this).attr("data-val1"), "var2"]);
And this to remove:
$('.my-table').dataTable().fnDeleteRow($(this).closest('tr')[0]);
With more detail:
What I am really doing here is modifying the DOM with JQuery (well duh, but I'm really new at this, remember...) - I figured the DOM was the data-source for my table, so that made sense? The table is redrawn, it rereads the DOM and updates? Well not really.
In order to be dynamic, if you use DOM (in other words HTML, or in my case .jsp rendered as HTML) as your data-source, upon initialization, datatables will copy all that information into a JavaScript array.... so rather then my original thought:
"The DOM is not updating correctly, and that issues is propogating up in to my table... because HTML is static...or something?"
it turns out the actual problem was:
"I was updating the DOM, but the real data source was a JavaScript array I wasn't seeing. So upon redraw, this array was overwriting the DOM and my changes were being lost."
TL;DR: Use the Data-tables API and don't modify the data-source directly, unless you need to.
If the event handlers are one of the issues, it may help to set up your event handler like this:
$("#myTable").on("click", "button.moveMe", function(e) {
e.preventDefault();
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
});
This will set a handler on the table that has id="myTable". The handler will look for click events on buttons with the "moveMe" class. It will catch the event on rows that are added later, as well as the rows that exist when this hook is created.
Reference: http://api.jquery.com/on/
I've got a table with the type ahead feature from jQuery UI. It is working with my form when there is only 1 table row (initial view). There's a button to allow the user to create additional table rows as required which also increments the IDs for the text inputs and select menus.
There's another script that inserts a matching value into the select menu based on the typeahead selection. Both of these work fine for the first row, but stop working for any additional Rows that are created.
I've setup a sample JSFiddle:
http://jsfiddle.net/fmdataweb/hxzME/1/
I think I understand why they only work for the first row - they are tied to these IDs: #lastYearSelect1 and #nextYearSelect1 - but I'm not sure how to change them so they then work with #lastYearSelect2, #nextYearSelect2, #lastYearSelect3, #nextYearSelect3 and so on.
There's a few problems with the script.
Firstly you're right, you need to setup all the scaffolding again after you clone the row, the clone method will not copy the functionality, just the html elements.
To find the right element you can use the JQuery ^= selector, which matches the start of an attribute name, on the on the clone object to find the right child input to turn into an autocomplete field. You can do the same trick in the function to change the dropdown to the correct function.
Finally a lot of your code and variables were in the wrong scope to be accessible properly. I've moved a lot of the vars around so they're accessible, mainly into the global scope. When you're a bit more experienced you won't want to do this, but for now this is fine.
I also created a new function setDropDown, but this code is almost identical to what was there before.
Here is a working version of your code:
http://jsfiddle.net/hxzME/3/
Add classes to elements and use class selectors when binding an event handlers.
I have been trying to use Prototype to do some DOM manipulation, but I am not able to find much help on a certain selector.
I have a table with many rows and each of these rows has 4 columns, with each having a different class name. Some of the cells might be empty, i.e., they do not have a class, in a particular row.
Now, when the user clicks on a cell in a particular row, I want the control to be transferred to the next cell of the same class, wherever that might be in the succeeding rows, if one exists.
Is it possible to do this using the Prototype library?
.next()
Lets you get the next sibling
To get the next row you'd do .up().next();