Retain Expanded Gridview on postback - javascript

I have a master gridview where each row can be expanded to show a child gridview.
The master grid loads with all children collapsed.
I do the expanding/contracting of the child grids in javascript so its nice an quick when loaded.
The problem I have is that when the page does a post back (e.g. when the user clicks to sort one of the columns) all the child grids get set back to a collapsed state. I want the expanded/collapsed state to be remembered.
The examples I've found so far all seem to do the expanding/collapsing on the server side.
But this seems really clunky and slow.
I'm thinking of trying to pass the expanaded/collapsed state of each row back to the server using a hidden field in each row of the master grid.
This hidden field would be set/cleared by the same JS routine which does the expanding/collapsing.
This seems like a good way to do it to me, but since I can't find any examples online I'm concerned I'm missing something???
Any reason not to do it using a hidden field?

Yes, track state in a hidden field. AJAX control toolkit does this for it's controls. Hidden field is a common approach. I'd highly recommend it, and that is the reason why you are experiencing this, because client mechanisms have no ability to "remember" preferences on postbacks, but hidden fields bridge that gap nicely.

Related

Sencha ExtJS skipping rows with Checkboxmodel's select all box

I am trying to make a checkbox grid that some of the values are read only (it is a list of features and some features are required but I want the user to be able to see them all in one place) and retrieved via an endpoint into a store.
I tried making the items unselectable, but I could not get it to function. So, I currently have the beforeselect listener returning false if a particular feature phrase pops up (voice in this instance) so that I can possibly add similar later. The problem with this is that the header select all box will not toggle since not every checkbox is checked. Looking at the JS in the browser shows me the checkbox is a span (which personally strikes me as an odd choice but nothing I can do about it), and I haven't been able to trace what is going on behind the scenes.
The question is this. Is there a better way to make some of the rows unselectable (and thereby uneditable) while keeping the select all working properly, or is there a way to manually toggle the header checkbox since all it does is enumerate through the grid and either check or uncheck based on its state?
Thanks.

Creating breadcrumbs for table navigation VUEJS

I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!

Best ASP.NET dynamic user control load approach

I have a food menu ASP.NET Web app. I use a datagrid to display the menu items. When the user clicks an item in the grid, a user control opens up below the item to allow the user to enter item details and add the item to an order. The item detail user control in turn contains several user controls with RadioButtonLists, DataLists and TextBoxes. The RadioButtonLists and DataLists are populated from a database. The user should be able to open and close several items at a time, like Windows Browser with sub-folders.
I've tried doing this with strait ASP.NET AJAX using ScriptManger, etc.. I set the item detail user control Visible property to True, and populate the list controls during the OnPreRender event. This is slow and sort of complicated because of the ASP.NET page/control life cycle.
I've been looking into using JQuery requests to ASHX files or Page Methods on the server to generate the item detail controls with maybe RenderControl and sending the generated HTML back to JQuery.
Questions:
Am I on the right track?
Would this sort of approach work for rendering and sending back HTML that may be complex and long?
Would JQuery requests be more efficient than my current approach?
Can anybody point me in the right direction for references and/or examples?
Thanks for the bandwidth.
I found a lot of help that led to my solution at:
http://weblogs.asp.net/sanjeevagarwal/archive/2008/07/22/Dynamically-create-ASP.NET-user-control-using-ASP.NET-Ajax-and-Web-Service.aspx

Radio buttons not retaining selection when user controls are posted back

I am facing some problems when page is posted back partially. I have some radio buttons based on which I am making tr display="" and display="none" by javascript. After that I am adding rows gridview. The gridview contains empltyTemplate and footer to add new rows. But when I add row in grid view, the user control is posted back and hence all the tr becomes displa="none" which is default when page is loaded. I tried to keep gridview in update panel but it not working. Hierarchy of my controls is as below.
Level-1-Master page--->Level-2-master page--->Level 3-.aspx page--->Level 4-user control--->Level-5 -multiple accordians-->Level-6: 1 user control in each accordian..
code is too long to past here.. I tried to keep update panel inside user control(Level 6) but it was not working. After some googling I found that update pane not works if it is inside accrdian. So I tried to keep all accrdian inside update panel but in that case .aspx page is not posted back but all user controls placed inside accrodian are posted back so the selection is set as they are on default load.
I want all selection to retain when the last level user control is posted back.
The situation is quite complex to understand but this is what the things are..How to solve my problem?
Changes made to the DOM from JavaScript are not retained cross-PostBack; the server has no idea what you've done, and therefore has no way to track it.
To solve this, you either need to have your JS code update state on the server side with a Callback or Ajax call -- or perhaps have it update a hidden input field in the form that reflects the state of your tags, and have the server look there and update the rendered HTML accordingly.

Can I get some recommendations for list control with image buttons?

I'm looking for recommendations how to implement a list of items shown as images that the user can toggle on/off on the client-side, which then can be tracked and saved on the server side.
I looked at the possibly using the asp.net list view control but as far as I can tell the client side API isn't that great so I'd need to write a significant amount of client side code.
Any suggestions on a way to do it better?
From the jQuery side, I'm a big fan of the jQuery UI model, where the UI is entirely separate from the back end. Not everyone agrees with this (cough JSF cough) but if that's the route you're willing to go, it wouldn't be that much work. What I would do:
have asp.net render out a multi-select INPUT field.
hide it with CSS
via jQuery parse out the value/text pairs (which would be value/URL)
render out the HTML you want based on the value/URLs (Such as DIVs with an IMG in each).
apply a click event to each DIV that, in turn, updates the selected value(s) of your INPUT field.
Now, the reason I like this method is it keeps the server-side code simple. And as a front-end dev, the simpler I can keep it for the back end team, the happier they seem to be.
The problem I've found with most commercial .net components is the fact that they spit out their own custom UI layer that is often full of convoluted JS and overly-complicated markup--wich makes them rather inflexible from a custom UI perspective.
Telerik has an ASP.NET AJAX control called "ListView" that allows a user to select multiple images (in the URL sample click the items in the bottom of the two panels). Because it is AJAX the selections are syncing Live with the server, however this could work if a List or similar object in the ASP.NET page was doing a List.Add() or List.Remove() as items are added and removed.
http://demos.telerik.com/aspnet-ajax/listview/examples/selecting/defaultcs.aspx

Categories

Resources