Develop Reference

Vuetify datatable column filtering

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 }, }

Grails: How to display data from datasource based on selection in GSP form

I have a pulldown menu generated from a MySQL dataSource.
<g:select onchange="selected()" id="name" name="name" from="${listOfNames()}" noSelection="['':'--']"/>
this populates the menu with one column from my table
Now based on the selection I want to display additional columns from the same table as text on the gsp form.
so user selects Name1 from dropdown. I display underneath the dropdown menu
Name1. age 21. degree yes.
I have an action inside my controller called allDetails that queries all values associate with a name and returns it a string. But I am not sure how to pass it parameters
"${remoteFunction(action:'allDetails', params: \'name=\' params.name')}
What is the best way to do this. run a JavaScript remote function inside selected() or a gsp tag that calls the action somehow? how to then display the returned string? Change the innerHTML?
tried http://www.grails.org/AJAX-Driven+SELECTs+in+GSP

You cannot use remoteFunction or other core Grails tags, because its text is fully generated during page rendering, and you only know the selected name during Javascript executing in onchange.
So use jQuery Ajax call (unless you switched to a different Javascript plugin).
And I suggest that you select not a name, but an id of that person, like in a second g:select example.

Javascript form filter based on json or XML to make option boxes

I am trying to think up a filter method based on AJAX, XML or Json. I would like to hear from anyone who has either made such a filter or have any tips.
The data could be:
<wine table>
<wine>
<color>red</color>
<origin>California</origin>
<produced>2005</produced>
<grape>Pinot Noir</grape>
</wine>
<wine>
<color>white</color>
<origin>France</origin>
<produced>2008</produced>
<grape>Chardonnay</grape>
</wine>
</wine table>
Must be able to:
Create form fields to select subgroups
When user selects first selection, all the subgroups must alter to correct data below. (filter the option boxes to match resulting filter data)
If user start the selected on form field ie 3 (grapes), the previous option boxes must alter to correct filter data.
Does anyone know of any script or tutorial or anything that can help me?

You might want to look at ExtJS examples.
With ExtJS it's quite easy. Schematically:
You define a Wine model with fields color, origin and so on.
Define a proxy for the model (a list URLs for create/read/update/destroy) with a reader and writer of the JSON or XML type.
Create a view with a form component.
Create a datagrid view to
browse wines and load them into the form
(as simple as form.loadRecord(wineModelRecord)). See this example.
In controller you subscribe to the submit event of the form to
create/update Wine model records.
Actually, I believe the same can be done easily with any other MVC framework, like Backbone.js or Angular.js.

drop down list in html form

consider that there are two drop down list in a html form.
The first list named "country" has a list of the countries.
The second list is the "cities" which should be dynamically populated when a country is selected.
How i am supposed to implement this dynamically?
which is the easiest and the simplest possible way to implement this
either in javascript or jquery or ajax?
please help with sample codes and ideas so that i will be able to implement it or some external links or tutorials

Using jQuery, use the change event of the first drop down, then update the second, a little like so
$("#country").change(function(){
//do an ajax request, and update #cities
});

You can do this with pure JavaScript.
Implement an onchange attribute in the first select:
<select id="countires" onchange="makeCitiySelect( );"> .. </select
and in the makeCitiySelect( ) function you can read the value of this select with document.getElementsById( "countries" ).value and send create the new select box with the cities of this country.
If the cities of your countries are in a database on the server you have to send an ajax request and get the cities as response..
But for sure, with jQuery you can solve this problem much better

1.- Create the 2 select boxes
2.- Create an onchange js or jquery function on the first select, so every time it gets selected the other select changes
3.- Inside the onchange function make an ajax call to the service which has the corresponding contents for the selected option.
4.- Retrieve the data and rebuild the second select box with the corresponding data.

Apply a onchange event on your country dropdown (http://api.jquery.com/change/)
Send an ajax request to server and get the city list (http://api.jquery.com/jQuery.ajax/)
On success of ajax request, populate the second list "cities". Remember to remove any already populated cities from the cities list.
Store all the cities list which you got from server into an array. When next time the users selects the same country, use data stored in array to display the cities list. This way you don't have to make multiple ajax request for same country.

Best way to filter a list-view in asp.net MVC

I have a list of data coming from the database and displaying in a table, that works exactly how I want.
What I would like to do, is add a DropDownList to the page that "filters" the data in the table, based on the value of the selected item in the DropDonwList.
For example, the DropDown has these values
Assigned To Me
Assigned To Others
and the list of data, has an "assignedTo" field. When the value in the dropdown changes, I would like to update the list of data.
In WebForms, I would use an UpdatePanel and a DropDownList with autoPostBack=True, how can I get the same effect in MVC?

You use JavaScript/jQuery to bind to onchange/onclick event, and there do a postback:
$(function() {
$("#myelement").click(function(){
$("#secondelement").load('<%= Url.Action("Source") %>?selected=' + $(this).val());
});
}
There're jQuery plugins that do similar things, for example http://dev.chayachronicles.com/jquery/cascade/index.html (not the best one, the first I found).

You have a few options. One way is to create a Controller method that manages the process of grabbing your data (say as a IList), and then uses the Json(...) method of the Controller to serialize it and send it back as JsonResult (here's an example: http://weblogs.asp.net/mehfuzh/archive/2009/04/28/using-of-json-result-in-asp-net-mvc-1-0.aspx).
On your front end, you can wire up some javascript on the dropdown list that uses jQuery to make a $.get (http://api.jquery.com/jQuery.get/) passing back an id of sorts to determine your filter criteria.
Then you use the callback function of the $.get(...) call to manipulate your DOM as you see fit to visually depict the new list of data.