Angular UI Grid currently allows for double-clicking on fields for editing, but you can only do this one at a time. Currently, I need a user to click on a button and then have all rows show the editable input fields. I was unable to find a solution online and am now posting a question here.
Anyone else have a current or easy hack for this before I have to start customizing the UI grid library (something I don't want to do yet)?
Thanks!
It is plausible to do this by providing a custom cellTemplate where that template is the editableTemplate, or quite a bit of the editable template. This would mean the edit widgets were shown at all times.
Having said this, the reason that ui-grid doesn't show all the widgets at once is performance. When you have a table you tend to render a lot of DOM elements, and slower devices cant' reasonably render and scroll that many DOM elements. You may also get issues with row virtualisation - you may end up with your editors pointing to the wrong elements in the data.
Is editOnFocus perhaps an option for you?
So what i did is, i used an ng-show directive on cell template to show and hide text box by setting an attribute on entity object of ngRow. By default edit will be false. when you press edit button its is made as true and the text box will appear.
Please find the following plunker for your requirement
http://embed.plnkr.co/tdtCbI8pw6mdSjG4SflP/preview
Hope this helps!!!!!!
Related
We are planning to use Kendo HTML Editor (angular ver.) in one of our app.
This will be used to create E-mail campaigns online. This e-mail template will be personalised so need to include special strings (acting as keys) such as {$firstname}
Is it possible to add listbox in Kendo HTML Editor where we can list these keys?
This will help content editor to pickup any key from list without remembering. And on selection we can add value on cursor position.
Thank you.
Best Regards
So if you want to implement this feature in the toolbar of your editor I would try something like this.
Step 1: Build a toolbar template.
(I can't post more than two links but if you google "angular kendo toolbar template" and find the first demo you'll find my example)
instead of using the anchor they use add an input inside your template.
Step 2: Turn the input into a kendo dropdownlist when the page is ready.
http://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource
Step 3: Add a change event to the datasource then add something like this to the dropdown you just made.
http://demos.telerik.com/kendo-ui/editor/api
you may need to tweak this a little because these examples are mostly kendo in plain js but it's a good place to start.
I am developing a webform which needs to have LineItems ie. some textboxes, calendar,dropdowns etc in a row which can be added dynamically on button click.
An example from my previous works:
I developed this using a GridView and maintained the state of controls using DataTable and ViewState on Click to Add link button.
The problem with this approach is that it becomes very slow as number of controls increase.
What are other alternatives? I know I can use repeater but I am not sure how much difference is that gonna make? I would not want to explore new way if the performance improvement is like 5%.
I can use jquery and html client side elements but then maintaing state would be a headace (I cant avoid postbacks , there are already many drop downs and fileuploads on the same form that cause postback ).
OR if there is an easy way to maintian the state of HTML elements?
This is not opinion based question since , performance and be percieved and measured.
I can think of several options:
Implement paging/limiting so customers can only see N rows at a time
Implement master-slave views: split one large table in two. Master table only lists items and slave table only show details for the currently selected row
Search for other jquery plugins, perhaps there are newer/faster plugins available (sorry couldn't offer any better alternatives, but they might exist)
You may find good answers at UX design web-site, such as How To Display Too Much Data, tables with lots of columns, Best way to display more table columns and rows than I have room for?
My current project creates user forms dynamically from a database. One of the tables defines what type of input a question should be formatted for the user. I am having difficulties getting a slider UI element working with this paradigm. SelectToUISlider, originally designed by the Filament Group, seems to be a good fit; however, I have been unsuccessful calling the UDF on the generic SELECT element from JQuery when there are more than one on a page.
If there is only a single SELECT I have no issues. If I hard-code the ID tag to be selected I have no issues. But getting it to use the ^= or |= selector has been completely unsuccessful.
Any help is appreciated.
$("select[id^='slider']").selectToUISlider();
http://jsfiddle.net/wolfphantom/zuvtpnLg/1/
As stated in the JsFiddle example you have provided it is working, isn't it?
So it seems you have a problem related to the dynamic select that gets populated at run-time after a certain operation...
So If you want to initiate the selectToUISlider on a single strip you can do is,
$(document).find("select[id^='slider']").selectToUISlider();
And i have created a Demo JsFiddle that includes a dynamic select being added in run-time.
But you want to implement selectToUISlider for each and every select individually, then why not run the loop on those element and initialize it individually.
$("select[id^='slider']").each(function(){
$(this).selectToUISlider();
});
So, the downfall, however will be, it will not work on dynamic elements, So you need to initialize those after the element is added to the DOM.
And here is the Demo JsFiddle for it.
P.S
I don't have a prior knowledge of the plugin, But I hope it will work for you.
Regards.
Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.
First of all, I'm not a JS developer, so I apologize if I'm asking a rather too general, previously asked or complex question. The functionality I'm searching for is that I'd like to have two HTML lists, on the load the first one is empty and I want user to pick the items he like from the second list and drag them into the first one (which should be sortable so user can set the order he likes). Is there a easy to use plugin for it?
I really like the idea and look of those two plugins..
http://www.emposha.com/javascript/fcbkcomplete.html
http://loopj.com/jquery-tokeninput/
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
There are doing something different, but those "bubbles" in textfield are a great way to handle it (from UX point of view). Just to be able to have an empty text field, available bubbles below it and to be able to drag them into the text field, just those user wants (no autocomplete functionality, just draging from some list of them, maybe sorting in text field available would be nice). Maybe there's a similar plugin to do that.
Another thing is, it's a part of a form so I need to be able to send those picked up elements to the server with the form, each with it's position. I know, I am asking too much but any help will help me.
Try to use Jquery UI
Here are links for demos
http://jqueryui.com/demos/sortable/
http://jqueryui.com/demos/droppable/
EDIT
I think all you want is this
http://jqueryui.com/demos/droppable/#shopping-cart
Maybe jQuery UI would work for you; it is composed of several handy helper functions.
Take a look at sortable with connected lists: http://jqueryui.com/demos/sortable/#connect-lists