If I turn off enableFilter and roll my own input fields to search through the grid, how do I search only by one column?
See my plunker
$scope.searchGrid = function(searchTerm){
console.log("Term: " + searchTerm);
$scope.gridOptions.data = $filter('filter')(myData, searchTerm, undefined);
}
I want to have multiple input fields and send in the filter to each column as needed.
You would typically bind to a specific gridApi.grid.columns[x].filters[0].term, that's basically what the grid implementation of the filters does.
You'd end up with something like this:
http://plnkr.co/edit/2u56wGFUOCxPLp4ekEkT?p=preview
The other problem is that you now have filter boxes, which presumably you didn't want. You can suppress these by playing with the headerTemplates, but it is a bit of messing around.
Related
I have a list of Assets displayed in a HTML table, the data model for these is quite complicated; they each have a Manufacturer/Model pair, Location and Status just to name a few.
To filter by one field, it is simple something along the lines of
#Html.ActionLink(item.LocationName, "Index",
new { LocationID = item.LocationID.ToString() }, null)
This will produce a URL looking like
hxxp://Localhost/Assets/Index?LocationID=3
The problem arises when trying to filter by both multiple different fields and multiple similar fields, I cannot seem to find a way to produce URLs like
hxxp://Localhost/Assets/Index?LocationID=3,4
or
hxxp://Localhost/Assets/Index?LocationID=3&Status=Active
I may just be trying to treat MVC like Webforms but I don't see any way of passing all these combinations of filtered fields back to my controller to produce a table that shows the data the end user wants to see.
You can also try
Sprint.Filter
I'm using simple_form. How can I have a select menu and a text input and have something like Select or add another.
The app will only take one value, either from the select menu or the text input.
It would also be good to validate to have either one or the other but not both, to avoid user confusion.
Implement what is called a 'combobox' to your simple_form
Jquery UI has a combobox:
http://jqueryui.com/autocomplete/#combobox
something fancier:
http://demos.kendoui.com/web/combobox/index.html
This will get you as far as your combo boxes displaying. I don't think there is a plugin for validating, so you'll have to write the code yourself.
You can try to use a combination of JavaScript and Ruby to solve this. If a user wants to enter a different value then what's available in the dropdown, you should have JS listen to a keydown event in that input and clear the dropdown, i.e.:
$(".input_field").bind('keydown', function() {
$(".select_field").val('0') // this should be a default blank value
});
That will clear the select when a user types. Likewise, you want to clear the input when the user selects from the dropdown, right?
$(".select_field").change(function() {
// Let's only clear the input field if the value is not the default null value
if ( $(this).val() != 0 ) {
$(".input_field").val('');
}
});
This will handle the front-end interactions. In the controller, you'll want to do some additional logic:
def create
object.new(...)
if params[:select] and params[:input]
# Overwrite the select with the input value
object.attribute = params[:input]
end
object.save
end
I assume that you want the input value to supersede the select, therefore if they are most submitted, we can just overwrite the select value with the input value and then continue to save the object.
Is this what you're looking for? Not sure if the inputted value was suppose to create a new object with a relationship or not. Hope this helps.
This question assumes familiarity with FormStack, a drag-and-drop WYSIWYG online form builder.
Background
A client is using FormStack to manage forms. Currently, form submissions are emailed, then manually entered into a database. Predictably, my task is to automate this process. This is easy enough using FormStack's WebHooks API: I can have form submissions sent to a URL, e.g. a PHP script, and happily parse away.
Question
Is it possible to name (or tag) FormStack fields with simple identifiers?
The client needs to be able to customize the form such that multiple fields may feed into the same database column.* FormStack however, as far as I can tell, provides only a way to specify a field label, e.g. Which of these trips interest you?, not a programmer-friendly identifier, e.g. Trip. My script would have to string-compare labels (which, due to their length, are more prone to typos) to determine what to do. What are some sensible workarounds to this problem?
Clarifications*
The reason there can exist multiple fields that feed into the same database column, is that the client uses conditional fields. For example, one field might ask, Where are you studying abroad? If the user selects "Europe", a conditional field might appear, asking Which of these trips interest you?, with choices pertaining to Europe. If the user selects "Africa" however, a similar field might appear, e.g. Which of these trips interest you?, but with choices pertaining to Africa. In FormStack, these are actually two distinct fields. However, as you can imagine, the values belong in the same database column, Trip.
I have settled on a hack for now. FormStack allows HTML markup in labels, e.g. Which of these trips interest you? <!--Trip-->. The client is willing to "tag" fields in this way.
Here's a snippet of the code that parses such tags, in case it might help someone else:
require_once 'Formstack.php';
$formstack = new Formstack($apiKey);
$form = $formstack->form($_POST['FormID']);
$taggedFields = array();
foreach ($form['fields'] as $field)
{
if (preg_match('/<!--\s*([0-9A-Za-z]+)\s*-->/',
$field['label'],
$matches))
{
$taggedFields[$matches[1]] = $_POST[$field['id']];
}
}
In fact, I've had to make it a little bit more sophisticated. Some FormStack field-types serialize input (in a horrific way). For example, FormStack's Name field-type takes multiple fields (prefix, first, middle, last, initial, suffix), and concatenates the results into a string:
'first = Andrew
initial = W
last = Cheong'
To handle this, I've written my code to handle such syntax in labels as Tell us your name! <!--FirstName=first--> <!--LastName=last--> <!--MiddleInitial=initial-->
The code follows.
require_once 'Formstack.php';
$formstack = new Formstack($apiKey);
$form = $formstack->form($_POST['FormID']);
$taggedFields = array();
foreach ($form['fields'] as $field)
{
if (preg_match_all('/<!--\s*([0-9A-Za-z]+)\s*(?:=\s*(\w+))?-->/',
$field['label'],
$matches,
PREG_SET_ORDER))
{
foreach ($matches as $captures)
{
if (count($captures) == 3 &&
preg_match('/(?:^|\n|\r)'.$captures[2].' = ([^\n\r]+)/',
$_POST[$field['id']],
$subcaptures))
{
$taggedFields[$captures[1]] = $subcaptures[1];
}
else
{
$taggedFields[$captures[1]] = $_POST[$field['id']];
}
}
}
}
Hopefully, FormStack will soon add a native way to name or tag fields!
I have an autocomplete box that (for the purposes of this example, since it's a simple example) returns a list including social security numbers. These have dashes in them for readability. I want to modify the autocomplete so that if I put in "123456789" or "123-45-6789", it will find the same entry in the autocomplete, without having to add both styles to the autocomplete source. I've been looking at adding a callback to search, but I'm drawing a blank on exactly how to accomplish this.
If I were using a search that pulled from an AJAX source, I could simply trim the input server-side and return whatever results I wanted. However, for speed's sake, I've pre-loaded all of the data into the Javascript, so that option's out.
Basically, I want to know how to trim dashes off autocomplete input before comparing it to the stored data (and, preferably, comparing it to a copy of the stored data also with dashes trimmed). There's almost zero documentation on how to use the search: option, so I'm hoping someone can help.
One way to do this would be to provide a function to the source option of autocomplete:
var ssn = ['123-45-6789', '333-44-5543', '111-34-9696', '555-99-5323'];
$("#ssn").autocomplete({
source: function(request, response) {
/* Remove the dashes from the search term: */
var term = request.term.replace(/-/g, '');
var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
response($.map(ssn, function(el) {
/* Remove dashes from the source and compare with the term: */
if (matcher.test(el.replace(/-/g, ''))) {
return el;
}
}));
}
});
Here's what's going on:
The source option takes a request and response parameter. Basically, you manipulate request.term (replace the dashes with an empty string) before comparing it with the list of valid values.
Then, call the response function with the correct results. This example uses $.map to return a list of matches, comparing the term to each item in the list (without the "-").
Here's a working example: http://jsfiddle.net/andrewwhitaker/r4SzC/
I have two forms on one page: a results form and a search form. The search form uses a partial view because it is displayed on several different pages. I want to be able to persist the data in the search form regardles of which button on which form the user clicks. The problem is that when the user clicks on a link or button from the results form, only the form values from the results form are posted, the values from the search form are not included. How can I maintain the values in the search form even when it is not the form that is submitted? I do not want to use any type of session state to maintain the form and I dont want to write the search values in hidden fields in the results form. I just want to be able to post them with the form values of the results form so that the users search criteria can be maintained accross any page that displays the search partial view. What am I missing?
The first thought that occured to me is to remove the form wrapping the search control and just let it be rendered into the form with the results data. I worry here about naming conflicts. What happens when the search from has a control with the same name as the results form, wouldn't this cause a naming conflict? I suppose that this could just be managed manually to ensure that there are unique names whenever rendering partial views into other views, perhaps even going so far as to prefix values with the partial view name, but that reminds me of the ugliness that is INamingContainer in web forms - plus makes for cumbersome field names in your model.
Is there some sort of elegant solution that will allow a form to persist state that I am missing? Thanks!
Normally, I persist the search criteria on the server side when the search is performed. If the user changes the search criteria after performing the search, then posts the form any changes are, of course, lost but that's arguably correct behavior since the search wasn't invoked. This is true whether the search is performed from a full post or via ajax. Handling it this way keeps the actions cleaner, I think as you don't need to handle the search data in the other actions.
If you absolutely need to have the search parameters included, you could consider having the second form post via javascript, pick up the search field values dynamically and add them to the second form (as hidden fields) prior to posting the second form. You wouldn't have to maintain the values in two places in synchronization, but you would have to copy them to the second form before posting.
At the moment i got it like this:
Forms which has search box, posts query (and additional data if needed) to search controller which then renders search view. Search view is made from search box and search results partial views. During this - search box form is reconstructed by posted data.
If i need search results form to perform another search request (for example, with specified page index), it goes through ajax, which posts search box form + page index from search results form. Take a look here for ideas (update that JS method with targetId parameter for updating specified div/form and post additional data if needed here like this:
form.serialize()+"&pageIndex=5"
In short: if you need to maintain state of form + update another in one page - consider using partial updates, otherwise you will end up inventing ViewState 2.0.
One caveat with this way - it's tricky to make search box contain something what is related with search results (i.e. - total count of found items). Before i managed to handle this, our designer did that - i just need to add div with appropriate class name ("sbsubst" or something) and it looks that it's inside search box. :)
When you have few forms at your page each form sends only its own data. In WebForms you had only one form (at least server-side) and each control was included into this form. In ASP.NET MVC you can use the same scenario and I'm afraid you will have to if you want to have the described behavior. Don't forget - partial forms don't have to be real forms. Moreover, RenderPartial is mostly used for "control-like" layout creation.
As for the second part of your question I would suggest naming your text boxes in search form with some normal prefix like "search" or something like that. For instance, if you have text box "text" and "language" in the form, you will have "searchText" and "searchLanguage". These names are quite unique and you will have normal names in your parameters.
I am not suggesting you populating the hidden values in your results form on POST event since you said it's not an option for you but still it may be the only way if you want to have two forms.
I think the best approach will be storing the text from search input when it changes in the query part of your second form action url. For example (not tested):
$('input#yourSearchInput').change(function()
{
var searchText = $(this).val();
// or? var searchText = encodeURIComponent($(this).val());
var secondForm = $('form#secondFormId');
var action = secondForm.attr('action');
var queryStart = action.lastIndexOf('?search=');
if(queryStart > -1) {
action = action.substring(1, queryStart);
}
action = action + "?search=" + searchText;
secondForm.attr('action', action);
});
In Controller (or custom filter):
protected override void OnActionExecuting(ActionExecutingContext filterContext)
{
var search = Request.QueryString["search"];
if(!String.IsNullOrEmpty(search)) {
ViewData["SearchFromPOST"] = search;
}
base.OnActionExecuting(filterContext);
}
In your Search Control:
<%= TextBox("yourSearchInputId", ViewData["SearchFromPOST"]) %>