Add HTML 5 data attribute to a newly created row when table is using datatable js - html

I have a HTML table with each row with HTML5 data attribute. The table is using jQuery Datatables plug-in. Now when I am adding a new row on a click of button how to add HTML5 data attribute to it again. The data attribute value is specified by the user.

Data attribute write:
$('#categories-table').dataTable
'createdRow': (row, data, dataIndex) ->
$(row).attr('data-category-id', data[0])
Data attribute read:
$('#categories-table tbody').on 'click','tr', () ->
console.log $(this).data('category-id')

You may want to look at http://datatables.net/reference/option/columns.createdCell
that's a callback for once the cell is created so you can modify it and add your custom attributes or for the row http://datatables.net/reference/option/createdRow
(using the current v1.10.4)

Related

Adding html attribute to existing table in existing djangitables2 table

I want to add a column with a hyperlink to my existing table which I created using djangotables2
I tried this but did not work for me.
I am able to add an extra column but the header name but the columns do not show anything in the cells. Could you please guide me on it?
Below is my code
class PDFColumn(tables.Column):
def render(self, value):
return format_html('PDF pdf link', value)
class MYTable(tables.Table): #this is my existing lass table on view page
PDF = PDFColumn()
Now able to see any data within the columns, only column appears with header name PDF

Keep value in textboxes after adding row

i am currently working on to display the value in textboxes after adding row to the table. I am new to angular and seems i could not find the solution. At the moment, everytime i click on the Add button, the table will add new row but somehow the value that i have entered previously are gone. I need to make the value stays in the textbox every time the user adds new row.
Here is the source code that i have done:
https://stackblitz.com/edit/angular-hxduqp
Thank you.
That happens when you have multiple inputs with the same name.
One way to fix it is by giving your input names a suffix of your iterator i:
<input ... [name]="'from' + i" ...>
Here is your StackBlitz corrected:
https://stackblitz.com/edit/angular-bgdgpr?file=src/app/app.component.html
You just remove the name from the form control if not required else you need to provide the unique name to each control.
Working copy is here - https://stackblitz.com/edit/angular-gpq9nc

Some part of my Django form should change based on TypedChoiceField list selection

I am new to Django. I have a requirement where in based on the TypedChoiceField list selection some part of the form should be changed. Meaning for a particular selection I need some fields to be displayed on the webpage and for other selection I need some other fields to be displayed on the webpage.
If there is already a similar page existing, please point me to that page, it will help me a lot.
What I would do is set up a javascript static file (here's a tutorial) that hides and shows elements using the select method.
For example, if you had categories that each needed a different set of fields, you could put all your categories into a <select> element and then using some simple JS, display the desired fields:
$("#select_object").change(function () {
toggleFields();
});
In that case, #select_object would be that <select> element. Whenever it changes (the user selects something) it shows the fields you want.

How to show data from cell in formatter of the same cell in slickgrid

For user friendliness, I have used a list (simple angularjs directive with input and select) in a column of slickgrid. So user knows that there is a list.
(Solved from my previous question: Using formatter and editor)
As an editor I have used the same list. It is working now, the only problem is when the cell is edited (an item from the list is selected), the cell gets the item, but it is not visible, since the formatter is above it.
Note: We are using grid as a angular directive.
Now the question is, is it possible to show the value of cell in formatter too?
EDIT: It is how I am using list directive:
var _preCompiledComboList = $compile('<dcs-combo-list data-enabled="true" readonly data-selected-item="value"></dcs-combo-list>')(newScope);
Later it is used as:
var _cellComboListRenderer = function(row, cell, value, columnDef, dataContext){
return _center(_preCompiledComboList[0].outerHTML);
};
The value in in renderer function is the cell value. And how can I set data-selected-item attribute of list directive to be the value?
I have solved the problem. But I am not happy with the solution.
Right before returning my compiled directive, I am searching the first input element, and setting the value of it to be the "value" of the cell.
var _cellComboListRenderer = function(row, cell, value, columnDef, dataContext){
_preCompiledComboList[0].getElementsByTagName('input')[0].setAttribute("value", value);
return _center(_preCompiledComboList[0].outerHTML);
};
I want more elegant solution, for instance directive scope.

primefaces update table row after cell edit

I am using primefaces datatbale cell editing , when I edit the a cell the next column of that row should display a calculated value which is calculated from this cell value,I am using celleditEvent to invoke a listener using
Please advice in my listener is there a way to retrieve the id of the tr and add to request context to update this row. Please advice.
public void onCellEdit(CellEditEvent cellEditEvent){
RequestContext.getCurrentInstance().update(((DataTable)cellEditEvent.getSource()).getClientId());
}
in this event method it it possible to retrieve html id of the tr element containing this cell.
Try to use OmniFaces with PrimeFaces
Take a look at this : http://showcase.omnifaces.org/utils/Ajax