Adding search option to above the column names - javascript

I have running JQGRID version 4.9.1, thanks to Oleg.
I am trying to add search functionality to the columns. I am trying to implement the search input fields on top of columns. When the user types something, it show only those values.
I am attaching an image hoping to clarify my question.

I have found the solution looking at the source code on the projects gitHUB.
It is activated by default I believe. In my case, I had it turned off in one of the settings.

Related

Populating <select></select> with a large number of values

I have a web form which has the user input the values of certain characteristics, however some of the characteristics have up to 45000 values.
The selects were working earlier, albeit with a slight amount of lag when populating the dropdown and trying to scroll through it fast, but now it does not populate at all and the web form hangs.
Is there a way to efficiently contain this many values into a dropdown? Also which is the best library for searchable comboboxes?
I looked at this implementation as it has a "load on open" feature which I thought might be beneficial, but it did not seem to work and is no longer actively developed.
http://john-oc.github.io/
Thanks
Perhaps it would be better to use an autocomplete feature instead of a select menu in this case. A user can type in the first few characters, causing a request to start filtering results based on their input.
Here are a couple of really good autocomplete plugins:
https://github.com/devbridge/jQuery-Autocomplete
Roll your own:
http://www.webreference.com/programming/javascript/rg16/index.html
I agree with Todd, I think you might want some solution that has autocomplete to hide too many results. I'd even go a step further and suggest bootstrap DataTables: https://datatables.net/manual/styling/bootstrap
You can make searchable tables with this, with the key advantage being that it paginates results, so you don't see it all at once.
I'm a big fan of https://github.com/angular-ui/ui-select. You can have it make a request based on the current text input, and then populate the dropdown.
Since the question is already answered, please let me just contribute here.
You can use the typeaheads from angularStrap to achieve this. Beyond the easy manipulation of data, you can even use to make async calls using data provider.

Filtering on a page where line items are displayed as tiles

I have a requirement. In my page currently user details are displayed as a table and it has a filtering option, if the user type a character the table will be filtered with their name filtered with the character typed. Now this has to be redesigned to display the customers using tiles, like each customer details are displayed in rectangle with their details in it. So far so good.
my question is, can I implement a filtering function on this tiles page, same way fileting has been done in the table. is there any solutions currently available ?.
any suggestions will be highly appreciated.
Yes pretty much the same way. It's just a different way with presenting the information. You could possible have those filtered tiles pop up at top, or make the ones not in the query disappear. I cant really offer code with this, but I'm sure that you practically already have it. Could you possible link an example or the actual site?

Extjs 4.2 Sortable grid with fixed position for one record

I have a simple grid with sorting on. I want to allow users to sort by any column, but at the same time I want one record to always display at last position (that record is recognized by ID). Is there a way to do this?
I'm using ExtJS 4.2.2.
I wouldn't keep a blank record for editing in the grid all the time. What I usually do is to provide the user a means to add record when he needs, let him to edit and save it.
You may have different requirements, anyway, you can see how this logic works here: Editable and Writable ExtJS Grid Example
This approach saves you from solving the sorting problem.

Radiobutton Tree Control

I am developing a search form which displays a number of categories and sub-categories. The client has requested that I do not use cascading dropdowns but to display radiobuttons instead so that the user can see the top level categories at a glance.
I had a bit of a look around for any javascript plugins that might give me a head start and save me from having to write all of the code from scratch but didnt come up with too much.
Can anyone suggest a good plugin that will allow me to display a radio button list in a hierarchical collapsible tree structure?
Cheers,
Tristan
Solution
I ended up using this plugin and adapting it to my own needs -> http://code.google.com/p/checkboxtree/
There is a great jQuery plugin called jsTree.
http://www.jstree.com/
I personalize it for my needs as well.

How can I populate select boxes with multiple values?

I'm setting up a jqGrid which needs to visualize multiple values in one cell. The input comes from a form where the user can select multiple choices. I am able to display the select box, but not populate it. I have tried to insert an array in the JSON object, but to no success.
This is the model:
index:'ship', editoptions:{multiple:true, value:{1:”FedEx”,2:”InTime”,3:”TNT”,4:”ARAMEX”}}
And here are some variations of the data I've tried populating with:
ship:{[1],[4]}
ship:[[1],[4]]
ship:{value:{1,4}}
...and lots of other variations.
I've also searched the jqGrid forum, but didn't find a solution. How can I fix this problem?
Oh boy!
I had the answer all the time. It was just as easy as I had hoped it would be.
Here's how it's done:
ship:["FedEx","TNT"]
The reason for why I didn't think it worked is because jqGrid shows the data as "FedEx, TNT", thus making me believe it was only a string. Instead of clicking the cell to see what had happend, I spent hours looking for the answer on the internet. If you'd like to know what happends; jqGrid renders a select list with both elements selected. Simple.
Happy jqGrid'ing!

Categories

Resources