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
315
clientside onclick for button added to WebGrid
posted

Is this possible? I'd like to launch a modal popup on click, have the user complete a form of data, then close the popup form to refresh the grid on the parent page.

 

many thanks 

  • 100
    posted

    Here's how I did it.

    1. Add a ScriptManager.
    2. Add an UpdatePanel with a ContentTemplate inside.

    UltraWebGrid Settings

    3. Inside the ContentTemplate add the UltraWebGrid.
    4. Do not set a data source.
    5. Add a button column.
    6. Wire up the onclickcellbutton event.

    WebDialogWindow Settings

    7. Below the grid add a WebDialogWindow.
    8. Set the Left and Top attributes.
    9. Set Modal="true".
    10. Set WindowState="hidden".
    11. Inside the Header tag, hide the maximize and minimize boxes.

    Example: MaximizeBox-Visible="false" MinimizeBox-Visible="false".

    12. After the Header add the ContentPane.
    13. Inside the ContentPane add a Template.
    14. Inside the Template add two textboxes and a button.
    15. Double-click the button to wire up the click event.

    Code-Behind

    16. Create a UltraWebGrid bind method to set up the UltraWebGrid's DataSource and to call the DataBind() method.
    17. In the Page_Load event, call that method to bind the UltraWebGrid if the page is not a postback.
    18. In the ClickCellButton event, get the information from the table that you will need to use.

    Example:
    string CutomerID = e.Cell.Row.Cells[1].Value.ToString();
    string ContactName = e.Cell.Row.Cells[3].Value.ToString();

    19. Show the WebDialogWindow.

    Example: WebDialogWindow1.WindowState = Infragistics.Web.UI.LayoutControls.DialogWindowState.Normal;

    20. Set the value of the textboxes.

    Example:
    CustomerIDTextBox.Text = CutomerID;
    ContactNameTextBox.Text = ContactName;

    21. In the click event of the button on the WebDialogWindow, update the database from the values in the WebDialogWindow.

    Example:
    string Sql = "UPDATE Customers SET ContactName = '"
    + ContactNameTextBox.Text
    + "' WHERE CustomerID = '"
    + CustomerIDTextBox.Text
    + "'";  

    22. Hide the WebDialogWindow.

    Example: WebDialogWindow1.WindowState = Infragistics.Web.UI.LayoutControls.DialogWindowState.Hidden;

    23. Call the UltraWebGrid bind method you created in step 16.

    Your form will not flicker thanks to the update panel, but your data will be refreshed.

    This was my first post, how did I do?

  • 3338
    posted

    I would recommend using a webdialog control as your modal popup. since the webdialog is part of the current page, view state is maintained.

    When the dialog is closed you can update your recordset with the data form the text fields on the dialog window and rebind/refresh the datagrid quite easily.

     

     

  • 45049
    Verified Answer
    posted

    If you're using a ColumnType of Button, handle the grid's CellButtonClick client-side event, and in this launch your modal dialog.

    Refreshing the grid when you close the popup sounds trickier, and I'm not familiar enough with these events to provide useful guidance.  To actually refresh the grid, you could either cause a postback of the page holding the grid, or if your grid is in a WARP or similar control, you can call that container control's refresh functionality.