Two beginner javascript/web design questions rolled into one. I am using twitter bootstrap and I bought two templates to help figure it out and achieve the functionality i want. Both templates provide dynamic tables based on Datatables (ref: http://www.datatables.net/). Both provide examples with hardcoded data. I am looking to dynamically populate the table using JSON data from a server request
One table example has all columns populated, I would like to add an extra column with buttons to perform actions. I am unsure how to do this correctly as the server request will only return data for say 4 columns but I would like to add a new column with buttons for every row. My first though was to have placeholder data in our JSON data which could be replaced with
$('tr last-child').html("<a class-btn>");
or something similar. Is this a good solution? Any ideas would be appreciated.
The second template already has a column with buttons, also filled with hard coded data. IN this case what is the correct way to handle populating this table as the server call will return JSON data with 4 columns of data but the table will have 5 columns (one row of buttons).
Any tips much appreciates.
Cheers
Related
I have two tables. Table A has more data than Table B. In the JSON data structure that I am using for table A - I am not showing all of the data in table A, as it's reserved for Table B. Basically what I want to do, is drag and drop a row from table A to Table B, but when the drop is complete, the data looks completely different from when I started dragging from A. Lets say I'm not displaying object.colorRed in Table A but the data is there. I then move that row to Table B and now I can view object.colorRed.
What really needs to happen is a row from Table A needs to be split into two. Dividing the data and placing it in two rows in Table B. I'm not sure how to go about this.
-- Angular 4
Thanks
I do something similar with one of my Angular projects, and use the ng2-dnd library. Unlike other drag-n-drop libraries, ng2-dnd doesn't manipulate the dom, and instead sends the object data to the dropped container.
Here is a link to their online documentation. The premise is pretty simple, and you do something like this:
(on the table you want to drag)
<tr *ngFor="let thing of things" dnd-draggable [dragEnabled]="true" [dragData]=
"myDragData">
(on the table/div you want to drop)
<tbody dnd-droppable (onDropSuccess)="handleDrop($event)">
I have a datatables table which uses ajax to source some json. At present this is all working well but I would like to add something whereby all rows in the table with a particular attribute, say Highlight=True, have some additional css apllied to them.
I understand it is easy to do this for all rows or selected rows given in html format but I don't see how to do apply it to data on-the-fly so to speak. A more general goal which I am working towards would be to apply some javascript or css to a row based on the data in that row.
Any suggestions?
Cheers,
Jack
I want to display 4 dropdowns, the items in each dropdown, depends on selected item in previous dropdown.
I want to implement everything in javascript, meaning the servlet should access DB (everything is stored in one reference table, where a column "represents" a dropwdown ) only once and fetch all the relevant data.
The maximum number of possible combinations is about 9k.
How can I achieve that?
I guess the main problem is the data structure that should be used for this.
Maybe use of nested Maps?
I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)
One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo
I have an example working here - http://jsfiddle.net/BM3kX/5
It has a piece of JSON consumed by a YUI DataTable. I have a few queries regarding the same.
The JSON has a 'imageURI' attribute from which I need to render an image [16x16] along with the 'showName' attribute in the same cell. Also, the table can have multiple rows so as the images that should be rendered on each row efficiently.
When I click on a row, the table should alert me of the selected record. But there is a twist here - I need the data exactly as the JSON which is used to render it. (I should get even the 'type' attribute even if I'm not using it anywhere in my table.)
How can I meet the above requirements? Any solutions or possibilities?
1) There is not much you can do there. I assume the images are different for each of the records so there is not a lot to optimize except sending the images in the proper size instead of having the client resize them. If the images were some sort of icons representing status, I would recommend you sent the status coded somehow and let the browser decide on how to represent it, but if they are pictures of the people, you'll just have to let the browser deal with them the best it can.
2) It is easy to reconstitute the original data out of the model for the clicked row. You don't need to keep a copy of the JSON for that row, you can turn it into JSON whenever you want (after all, model has a toJSON method to make that easy). The model for each record in a table can hold more information than that shown in the table. The column property tells the datatable what to show, the datasource what it stores. Use getRecord to reach the underlying model and JSON-encode that. If the type was there originally, it will still be there even if you don't show it.