I have a Magento product page producing static select elements, to which the price mechanism is tied in to backend, so i can't touch those dropdowns. I am using an angular.js radio element to recieve user input, which should in turn update the static dropdown's selected option.
I don't know how to link the two, I have recreated the problem here: http://jsfiddle.net/ldn_tech_exec/smBdC/1/
I want the radio button to update the dropdown, but I can only manipulate the dropdown after it has been created, perhaps using jquery to insert any angular directives required.
UPDATED again: Your select list needs an ng-model and the options should be generated with ng-options. When you select a radio button, the controller method you trigger should update that ng-model, which will cause the select list to update.
See http://docs.angularjs.org/api/ng.directive:select
Another way to do this is to use ng-selected. See
http://docs.angularjs.org/api/ng.directive:ngSelected
UPDATE #3: I missed the fact that you can't modify the select list initially. See my fiddle in the comments below for a working solution.
It sounds like you have some product where the price depends on the options set.
If this is the case then updating the drop-down from your radio button is relatively trivial - or at least depending on your prototype/jquery skills.
However there is a gotcha: once you update the drop-down in javascript with an 'invisible hand' there is a whole lot more javascript code to update the price and availability. To do this you need to bubble the event. This doesn't happen automatically if using prototype.
I hoped I could rustle up the 'bubble code' but I don't currently have it to hand, besides, you aren't stuck at that point, yet...
Related
I have a subgrid on my form which I assign a dynamically generated fetchxml query using javascript. When the user clicks on the subgrid's "pop out" button, the query is lost and it displays the default view for that entity.
The user needs to be able to perform multi selection and bulk editing. As far as I know this is not possible for subgrids in CRM 2013 upwards. Is there a way to retain the query when it is popped out?
There's no supported way to interact with a popped out grid. If you started digging into the client side application code, you might be able to find a hook to the new window, but doing so would be unsupported, liable to break, and I wouldn't recommend it.
I was going to suggest hiding that pop-out button on your entity's sub-grid altogether before re-reading that your users need to use the popped out grid for bulk edit.
In that case your best option will be to do ditch the JS and move to a RetrieveMultiple plugin against the sub-entity. RetrieveMultiple plugins should be generally avoided, but from what it sounds like in your case, it's your only option.
And, just to be thorough, are you positive you need dynamic fetch for the sub-grid? Is there any way you could come up with a view that would get close enough to your requirement, even if it's not perfect?
Update:
Based on the additional information you provided in your comment, I can only think of two options:
Implement a custom grid--or modify one of the free ones out there--that allows multi-select and bulk edit
Your custom web app takes the user's criteria, creates a personal view (entity: userquery) for the user and saves it to the database, then your JS on the form sets the grid to that view.
You can do that liks this:
document.getElementById("someGridId").control.SetParameter("viewtype", "4230"); // 4230 is the objecttypecode for userquery
document.getElementById("someGridId").control.SetParameter("viewid", "{11310965-0306-E611-80E5-3863BB36DD08}");
Doing this actually does make the popped out grid load the personal view, but in my tests just now the grid gets upset if you try to refresh it.
This approach has obvious downsides: 1) You have to come up with a way to clean up the personal views that get generated 2) the grid might break on refresh 3) it's unsupported and liable to break on an update.
Still worth considering, I suppose.
A more supported way instead of using unsupported getElementById is to hook a plugin to multiple retrieve of the entity and amend the query in there
Chris
After looking at this answer from #Oleg, I would like to know how we can update the filter toolbar after a search has been performed.
For example:
In Oleg's example, if you select the Sport option from the Category dropdown, the Subcategory dropdown still has Football, Formula 1, Mathematics and Physics as options even though they are not shown in the grid after the search.
How can we update that code so that, for example, when I select Sport from the Category dropdown, the filter toolbar is updated so that the dropdowns only have options from the new set of data after the search?
I've been trying to "refresh" or "update" the filter toolbar after a search has been performed, but I can't figure out how to do this.
What you mean is dependent selects. I posted the answer with the demo which demonstrates the solution. I plan to implement soon new feature in free jqGrid (it's my fork of jqGrid) the possibility to refresh the options of select. It will make the implementation of dependent select much more simple. Currently one have to refill all options manually.
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.
When I open form to edit values:
It doesn't change form values when I navigate with <> buttons
It opens New form with same values as first edited row, and when I click "Submit", it overwrites that row instead of creating a new item
When I click to edit another row, it always shows the form values for the first edited row – i.e. if I click New first and then edit row, it shows empty form.
So, in short, the first time form opens, the values are "stuck" whatever row I open later.
What can cause this? I remember it used to work OK some time ago.
UPDATE:
No with recreateForm I don't have this issue (I use it as temporary workaround).
Hm, I can reproduce this on jqGrid example, but not on Live Manipulation - on New in Version 3.7, Add/edit/delete on local data:
Click any row and edit it (open form)
Close form
Select any other row and click edit - form shows incorrect values (from the row that was opened first)
Click Add new row button in toolbar - form shows same values - which is very convenient, usually new rows are "almost" same - if only it would add new row, not update the existing one!
Of course in live demo Submit doesn't do that (it doesn't seem to work at all) but except for this symptoms are same.
Also <> buttons do not change data in form, though they change selected row - but from what I remember previously it used to update form values also to match selected row.
Probably you should post the description of your bug with "New in Version 3.7", "Add/edit/delete" as a bug in the in trirand forum.
The problem is that the bug exist in very special environment/data/settings. For example I tested my old local edit example modified to jqGrid 3.8.1 or in 3.7.2 and can not reproduce the problem which you describes. So you can use my examples as a template could it helps you.
Moreover in all examples which I use for real projects I use always parameter recreateForm:true. If you don't use it jqGrid not create a form, but try to use an existing with other data. It works in a lot of cases wrong. For example if you use any dataInit functions they will be called only once during creating of the form, which can make very strange affects. If you use edittype: 'custom' the usage of recreateForm:true is really mandatory (see this). So I recommended many times all people to use
jQuery.extend(jQuery.jgrid.edit, {recreateForm: true});
to set recreateForm: true as your default settings. You could save many hours or days of debugging of some strange effects in your edit/add dialogs.
I'm currently using jqGrid and ASP.Net MVC. With my current project, my goal is to provide a grid of data to the end user, and they can then edit this. The data is machine-generated, and the users will be confirming if the machine is correct or not.
I think ideally for speed, I'd like to provide a row per item, with a radio button group as the editable. The users could then pick from the values 'Unknown', 'Correct', 'Incorrect'.
As there will be a lot of data, I'd also like to provide a control of some type that can set all rows in the grid to one of the available radio button choices, for the user experience.
Given that there seems to be no native support for this in jqGrid, I wanted to ask if anyone has had any experience writing something like this, and whether this is achievable and reliable, or whether I should stick with the drop-down editable approach that is native to jqGrid.
To implement radio button as the editable instead of the standard drop-down editable approach you can use so named custom editing feature of jqGrid (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#custom). This allows you to create any custom control to edit the cell value. An example of the implementation you can find here: Add multiple input elements in a custom edit type field.
To set all rows in the grid to one of the available radio button choices you can use either a control outside of jqGrid or add an additional custom button in the navigation bar (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons). If you search for navButtonAdd you will find a lot of examples how to implement this, for example, Jqgrid: navigation based on the selected row. Because you use server based data, you can just call a method on the server to make the changes which you need and then call trigger("reloadGrid") to refresh jqGrid data.