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!
Related
Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.
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.
I'm creating a form with several drop down lists. I want to create a second drop down list based on the selection in the first drop down list.
My data is static, so is javascript the best way to make this work?
It's hard to say what is the 'best' way to do something. You can do this javascript, php etc..
There was a similar question about the same problem here. That should solve your question.
I'm not sure where the best place to start or the best way to achieve this is but I currently have 4 multiple sliders (two handles within on slider), one input box, another 4 checkboxes and a dropdown and have 1000+ results being returned, I want to whenever something is changed, to update the results via jQuery and paginate it.
So far, I have the results return in multiple formats, json, html, but am not sure the best way to achieve this live (onchange of anything) search with pagination.
Any suggestions or if you can point me in the right direction would be very much appreciated.
Not sure where you want to display these 1000+ results.. I hope not in a dropdown as that would seriously upset most users. :D
Have a look at jquery datatables.
I have been looking at this question
I am looking for a datagrid jQuery plugin that will allow for the ability to edit a table of data by column.
For example each row in the table might need to contain the same specific string of data in one column. Instead of activley going one by one down the rows adding it in. Do any of the datagrid that you have used to allow this to happen in one go, such as a "Copy to all rows" function?
Thanks
The answer for me was JQGris like Pawan, said