Select all and none on items list , in knockoutjs - javascript

I am trying to implement a list of items that each have a checkbox to select the item. On top of the list, there is 2 radio button to check all or none items. However, when I update the selected list, the checkbox is not checked. I have got a fiddle here to illustrate the problem:
http://jsfiddle.net/hawaii/VcZBf/2/
Could you guys help me on this please.
Thanks

UPDATED
So you want to do a "checkAll(On this Page)" implementation.
To maintain changes to your checks from one paging event to the next, I would push the currently checked items in the grid to the server during the paging event, or have the act of checking / unchecking maintain back to the DB right after each event. Its a cheap call, and you aren't at a risk of losing checked items because the user hit the backspace key accidentally.
Without sending the checks to the server on every paging operation...
your checks to be stored locally separate from the list even when the template that those records represent is paged to another page.
(make sure to only update the people observablearray when you get your next page)
then, importantly, on every page event you need to apply the checks back onto the grid for the shown items.
Finally, to aleviate the fact that the checkmarks arent representing their checked state (you click check-all, and you don't see them get checked). This is because you had checked:$parent.checkedPeople. which will never work, since checkedPeople is an array, not a boolean. I changed this to a function that asks if this person ID is in the checked People array
anyhow.. here it is: http://jsfiddle.net/VcZBf/24/
Its a rough concept.
WITH sending the current checks to the server on every paging operation
Each object now would have an "isChecked" observable.
On every paging event, the current page's checkmarks are persisted to the DB server side.
Then if you page back to a page with checkmarks on it, they show back up for you.
Much smoother.
reference from previous answer:
http://en.wikipedia.org/wiki/Principle_of_least_astonishment

I simplified your structure a little bit. I don't think having both people and checkedPeople was really knockout-y. If you do want checkedPeople, it can probably just be a read-only computed observable.
I added an IsChecked field to the initial people (all false). I then changed the checkboxes to map to that. Finally, I had the radio buttons change all IsChecked fields using arrayForEach.
Right now, the radio button GUI isn't really intuitive. You can take two appraoches:
Make them regular buttons (recommended)
Make them check and uncheck automatically by data-binding the checked to a computed allChecked flag in the model. This would mean they check automatically even if you check the boxes one by one.
I also took out your logging. I'm assuming that was debugging, but you can re-add it if needed.

Related

CheckboxList not retaining it's check mark on postback

Checkboxlist control in a repeater control & ASP.net C#. Whenever I check its items it gets uncheck automatically. I am also calling this method when the page is not postback as well but it is not working & gets uncheck although I get the values but clears out the checkmark. I do not want to use the session.
If you are in page load re-binding the repeater then you lose the settings. So you need to only bind on first load
(if IsPostBack = false then databind)
So if you re-bind the check boxes each time, then you lose their settings. The other way is to create a array or better yet a dictionary pair list - when you check a item, ALSO save that setting in the dictionay list based on row index. Then you can re-bind on load or as you like, and in the row data bind event, you set the value of the check box based on the dict pair list you maintain (you have to save that list in viewstate or session).
So, it is MUCH less work to simply ensure that you ONLY fill + bind on first page load. If you at any time re-bind the repeater, then you lose your settings. So they will persist ad survive round trips (post-backs), but ONLY if you bind one time on first page load.
It not all that hard to build up a "list" of you made choices and then on row data bind event check + set the values from that small list of choices. But as noted, it obviously easier to just avoid re-binding. However, in the cases that you can't avoid a re-bind, then you need to write your own code to persist the choices.

How to set cascade select2 value onClick

I have three select2 lists next to each other, first independent, second dependent on first, third dependent on second (cascading lists), that works as expected when I normally populate them by selecting some options. I have created a dynamic action that fills these items with values that I calculate when I click a button, but after the click, only the first select2 have selected value. The second and third value remains empty. When I check the session, all items have value in them. It appears that when I click the button that for a millisecond list are filled but after that values disappear. So my question is, how do I transfer values from server-side to client-side. I tried to refresh items, I have played with jQuery without success, also I have tried to separate dynamic action to set values separately but nothing worked. Values populate correctly so that is not the problem. Please help
Thank you in advance for your answer.
Is lazy loading checked for the select2 that are subject to this behaviour (Item -> Setting -> Lazy loading)? If so try unchecking it

XPages: do not allow identical values in radio groups

I have a group of 6 radio groups on an xPage, each with a list of values 1-6. I am looking for a method to allow the user to only select each number once. A user will not be able to pick the number 1 for radioGroup1 and radioGroup2.
I am struggling to come up with a good way to do this.
The two methods I thought of were building an array in js, using the array for the values in the radioGroup, then removing values picked from the array and doing a partial refresh on the other radioGroups.
The second method was simply wipe the value of a radioGroup if the duplicate value was detected in another radioGroup.
I guess I could just do a validator to compare the values on the submit.
Any thoughts on the best way to approach this in xPages?
I suggest a twofold approach:
Client side: add an onChange listener to the radio buttons. When a value changes you run through the buttons and disable (gray out) the same number in the other radio groups. This is fast and good for the user since the UI doesn't "dance". You need a "picking" order. e.g. a column left (if organized in columns) can always overwrite the right column(s). You also need to eventually clear a radio button before disabling it
On the server side have a validator (one function called by all) that double checks that - in case someone tries to trick you with Firebug
Bonus Idea:
Radio buttons are bad for this type of UI (they are good as backing data store). Overlay them with a background graphic based on the radio button state like a checkmark, an empty square (for selectable) or a gray X (for disabled). Would make a great custom control.

Hide/Disable Edit button based on column's Values in Sharepoint 2010

I have a column that has 2 Categories, Done and Pending. I would like to Hide/Disable edit button once the user selects an item and if that item has a Status column of "Pending".
I would like to know how can this be done, whether in visual studio 2010 or ECMA Scripts.
I know this question is old but if someone still needs the answer:
Create a custom action in visual studio like this:
https://msdn.microsoft.com/en-us/library/office/ff408060(v=office.14).aspx
This hides the button you want, now you can set a condition via enabledscript parameter to choose in which case the button should be hidden:
Just add this code after </CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="HideEditRibbon"
CommandAction="javascript:return true;" EnabledScript="javascript:checkIfNeedsToBeHidden();" />
</CommandUIHandlers>
<CustomAction Id="yourJsReference" Location="ScriptLink" ScriptSrc="yourJsFile.js"></CustomAction>
If you need this in List-Ribbon, Edit and DisplayForm, you need to make 3 Custom Actions and change the Location-Part and maybe your js-code.
If you want to use an out of the box edit form then you're not going to do this with server side code; you'd need an entirely custom edit form to do that.
This means using Javascript on the edit page, which is fragile, and doesn't prevent users from saving the data if they know what they're doing.
The input field for every column will have a 'title' attribute with the column name. JQuery can find the element with title='column name' rather easily, so that's how you'll know if you need to hide the save button. The save button isn't quite as easy to get to. You could try getting the input with type=button and value=save.
If it's important to have actual security around this, so that no matter what someone can't edit an item in this state then you can use an event receiver on the ItemUpdating event. Just check the properties of the item and use the properties.Cancel = true; (or something like that) so that even if they disable your JavaScript and save the event anyway, it won't get saved. If you need help adding an event receiver or getting it working just ask.
Edit: In your comment that you say you just want to prevent access to the edit form entirely under certain conditions. For that, I'd make a new webpart/user control and add it to the edit page. In that section you can fetch the appropriate item (the ID of the item will be a query parameter) and see if the page should be 'viewable'. If not, then you can redirect to another page.
Another addition to the above would be attempting to edit the list view such that there is no edit link for certain items. This would be substantially harder, and I doubt it would even be possible (practically) with out of the box webparts. You would need to have an entirely custom list view page in order to control which items have links to an edit page. (Others feel free to correct me here.)

Adding a new row to a dynamic ASP.NET Table Control, at position x - Problems with Viewstate after postback

I am creating a dynamic table control with ASP.NET/C# and the table is being used to hold a form. I need to allow users to click on a button in a row and make a duplicate of that row right below the original. My page is also using AJAX and jQuery.
I have tried to use Table.Rows.AddAt(indexoforigrow+1, newrow) but I get an error that the index is out of the range of values. I figured maybe I wasn't getting the original row's index correctly so I just tossed in a 1 and still got the error.
I also noticed that when I press the button to execute the code, the table disappears. Any ideas on how to fix that?
I am thinking that if I am unable to get these issues fixed I will have to loop through the table and submit the data to a temp table, adding a new row where indicated. Then I would pull all of the data back out and display again.
EDIT
I moved on when I could not get this working and tried to setup my submit functions to loop through the data and submit it to a db and realized that I am experiencing the same issues when clicking the submit button as when I click the add row button. It appears that my issue is really with viewstates/postback.
I did some reading on this and from what I can tell the solution is to re-create the dynamic control on page load every time. But I am confused about how I can do this if I have no idea how many rows/cells I have and how is the information the user entered kept in the form? I have no way of saving the information to a DB or anything because as soon as submit is clicked it all disappears.
Have you considered using a different control? One of the grid controls might better serve your purpose.
I've handled situations (that sound) similar to what you're describing by using the footer of a GridView (among other ways). The big trick is to bind the display object (Table, GridView, etc.) to a list of objects. Then you manipulate the list of objects, rebinding the display object after the list has changed.
You will need to persist this list in some manner, or you could wind up with the list being reset to null. One way would be to save it as part of the session.
At any rate, the idea is to have a display object (GridView) bound to a list of objects. When the user clicks 'add', an item is added to the list. Save the list, then call the GridView.DataBind method.
You are on the right track with re-creating the dynamic table each time the page loads. I have dome similar things and my solution was to keep a client state in a hidden field on the page. Every time you add a row to the table on the client, increment a counter or adjust the state data in the hidden field. Then, on the server-when the page posts back, read from that hidden field to know how many rows were added on the client. You will have to use some kind of naming convention for the new rows you add(and the widgets in them) so you can re-create them on the server.
A simpler option may be to use an UpdatePanel. Rather than try to add the rows on the client, your "add row" button would cause a partial update. The server side code would add the new row to the table and the viewstate would be updated.
I ended getting my data guy to do a bit more processing on his end so that I could just bind a ListView to a sproc. Solved a few of my problems.
Thanks for the helpful comments.
Just returning to this almost a year later because I faced a similar issue in my current project. I was doing a few things wrong my first time around. First, I did indeed need to recreate the controls every load, but I also had to create them earlier in the page cycle. I was trying to create them during page load, which is after the viewstate is loaded.
The controls need to be recreated with the same ID before viewstate is loaded. I went with page init and it worked fine.

Categories