Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
175
Need to PopUp text box on Cell selection - XamDataGrid
posted

Hello Team,

We are using the Infragistics WPF Controls in our application for rich UI experience- Version 14.2.

I need your help/ suggestions for one of the new requirements in our product.

Our New requirement is regarding the XamDataGrid Cell click scenario. Please find the below description of our requirement.

  • We will be having multiple columns in the grid(DatePicker,dropdown,Text and etc.,). But for one of the grid, we need to show a PopUp Text box on Cell selection/navigation to that cell. Let us consider that one of the field whose name is 'Latest Note' among the fields in the grid.
  • When the user selects or navigates into the Latest Note field the system will launch a popup text box for the user to populate the note into. The cursor will be in the popup text box.
  • The text box will wrap text automatically (no horizontal scroll bar).
  • The text box will increase in depth if user update necessitates (or add vertical scroll bar).
  • When the user navigates out of the popup text box the system will close the popup text box and show the first row of the text from the popup text box in the Latest Note field of the Edit UI.
  • If the user wants to review or edit the text they reselect the Latest Note and the popup text box will launch again.
  • Please find the attached screen print

You can also please advise if we need to add any extra controls like 'Apply' in the popup in order to update the text entered in the popup to grid.

I really need your help on this. Looking forward for your valuable suggestions/ solution on this.

Please let me know if I can provide you any further information on this.

Thanks in Advance.

Thanks & regards,

Raj Kumar.

Parents
  • 34430
    Verified Answer
    Offline posted

    Hello Rajkumar,

    Thank you for your post!

    To achieve the requirement you are looking for, I would recommend starting by handling two events. These two events are the XamDataGrid.CellActivated event, and the LostFocus event of the text editor you are looking to place inside of your popup. The LostFocus event will be for closing the Popup when the text editor loses focus. The CellActivated event, though, is a bit more complex.

    I would also recommend that you already have your Popup object built in your XAML, but just have its IsOpen property set to "False" at the start of your application. Now, to get the popup to show up like in your attached image, I would recommend placing it on the CellValuePresenter of the cell that is being activated. This CellValuePresenter's data context is the data record that it exists in, so if you bind the Text property of your text editor using the following binding, you can ensure that the data item of your cell gets updated when the popup closes:

    {Binding ElementName:thePopup, Path=PlacementTarget.DataContext.DataItem.LatestNote, UpdateSourceTrigger=LostFocus, Mode=TwoWay}

    Moving back to the CellActivated event, this is what I would recommend using to attach the popup's PlacementTarget to the CellValuePresenter. The event arguments of the CellActivated event can get you the cell that has just been activated. This activation will happen when a cell is navigated to. From the cell, you can obtain the Field that the cell sits inside of. If this Field is your "Latest Note" field, you can use the static CellValuePresenter.FromCell(c) method to obtain the CellValuePresenter from the cell in the event arguments. Then, you can set the popup's PlacementTarget property to the returned CellValuePresenter and set the popup's IsOpen property to "True."

    Since you also wish to have the text editor in the popup go into edit mode on startup, I would recommend after setting the popup.IsOpen property, to use a Dispatcher.BeginInvoke(new Action(() => { your code here })) to obtain the text editor from the Child property of the popup. This will ensure that the popup is indeed open when calling the code that sits in the "your code here" section. I would personally recommend utilizing a XamTextEditor in the popup, as this editor has a method named StartEditMode() that you could use at this point. It also has a TextWrapping property, like the TextBox, which you can use to enable the TextWrapping that you wish to see in the popup.

    I have attached a sample project to demonstrate the above. I hope this helps you.

    Please let me know if you have any other questions or concerns on this matter.

    Sincerely,
    Andrew
    Associate Developer
    Infragistics Inc.
    www.infragistics.com/support

    XDGPopupOnCellCase.zip
Reply Children