I am using RadGrid with Nested Hierarchy of Master/Detail Tables. I want to Expand the Master Row when the detail Table inside the row has few rows. I am trying to achieve the same using below code
Private Sub RadGrid_ItemDataBound(ByVal sender As System.Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles dbgView.ItemDataBound
If <considtion to check if row is expanded>Then
e.Item.Expanded = True
End If
However even after setting the Expanded flag as True, if I check the value of the state in QuickWatch, it still remains False. Can someone help me understand why state for that specific row is not getting changed? If this is not the right way in changing the state programmatically, can someone let me know the alternate way?
Try to rebind the grid after setting the Expanded property or simply move the condition in the Page_Load method. Just make sure that after the changing of the value, there is rebind or the NeedDataSource method is executed.
Hope these suggestions help.
For resolving the issue , i used two hidden fields
<asp:HiddenField ID="hdnExpandCollapse" Value="0" runat="server" />
<asp:HiddenField ID="hdnExpanded" Value="0" runat="server" />
Then the following two grid events are used to capture the state of the grid item
/* Start functions used for collapse the grid */
protected void Grid_PreRender(object sender, EventArgs e)
{
int i = 0;
foreach (GridDataItem item in Grid.MasterTableView.Items)
{
GridTableView DetailsTable = (GridTableView)item.OwnerTableView;
System.Collections.Hashtable ht = DetailsTable.DataKeyValues[i];
string strDataKey= ht["DataKey"].ToString();
if (strDataKey == hdnExpandCollapse.Value)
{
if (hdnExpanded.Value == strDataKey)
{
item.Expanded = false;
hdnExpanded.Value = "0";
}
else
{
item.Expanded = true;
hdnExpanded.Value = strDataKey;
}
}
i++;
}
}
protected void Grid_ItemCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)
{
if (e.CommandName == RadGrid.ExpandCollapseCommandName)
{
hdnExpandCollapse.Value = ((EntityClass)(e.Item.DataItem)).DataKey.ToString();
}
}
/* End functions used for collapse the grid */
Reply
Related
When using the collapsed interface on the sales order (AKA the arrow tiny button to the right) is it possible to do one of the following:
Change the fields it displays (eg: right now I am showing some labels for the fields below in those columns). It would be truly amazing if when I click that, I could move some of the fields from the first column to the top 2 rows. Thus, I would move the most important data from the first column to the header.
Alternately, can you make the top be 3-4 rows instead of just 2, or is that hard coded in?
Thanks in advance.
Form container Autosize element and MinHeight/MinHeightLimit properties does affect the behavior of the expander but I haven't found a way to achieve the desired functionality with those.
This is the code which generates the form panel Div element:
/// <summary>
/// Create the content division control.
/// </summary>
private WebControl CreateContentDiv()
{
WebControl div = this.TemplateContainer;
this.hasStaticContent = this.AutoSizeWindow;
if (hasStaticContent) foreach (Control c in div.Controls)
{
IAutoSizedControl sc = c as IAutoSizedControl;
if (sc != null && sc.AutoSize.Enabled) { hasStaticContent = false; break; }
var wc = c as WebControl;
var hc = c as System.Web.UI.HtmlControls.HtmlControl;
if (wc != null || hc != null)
{
string pos = (wc != null) ? wc.Style["position"] : hc.Style["position"];
if (pos == "absolute") { hasStaticContent = false; break; }
}
}
if (!hasStaticContent && (!ControlHelper.GetHeight(this).IsEmpty || this.AutoSize.Enabled))
div.Height = Unit.Percentage(100);
// mark division as editable region
if (this.DesignMode)
div.Attributes.Add(DesignerRegion.DesignerRegionAttributeName, "0");
return div;
}
I also found elements that suggests the 2 row value is hardcoded for the purpose of showing the expander control (if content height is taller then 2 row show expander control):
/// <summary>
///
/// </summary>
protected override void OnLoad(EventArgs e)
{
if (this.Page != null && !this.Page.IsCallback)
{
var gen = (PXLayoutGenerator)this.TemplateContainer;
gen.CreateStackByRules();
if (!this.CaptionAsLink && !this.AutoSize.Enabled)
{
if (this.AllowCollapse == null && gen.Rows > 2) this.AllowCollapse = true;
//if (this.AllowCollapse == true && !this.CaptionVisible) this.CreateCollapseImage();
}
}
base.OnLoad(e);
}
With JavaScript it would possible to roll your own logic to control the UI layer.
Setting the TabPanel style height property will achieve the desired rendering and it should be possible to hook the expander events too:
document.getElementById('ctl00_phF_form_t0').style.height = '117px';
To re-order the editor control based on the form collapsed state is a bit more difficult depending on the layout but can be achieved similarly by setting the CSS display property:
var isVisible = false;
document.getElementById(alse'ctl00_phF_form_t0_edCustomerID_text').parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = isVisible ? 'block' : 'none';
I have a processing page that I want to automatically select certain types of rows. I can set the select checkbox to true, but what property needs to be set on the row so that the process button will act on it? Right now nothing happens unless I check another row.
public void EDASNShipProj_RowSelected(PXCache sender, PXRowSelectedEventArgs e)
{
PXUIFieldAttribute.SetDisplayName<EDASNShipProj.customerLocationID>(sender, "Ship Location");
var row = (EDASNShipProj)e.Row;
if ( row.UsrTruckNbr != 0 )
row.Selected = true;
PXUIFieldAttribute.SetVisible<SOShipment.selected>(sender, null, true);
}
I figured this out after searching the base source code for ".Selected=true". I found several places which included two extra lines. I added them to my condition and now the checked rows are included in the process list. Hopefully this will help others.
if (row.UsrTruckNbr != 0)
{
row.Selected = true;
sender.IsDirty = true;
sender.SetStatus(row, PXEntryStatus.Updated);
}
How to display popup exceptions instead of the one with a red dot on the row for the line items? I was able to have them in RowInserting for a little bit but after a series of code changes I get the red dot one instead. It even did not create a new row as I wanted but now it does. RowInserting event:
protected virtual void SOLine_RowInserting(PXCache sender, PXRowInsertingEventArgs e)
{
var listMissingOEdesc = new List<int>();
var select = Base.Transactions.Select();
foreach (SOLine row in select)
{
var isOEDesc = IsOEDescEnabled(sender, row);
var rowExt = PXCache<SOLine>.GetExtension<SOLineExt>(row);
if (isOEDesc == true)
if (rowExt.UsrOedesc == null)
listMissingOEdesc.Add(row.SortOrder.Value);
}
if (listMissingOEdesc.Count > 0)
{
throw new PXException("Line items with sort order {0} do not have OE Desc filled out. Cannot add a new line.", string.Join(", ", listMissingOEdesc));
}
else
Base.Actions.PressSave();
}
Thanks!
There is no easy way, if any at all, to display popup exception and prevent the grid from inserting a new row. The way the framework is designed, PXGrid first inserts a new row on the webpage. After that PXGrid sends a callback to the application server either requesting default field values for the new row (if PXGrid's Mode has InitNewRow="True") or sends all values captured from the webpage to the application server, so the new row can be inserted in the PXCache. Whenever an event handler, on the field or row level, gets invoked, the new row will still be visible to the user on the web page. Even if you invoke Ask method on the Transactions data view within one of the event handlers, the new row won't disappear from the webpage.
With all that said, the best and probably the only way to display popup exception and prevent the grid from inserting a new row is by replacing the standard Add New Row button on PXGrid with a custom action, which will first run the validation and display popup exception, if necessary. Otherwise, a new row will be inserted into PXGrid. It's also required to enable or disable the custom NewSOTran action based on the state of the standard PXGrid's Insert button.
public class SOOrderEntryExt : PXGraphExtension<SOOrderEntry>
{
public void SOOrder_RowSelected(PXCache sender, PXRowSelectedEventArgs e)
{
NewSOTran.SetEnabled(Base.Transactions.AllowInsert);
}
public PXAction<SOOrder> NewSOTran;
[PXButton(CommitChanges = true)]
[PXUIField]
protected void newSOTran()
{
var listMissingOEdesc = new List<SOLine>();
var select = Base.Transactions.Select();
foreach (SOLine row in select)
{
var isOEDesc = !string.IsNullOrEmpty(row.TranDesc);
if (isOEDesc == true)
listMissingOEdesc.Add(row);
}
if (listMissingOEdesc.Count > 0)
{
throw new PXException("Cannot add a new line.");
}
var newTran = Base.Transactions.Insert();
Base.Transactions.Cache.ActiveRow = newTran;
}
}
In Aspx there will required 3 major chages:
SyncPositionWithGraph property set to True for PXGrid:
<px:PXGrid ID="grid" runat="server" DataSourceID="ds" Width="100%" TabIndex="100"
SkinID="DetailsInTab" StatusField="Availability" SyncPosition="True" Height="473px"
SyncPositionWithGraph="True" >
the standard AddNew action must be replaced by a custom NewSOTran action:
<ActionBar>
<Actions>
<AddNew ToolBarVisible ="False" />
</Actions>
<CustomItems>
<px:PXToolBarButton CommandName="NewSOTran" CommandSourceID="ds"
DisplayStyle="Image">
<Images Normal="main#AddNew" />
<ActionBar GroupIndex="0" Order="2" />
</px:PXToolBarButton>
...
</CustomItems>
</ActionBar>
AllowAddNew property set to false in the Mode section of PXGrid to prevent the standart Insert button from execution when users use keyboard shortcuts or double-click on PXGrid:
<Mode InitNewRow = "True" AllowFormEdit="True" AllowUpload="True" AllowDragRows="true"
AllowAddNew="false" />
To select new records’ first cell and switch it to the edit mode (unless the first cell is read-only), it's also required to subscribe to the Initialize and ToolsButtonClick client events of PXGrid:
<ClientEvents Initialize="initTransactionsGrid"
ToolsButtonClick="transactionsGriduttonClick" />
and define the following JavaScript functions:
var isInitEvents = false;
function initTransactionsGrid(a, b) {
if (isInitEvents) return;
isInitEvents = true;
a.events.addEventHandler("afterRepaint", editNewSOTran);
}
function editNewSOTran() {
if (lastActiveRowIndex != null) {
var grid = px_alls["grid"];
if (grid.activeRow) {
var activeRowIndex = grid.rows.indexOf(grid.activeRow);
if (activeRowIndex != lastActiveRowIndex) {
grid.activeRow.activateCell(0, false);
grid.beginEdit();
}
}
lastActiveRowIndex = null;
}
}
var lastActiveRowIndex;
function transactionsGriduttonClick(sender, args) {
if (args.button && args.button.commandName == "NewSOTran") {
if (sender.activeRow)
lastActiveRowIndex = sender.rows.indexOf(sender.activeRow);
else
lastActiveRowIndex = -1;
return;
}
lastActiveRowIndex = null;
}
To package custom JavaScript code into customization, in Layout Editor you can drag and drop a Java Script element from the Add Controls tab and copy your entire JavaScript code into the Script property.
When scrolling down, Groove moves the header up, outside of the viewable area just like a regular ListView header. When scrolling back up it moves the header back down into the viewable area right away, regardless of the current vertical scroll offset. The header seems to be part of the ListView content because the scrollbar includes the header.
How can this be implemented in a Windows 10 UWP app?
You can do this by utilizing the ListView's internal ScrollViewer's ViewChanged event.
First you got to obtain the internal ScrollViewer. This is the simplest version, but you might want to use one of the many VisualTreeHelper Extensions around to do it safer and easier:
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var border = VisualTreeHelper.GetChild(MyListView, 0);
var scrollviewer = VisualTreeHelper.GetChild(border, 0) as ScrollViewer;
scrollviewer.ViewChanged += Scrollviewer_ViewChanged;
}
In the EventHandler, you can then change the visibility of your header depending on the scroll direction.
private void Scrollviewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
var sv = sender as ScrollViewer;
if (sv.VerticalOffset > _lastVerticalOffset)
{
MyHeader.Visibility = Visibility.Collapsed;
}
else
{
MyHeader.Visibility = Visibility.Visible;
}
}
This is the basic idea. You might wan't to add some smooth animations instead of just changing the visibility.
After looking around a bit and experimentation I can now answer my own question.
One can use an expression based composition animation to adjust the Y offset of the the header in relation to scrolling. The idea is based on this answer. I prepared a complete working example on GitHub.
The animation is prepared in the SizeChanged event of the ListView:
ScrollViewer scrollViewer = null;
private double previousVerticalScrollOffset = 0.0;
private CompositionPropertySet scrollProperties;
private CompositionPropertySet animationProperties;
SizeChanged += (sender, args) =>
{
if (scrollProperties == null)
scrollProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollViewer);
var compositor = scrollProperties.Compositor;
if (animationProperties == null)
{
animationProperties = compositor.CreatePropertySet();
animationProperties.InsertScalar("OffsetY", 0.0f);
}
var expressionAnimation = compositor.CreateExpressionAnimation("animationProperties.OffsetY - ScrollingProperties.Translation.Y");
expressionAnimation.SetReferenceParameter("ScrollingProperties", scrollProperties);
expressionAnimation.SetReferenceParameter("animationProperties", animationProperties);
var headerVisual = ElementCompositionPreview.GetElementVisual((UIElement)Header);
headerVisual.StartAnimation("Offset.Y", expressionAnimation);
};
The OffsetY variable in the animationProperties will drive the animation of the OffsetY property of the header. The OffsetY variable is updated in the ViewChanged event of the ScrollViewer:
scrollViewer.ViewChanged += (sender, args) =>
{
float oldOffsetY = 0.0f;
animationProperties.TryGetScalar("OffsetY", out oldOffsetY);
var delta = scrollViewer.VerticalOffset - previousVerticalScrollOffset;
previousVerticalScrollOffset = scrollViewer.VerticalOffset;
var newOffsetY = oldOffsetY - (float)delta;
// Keep values within negativ header size and 0
FrameworkElement header = (FrameworkElement)Header;
newOffsetY = Math.Max((float)-header.ActualHeight, newOffsetY);
newOffsetY = Math.Min(0, newOffsetY);
if (oldOffsetY != newOffsetY)
animationProperties.InsertScalar("OffsetY", newOffsetY);
};
While this does animate correctly, the header is not stacked on top of the ListView items. Therefore the final piece to the puzzle is to decrease the ZIndex of the ItemsPanelTemplate of the ListView:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Canvas.ZIndex="-1" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Which gives this as a result:
In my code below, I'm showing a context menu when the user right-clicks on a cell in my DataGridView. I'd also like the cell that the user right-clicks on to change background color so that they can see the cell they've "right-click selected". Is there a way to add something to my code below so that this occurs?
private void dataGridView2_MouseClick(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Right)
{
ContextMenu m = new ContextMenu();
MenuItem mnuCopy = new MenuItem("Copy");
mnuCopy.Click += new EventHandler(mnuCopy_Click);
m.MenuItems.Add(mnuCopy);
int currentMouseOverRow = dataGridView2.HitTest(e.X, e.Y).RowIndex;
m.Show(dataGridView2, new Point(e.X, e.Y));
}
}
So obviously you've hacked into my workstation and have seen some of the stuff I've worked on recently. I exaggerate a bit because I didn't do exactly what you're trying to do but with a little bit of tweaking I was able to.
I would modify your MouseClick event to get the DGV's CurrentCell. Once you have it, set the CurrentCell's Style property with the SelectionBackColor you want. Something like this:
// ...
DataGridView.HitTestInfo hti = dataGridView2.HitTest(e.X, e.Y);
if (hti.Type == DataGridViewHitTestType.Cell) {
dataGridView2.CurrentCell = dataGridView2.Rows[hti.RowIndex].Cells[hti.ColumnIndex];
dataGridView2.CurrentCell.Style = new DataGridViewCellStyle { SelectionBackColor = System.Drawing.Color.Yellow};
}
//...
The above is a bit 'air code-y' (in other words I haven't attempted to merge it with your code and run it) but I hope you get the idea. Notice that I check through the hit test that a cell was clicked; if you don't do this and the user does not click a cell you might have some problems.
Now there's the problem that this code will change the SelectionBackColor for the all the cells you right click. That's easy to restore this property in the DGV's CellLeave event:
private void dgvBatches_CellLeave(object sender, DataGridViewCellEventArgs e) {
dataGridView2.CurrentCell.Style = new DataGridViewCellStyle { SelectionBackColor = System.Drawing.SystemColors.Highlight };
}
I'll have to remember this visual affect; thanks for asking the question.