Has anyone managed to implement individual column filtering into Vuetify datatable? e.g. a dynamic dropdown at the top of each column which is populated with the columns' unique values and filters the table on change.
Is the table data connected to a backend?
Yes? then just send the API call on submit
No?:
I assume that you use a similar setup as the documentation.
Then you might want to implement a v-dialog where you use v-text-field to be able to edit each field. for that you could simply create a second JSON, where the edited elements are stored in. On submit, could assign the edited data table to the new data table.
methods: { submit() { this.yourDataTableJSON = this.editedDataTableJSON }, }
Related
I have a field for which I am populating data using js. The data in user field is being populated from view using ajax call. I want to create a custom widget which can be used to filter and select the values.
like the TypedChoiceField Widget; I want to create TypedSelectField that can be used to filter and select from the options that are populated.
user = forms.CharField(widget= forms.Select(),required=True)
Any ideas on how to create such custom widget.
I tried overriding forms.ChoiceField but it is not working.
I have a DataTable (jQuery) that currently allows me to filter my data when I enter a string inside an input field. By default, a label is invisible.
After filtering, I want to be able to make a the label visible if the the dataTable after filtering contains data. Vice versa, if the dataTable is empty after filtering, I want the label to stay invisible.
I am relatively new to web-development so please excuse my lack of knowledge. The filtering of the datatables is client-side so im a but unsure on how to achieve this.
this is how i initialised the datatable
if the filter results in an empty dataTable, no label should appear
if the filter results in a datatable with data, a label should appear
You need to add a change event listener
to your input field. Afterwards just check if the field content meets the required conditions and set the label's display style to style properties like
document.getElementById(labelname).style.display = 'none'
I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.
Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.
I've tried to re implement the same functionality on this StackBlitz.
I'm having the following issues:
I'm unable to emit data from the newly added components. (Check Console)
Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.
This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over.
<app-row
*ngFor="let row of rowList"
[row]="row"
(entryUpdate)="onEntryUpdated($event)">
</app-row>
Please have a look at this
I have the Kendo grid which is filled by few columns. I would like to after button click update visibility some of these columns, add some new and push it back to display new columns.
I tried to do by this way:
// GET COLUMNS FROM GRID
var actualGridColumns = grid.columns;
// MAKE SOME CHANGES LIKE hidden true/false on columns in loop
for loop
// SET NEW COLUMNS TO GRID
$("#orders_grid").data('kendoGrid').fields(actualGridColumns);
// FILL BY THE FRESH DATA FROM SERVER
$("#orders_grid").data('kendoGrid').dataSource.read();
// REFRESH GRID
$("#orders_grid").data('kendoGrid').refresh();
But following code crashes on:
$("#orders_grid").data('kendoGrid').fields(actualGridColumns);
How can i do it in the right way please?
There is no such fields method part of the Grid. You have two options:
First is to define all the columns that you need at initialization time and just make some of them hidden and later on show/hide some of them based on your requirements.
Another option is if you do not know the columns at the time of initialization, you can provide new set of columns options and pass them to the setOptions method of the Grid.
There is no such fields method for grid.. To handle show/hide column, kendo provide method showColumn and hideColumn, you should check Kendo Grid API Documentation
----------------------------EDIT------------------------------
Regarding to your case having new columns with new dataset you should re-define the entire grid column schema.
I make a simple example, you could develop it more complex to meet your expectation.
And here is kendo grid columns documentation to help you define your column schema properly.
Hope this helps
I am using jqGrid for a scheduling process. In the grid, I am displaying the working hours and other details of employees under a department. On clicking a row in the grid, another grid has to pop-up which gives details of the corresponding row in the master grid. For example you can refer to http://trirand.com/blog/jqgrid/jqgrid.html (adanced>masterdetails). This shows an example of two grids where on clicking a row in the master grid you get the invoice details in the below grid. I too need the same functionality and added to it, I have to add/edit the rows in the second grid. Both the grid datatype are local. On clicking submit button in the add/edit dialog I want to override the default action which submits the data to the server, and write my own function. The function is to store the added details/edited details into an object and bind it as a data block to a div.
I tried onclickSubmit, but it was still invoking the default method.
Added to this, i would like to reload the grid with the new row.
for your first problem, what you can do...onSelectRow property of jqgrid you can send the data of that row as local data and load a new grid just below to previous grid
for example, this you can write with first grid
onSelectRow: function(){
var sel_id = jQuery("#grid").jqGrid('getGridParam', 'selrow');
//this will give you id of the selected row
now to get values of the column for this row, there are several methods
i'll go with this one, lets say i have date as a column in this row
so,
var date=getCellValue(sel_id,'date');
and now you can load a new grid in this same function and send this data to that grid
and now your second problem, for the custom functionality of add/edit dialogue you can make use of this event and over ride it
beforeSubmit
check this
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow