I am working with ExtJS 5 and am trying to hide the columns of an internally defined grid that extends Ext.Component. I will first explain the motivation behind this.
The thing is, while the grid is loading, the columns show up but then disappear after the loading. This leads to some inconsistency in the UI after the loading is done and the grid is finally rendered (a kind of glitch where columns disappear).
NOTE that by columns, I mean empty columns' titles while the grid is loading (the columns are only filled after the loading). Also, by grid loading, I mean the phase in which the grid data is not rendered, and only a spinner is shown on the grid content space.
The logic to show or hide two of the columns is included in the beforerender of a listeners:
beforerender: async function() {
// some async call to determine a global boolean flag for whether the two columns will be hidden or not; by default the two columns are showing
},
And for some reason, the rendering of the columns themselves, which depends on the global boolean flag set by the async call within the beforerender, does not fulfill the expected behavior of waiting for the async call to FINISH to have the proper global boolean flag in order to show or not.
Hence the inconsistency: the columns would show up at first while loading (and that's because the rendering of the columns does not wait for the boolean flag obtained asynchronously) but then the columns would be hidden (which is the intended behavior after determining the boolean flag).
After some digging around, I figured that a potential solution would be to hide the grid column titles themselves during the loading, so that the inconsistency is invisible (the user cannot see two columns that initially appear then disappear if they simply do not see the initial columns in the first place while loading).
Any suggestions or clues as to how to hide the columns while the grid is loading? I've looked around and saw that loadMask might be a potential path, but am not too sure as to how to implement this.
I believe this can be done pretty easily with through binding.
If the store is defined in your viewmodel, you can bind the loading property of the store to the hidden property of the grid column.
Here a fiddle that shows how to hide one column. The framework version is 6.5 but it shouldn't be too different on 5.X. If{gridStore.loading} bind does not work you can set a custom flag on your VM before and after store load. And bind the hidden property to that.
https://fiddle.sencha.com/#view/editor&fiddle/3f2j
Related
I have a column that contains multiline data and I am trying to keep only the first line visible and hide the rest so I can have a nice displayed list with minimum gap between the lines. Ideally a JSON script to customize the column formatting. I tried to keep only a certain number of characters visible, works but then again the problem is that when you open the record, the information in that multiline field is not showing but only the number of characters we limited to be displayed in the first place.
I was thinking about putting the value of the first line in a different column (single line text) and have the rest in a different column, that i can just hide. but when i hide that column, i am not able to use my power automate flow as it detects that it is not available (...) if i can get that to work then my problem is resolved.
Appreciate everyone's inpu
There is no such function to hide a part of the multiline. We can only show or hide the whole item in the column. SharePoint will display top 5 lines and hide the others as default.
Elaborating on the comment: Power Automate does not have to work with the view that the user sees in the SharePoint browser interface. You can create a new view in SharePoint and include only the columns you need for the workflow. Give the view a nice, descriptive name.
Then, in Power Automate you can use the Get Items command and under Advanced options > Limit Columns by View specify which view you want to use to return the list items. In the screenshot, I'm using a view I called wfView. This will return the columns of that view, plus some of the SharePoint default fluff.
A very simple problem to which I cannot find a solution:
I have a form with 2 (will be more in future) pages. So far I have completed the first page (Main) and now I'm about to do the second page. However, some fields are showing up on both pages.
How do I "anchor" the fields to a specific page so they don't show elsewhere?
Just make sure you have pages of even height, and set for the form AutoSize to True.
Also, hide the vertical scrollbar and implement your own paging control.
1) Go to Design View
2) Cut out the fields (ctrl+X) which are in wrong place
3) Go to sheet property and manually select the desired page location
4) Insert the fields there (ctrl+V)
For some reason it didn't work for me in any other way (ie. I couldn't select my page with a simple click on the page itself, I had to select it through properties).
I'd like to know if it is possible to allow content in a nested widget which isn't allowed by the parent widget.
I tried to allow images in the nested widget (using "img[alt,!src];"). The parent doesn't allow images. I can place images in the inner widget but it's filtered afterwards (e.g. by switching to source code and back).
Unfortunately, as far as I remember this will not be possible. The whole content is first passed through the main filter, and then each of editables passes its content through its filter. Unfortunately, implementing widgets in CKEditor 4.3 (meaning - dozens of major relases since 3.0) we had many architecture limitations and this was one of them.
You can, however:
mark elements which should not be filtered with data-cke-filter="off" attributes, but this solution is pretty inconvenient, because all data-cke-* attributes are automatically removed when getting data from editor, so you would need to add it dynamically when loading data,
use editor.filter.addElementCallback() - with this you can disable filtering of a chosen subtrees. You will need to check context of the element that you're skipping, to allow these images only inside future widgets, but not outside them.
I have a GridView in my main app page and I want to do some background processing for the items that are currently in view for the user (high priority), and then of course do the other items too (low priority).
I can access the ScrollBar and the ScrollViewer, but none of them appear to tell me which of my items are in the current scroll window. I could try to hack this in, but it gets tricky because the number of row/columns change based on the size of the scroll region.
http://msdn.microsoft.com/en-us/library/windows/apps/br209745.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.scrollviewer.aspx
Any help much appreciated!
thanks
There are two general ways you can do this. The first is to get the GridViewItem's AutomationPeer, which actually has a direct method to call. Class information here. I've had problems getting this to actually be usable though. Luckily, there's a second answer. It will require some math to be done, but it's doable.
Get the item container, in this case a GridViewItem, using the GridView's ItemContainerGenerator.
Get the GridView's ScrollViewer. You can search for FindVisualChild<T> methods, there are plenty around.
Do MyGridViewItem.TransformToVisual(MyGridViewScrollViewer).TransformPoint(new Point(0, 0)); This will get you the top left corner of the item, relative to the entire scrollable panel (known as its Extent) of the ScrollViewer (this will be important later).
This will return to you a Point object.
Next, we'll need to find out the range of X values that are currently being displayed in the ScrollViewer.
Note: If you're using a Vertical scrolling ScrollViewer, use the Heights. Horizontal, use the Widths. Both, use both. I am going to do my example using the Horizontal/Width.
Take the HorizontalOffset. This is your current 'lower bound' for the current viewable region.
Take the HorizontalOffset plus the ViewportWidth. This is the upper bound of the current viewable region.
If your Point.X is greater than your lower bound and less than your upper bound, then the item is visible.
If you further need to find out if the whole item is visible, do
this same calculation for Point.X + GridViewItem.Width.
Hope this helps, and happy coding!
You can use VisualTreeHelper to scan the visual tree as Nate suggests, but this is usually not recommended at runtime, especially for tight loops (e.g. checking lots of GridViewItem objects) or complex visual trees. You could do a minor improvement and only calculate the position of these items once and then do a simplified check based on the ScrollViewer.ViewChanged event and offset values, but that still seems a bit too complicated.
If your GridView uses an ItemsPanel that supports virtualization (e.g. the default WrapGrid) - most of the items that are actually loaded into GridView items are actually visible or not far off the screen, so if you bind your GridView to a collection of view models using ItemsSource - you can figure out when these items are accessed by binding to their properties or handling Loaded/Unloaded events on the ItemTemplate and call back to the view models to know when they are getting accessed. That way you can start loading these items when they first start showing up on screen and leave the logic to determine whether they should be loaded to the list control virtualization implementation in the platform.
I have a basic ASP.Net MVC 3 application which has a number of controllers and a number of actions (and subsequently views)
A common feature of the application is to show a pop-up dialog window for basic user input. One of the key features of this dialog process is a faded mask that gets shown behind the dialog box.
Each of these dialog window controls is in a separate Partial View page.
Now, some view pages may use multiple dialog boxes, and therefore include multiple partial views in them - which as is would mean multiple instances of the "mask" element.
What I am trying to find a solution for is to only need to create one instance of a "mask" element regardless of the number of dialog partial views I include, and then the script in each partial dialog will have access to this element (so basically it just needs to be on the page somewhere)
The only real idea I have come up with so far is to add the "mask" element to the master page (or in the original view page) and this will mean it only gets added once. The problem here is that it will be added even when it is not needed (albeit one small single element)
I can live with this, but I would like to know if there is a better way to handle these kinds of scenarios?
A quick idea that came to mind is some kind of master page inheritance hierarchy, So I may have a DialogMasterPage that inherits from the standard current master page. How does that sound for an approach?
Thanks
To do something like this, where each module can register their need for a certain thing in the master page, you can use HttpContext to store a flag of whether you need to write the mask div, and just set that property in each partial. At the end of the master page, if the flag is set, you can then write the mask div if its set to true.
Obviously to make this cleaner you could wrap it all in an HtmlHelper extension or something.
My initial thought is for you to use something like jQuery UI where it handles the masking for you or if you are using something custom you can load the content for the dialog via ajax then show it in the single dialog on the master page.