Hello,

Yes, I actually remembed working on a content item for this that I never got published, sorry for that. But I still have the content on my hard drive. Here it is:

Our new ASP.NET Aikido generation controls seem to be accepted very well by our customers and I see an increased demand for information related to them. One particular pattern that I see is that people are interested in integrating new and legacy controls, especially in data-driven scenarios involving grids.

So I decided to prepare something that I believe is a good real-worlds scenario - a databound UltraWebGrid control that allows row editing inside WebDialogWindow (could be modal if needed), all of this “ajaxified” and without page refreshes – so that our end-users are happy.  Since a picture is worth a thousand words, here is what we are trying to achieve (and we want to achieve it with the least amount of code possible)

The controls I will be mixing together are UltraWebGrid, WebDialogWindow, WebAsyncRefreshPanel (WARP), and vanilla asp:DetailsView control for editing the data inside the window, of course using Northwind – Employees. Here are the steps:

1)      Figure out how to pass an unique ID of the record to the dialog window (primary key is better, row index will also work if you factor out paging). I believe the easiest way to do that is to use template column and databinding expressions, example

 

<igtbl:TemplatedColumn>

    <CellTemplate>

        <a href="#" onclick="editRow('<%# Eval("EmployeeID") %>')">Edit In Window</a>                          

    </CellTemplate>

</igtbl:TemplatedColumn>

 

2)      Now that we have unique record ID, we need to define the javascript function that will open an WebDialogWindow instance with edit information about the record. Here is the code:

<script type="text/javascript">  

    function editRow(employeeID)

    {

        var dialogWindow = $find('<%=WebDialogWindow1.ClientID%>');

        var contentPane = dialogWindow.get_contentPane();      

        contentPane.set_contentUrl("Edit.aspx?employeeID=" + employeeID);

        dialogWindow.show();

    }

</script>

 

3)      Now we need to create the Edit.aspx page, that will be shown inside the WebDialogWindow. It will consist of a DetailsView in edit mode by default, Access/SqlDataSource retrieving and updating the record (using the auto-generated CRUD operations of declarative datasources) and WARP panel to “ajaxify” the update. First of all, we need to populate our datasource with the respective row, by passing the primary key as a SelectParameter for the SqlDataSource Select Statement.

 

    protected override void OnInit(EventArgs e)

    {

        base.OnInit(e);

        SqlDataSource1.SelectParameters.Clear();

        SqlDataSource1.SelectParameters.Add("EmployeeID", Request.QueryString["EmployeeID"]);      

    }

 

 

4)      Then, we can add two buttons, Save and Cancel. Save will call a server-side method that will just commit the changes using the UpdateItem method of DetailsView, while close will close the window and do nothing. Both of them will be inside WARP, to avoid the postbacks. We also need one additional label (span) to show message to end-users what we are doing (waiting, updating, ready, etc). Also note the RefreshRequest and RefreshResponse client-side events of WARP that we are handling – we are using these for showing status messages on closing the window on success.

 

<igmisc:WebAsyncRefreshPanel ID="WebAsyncRefreshPanel1" runat="server"

            Height="50px" Width="300px" RefreshRequest="updateStarted"

            RefreshResponse="updateCompleted">          

                    <asp:Button runat="server" ID="Button1" Text="Save" onclick="Button1_Click" />

                    <asp:Button runat="server" ID="Button2" Text="Cancel" OnClientClick="closeDialogWindow(); return false;" />  

                    <br />

                    <span id="loadingMessage" style="font-family:Verdana; font-size: 8pt;"></span>                  

        </igmisc:WebAsyncRefreshPanel>

     

 <script type="text/javascript">

        function updateStarted()

        {

            var loadingMessageSpan = $get("loadingMessage");

            loadingMessageSpan.style.color = "red";

            loadingMessageSpan.innerHTML = "Updating data, please wait...";          

        }

        function updateCompleted()

        {

            var loadingMessageSpan = $get("loadingMessage");

            loadingMessageSpan.style.color = "green";

            loadingMessageSpan.innerHTML = "Data successfully updated.";     

          

            closeDialogWindow(); 

          

            this.parent.refreshGrid();      

        }

        function closeDialogWindow()

        {

            var dialogWindow = this.parent.$find("WebDialogWindow1");

            dialogWindow.hide();

        }

        </script>

 

5)      Now that the actual data row is updated and dialog window is closed, we also need to refresh the grid in the parent window. Did you notice the this.parent.refreshGrid() call in the updateCompleted() javascript function? This is the last bit of the puzzle – we just need our UltraWebGrid to be wrapped inside WARP panel, and then we can use the client-side API of WARP to force refresh.  “this.parent” is how you can access the parent page from within a page hosted in WebDialogWindow.

 

<igmisc:WebAsyncRefreshPanel runat="server" ID="WebAsyncRefreshPanel1">

  <igtbl:UltraWebGrid ID="UltraWebGrid1" runat="server" DataSourceID="SqlDataSource1" ... />

</igmisc:WebAsyncRefreshPanel>

 

    function refreshGrid()

    {

        var warp = ig_getWebControlById("<%= WebAsyncRefreshPanel1.ClientID %>");

        warp.refresh();

    }

 

And this is it – now we have a complete example for editing rows in a new window, complete with full AJAX support – and all of this with just 4 lines of server-side code and approximately 20 of javascript. Not bad! You can also extend the sample to feature “Add New Row” in a window, “View Details” in a window, you can also make the window modal if you wish – WebDialogWindow support that out of the box.