I am using Angular 2 in my application to render a data table (table-component). there is situation where we need to insert more rows in the table between existing rows on click of a button.
We have Created a separate component (alternates) that calls the rest service and create the template of rows to be inserted.
<tbody [attr.id]="'alt_'+i" [style.display] = "displayRow != null && displayRow[i] && displayRow[i] === true ? '' : 'none'">
<alternates (success)="changeRowColor($event)"></alternates>
</tbody>
We are calling this component from table-component and able to load the Component on runtime, but the problem is all the table rows gets fit into single column (don't know why)
The weird thing is if we change something in dom it looks fine, so to fix this problem we manipulates the dom and replace the HTML with same html,
$("#rowid").html($("#rowid").html());
this way we fix the UI problem but after doing that we are not able to call any click event present in the alternates component.
Can you please give me any suggestion? How can I fix this problem.
Related
We are seeking a working example of a popup editor (ideally textarea) using Tabulator. Does anyone have or know of one of a working example?
The Tabulator folks say this is up to the dev https://github.com/olifolkerd/tabulator/issues/2048. And while we can see not providing this as part of Tabulator proper, an example showing how to glue it together would be nice because it is Tabulator the integration is with.
And yes, we are aware there are other grids that have this already, but they have not met our needs in other areas that Tabulator has, so we'd really like to tackle this with Tabulator.
Here is a rough start using a JQuery UI dialog, but we cannot figure out how to get he cell value to update and close the dialog https://jsfiddle.net/1kmrLoj8/16/
function onChange(e){
if(((cell.getValue() === null || typeof cell.getValue() === "undefined") && editor.value !== "") || editor.value !== cell.getValue()){
if(success(editor.value)){
cell.setValue(editor.value); //persist value if successfully validated incase editor is used as header filter
$(dialog).dialog('close'); //does not work
}
}else{
cancel();
$(dialog).dialog('close'); //does not work
}
}
Tabulator is only built to display tables, it does not create an elements outside of the table itself.
If you want to use modals or popups then i would suggest choosing a 3rd party modal library that works for your needs and trigger it from an event in Tabulator.
If you want it to act as an editor then i would suggest triggering the modal on the cellClick or RowClick events.
These events get pass in a Component Object representing the cell or row that has been clicked. you can then call functions on these objects to change any updated data in the table
I have a component that renders a reactstrap table and within the render I have map function of a state of clients that gets rendered as table rows.
Within each table row there is a component(separate button component that just open up a modal) that gets rendered within the map function.I want to use the onMouseEnter to determine which row I am currently at(with cursor) and when I click on the button component.Now the modal component just opens up the same for all rows.
The idea is that lets say I load 4 clients and map through them,when I do I render a table row for each client within the map.Along with this map function I also add a button component(separate component) as a td tag for each tr that gets rendered.
I want to use onMouseEnter to know which one I am at in the row.
So when mouse is hovering over second row(position 1 in clients array) I want to be able to know at which row I am at.
Then I want to pass this row index(which I need to get somehow?) to the button component(same component just rendered 4 times for each client row) and when button component renders I can get this index from props.
.....Please know I am a big react noob just trying to figure this out
I am using a list/array to render the table depending from data I get from a API so it can be 6 clients or a 100 you know?
Hahah just asking for advise
Thanks
React has an abstraction to vanilla DOM events called Synthetic events. Lucky for you, the Synthetic event you're looking for has the same name, "onMouseEnter".
<span onMouseEnter={(event)=>console.log('ENTERED!')} />
You can get read up on most of them here
https://reactjs.org/docs/events.html
I needed a little help over here on adding dynamic columns to table and I'm using smart-table project https://lorenzofox3.github.io/smart-table-website/
Please look at plunker
https://plnkr.co/edit/uTDa6hfwdgGtGWkYqL7S?p=preview
Click on add new column, it will update the table header, but I can't update the td element because I haven't created or binded any td element for new column.
Need help on two things.
1) Any number of new columns might come in future from server dynamically, so I can't bind any element statically in html like I did right now.
2) This is a little long one(I want to create a only one header as MV and in colspan I want current and next) and How do I accomplish that one ? If I divide like that, how do I go frame the data ?
Additional Note on Question 1: I have tried dynamically showing the data in table. please look at line 27 in index.html. But again, If I go with this approach, the values get binded to different different columns since, data's are framed dynamically on controller. To be simple, there is no guarantee that data will be in in this order.
(SNo, companyName, companyFullName, MarketValueCurrent, MarketValueNext, QuarterCurrent, QuarterNext)
companyName might come first or at last. If I go by dynamic looping using ng-repeat, it binds MarketValueNext in first column, then companyName, etc in whichever the order the data is coming.
Thanks in advance.
I'm trying to create tables with multiple levels of nesting which can be expanded/collapsed. So the main table has rows which can be expanded to show the child rows in the middle of the table, who themselves can be expanded.
Each table needs to have their own headers and preferably the columns would all line up but have the start of the child tables be slightly indented as I try to show below.
For example:
ColHeader1 ColHeader2 // main table headers only shown at the top
record1 ...
ChildHeader1 ChildHeader2 // child headers shown for each table
childrec1 ...
SubChildHeader1 SubChildHeader2 // child headers shown for each table
subchildrec1 ...
childrec2 ...
record2 ...
ChildHeader1 ChildHeader2 // child headers shown for each table
childrec5 ...
record3 ...
I've tried to create the code by expanding a sample I found, but it doesn't work for expanding the inner most table. The code can be found here: http://jsfiddle.net/afsz5brg/
The end product will be in a ASP.Net MVC app, but for now I'm just trying to get it working in javascript/JQuery so that hopefully I can just change the data being sent to it.
I'm happy to consider alternative ways for doing it or be told if any of the code is doing something bad/deprecated.
There are a couple of bugs I have discovered in your code. I would list them one by one.
1) Your assumption of registering a callback on $('#detailsTable tbody td').on('click', ...); and that being called on every new instance of that table that gets created is wrong.
If jQuery Data Table was internally cloning the #detailsTable element, then your code would work. But that isn't the case as you are retrieving the HTML markup of #detailsTable and returning it to fnOpen like so: oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details'); so the callback never gets called.
You need to register a callback to the newly created details table. Check out this JsFiddle to see how.
2) I think I also spotted another bug while reading your code. I haven't fixed it as I was not sure if I was right or not. In the callback for your #detailsTable, you call fnFormatDetails() instead of fnFormatSubDetails() like so oInnerTable.fnOpen(nTr, fnFormatDetails(iSubTableCounter, subDetailsTableHtml), 'subdetails'); No one is calling fnFormatSubDetails() at the moment. Please check if this is a bug or not.
I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you
Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.