What's New?

[CLOSED] How to Display Confirmation Message From an ImageCommand Column Dynamically

  1. #1
    Sep 20, 2011, 2:49 PM

    [CLOSED] How to Display Confirmation Message From an ImageCommand Column Dynamically

    I have a grid which has a column that dynamically displays an image command for "Approve" OR "Unapprove".

    Only when the command is "Unapprove", do I need to display a confirmation message and, when confirmed by the user, I will perform an action defined in the direct event.

    Sample code below:

    <%@ Page Language="vb" AutoEventWireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not ExtNet.IsAjaxRequest Then
            Dim data As New List(Of Object)
            With data
                .Add(New With {
                        .reportid = 1,
                        .desc = "1st Quarter Returns",
                        .source = "Wizard",
                        .status = "Pending Approval",
                        .statusid = 3,
                        .lastmodified = "1/1/2010",
                        .uploadedby = "Indiana Jones"})
                .Add(New With {
                        .reportid = 2,
                        .desc = "2nd Quarter Returns",
                        .source = "Upload",
                        .status = "Approved",
                        .statusid = 4,
                        .lastmodified = "12/31/2010",
                        .uploadedby = "Hans Solo"})
            End With
            ReportsStore.DataSource = data
            ReportsStore.DataBind()
        End If
    End Sub
    
    Protected Sub ReportGrid_Command(ByVal sender As Object, ByVal e As DirectEventArgs)
        Dim reportid = CInt(e.ExtraParams("key"))

        Select Case e.ExtraParams("command")
            Case "approve"
                'approve the report
            Case "unapprove"
                'unapprove the report
        End Select
    End Sub



</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .actionLink
        {
            color: #0033ff;
        }
        .actionLink:hover
        {
            color: #0033ff;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">

        var prepareReportGridCommands = function (grid, commands, record, row, col, value) {
            var s = record.get('statusid');
            if (s == 3 || s == 15) {
                commands.push({
                    command: 'approve',
                    iconCls: 'actionLink',
                    text: 'Approve'
                });
            }
            if (s == 4 || s == 16) {
                commands.push({
                    command: 'unapprove',
                    iconCls: 'actionLink',
                    text: 'Unapprove'
                });
            }
        };

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <div>
        <ext:GridPanel ID="GridPanel1" runat="server" AutoExpandColumn="desc" Border="false">
            <Store>
                <ext:Store ID="ReportsStore" runat="server">
                    <Reader>
                        <ext:JsonReader IDProperty="reportid">
                            <Fields>
                                <ext:RecordField Name="reportid" Type="Int" />
                                <ext:RecordField Name="desc" Type="String" />
                                <ext:RecordField Name="source" Type="String" />
                                <ext:RecordField Name="status" Type="String" />
                                <ext:RecordField Name="statusid" Type="Int" />
                                <ext:RecordField Name="lastmodified" Type="date" />
                                <ext:RecordField Name="uploadedby" Type="String" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <SortInfo Field="desc" Direction="DESC" />
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Description" Header="Description" DataIndex="desc" Width="300" />
                    <ext:Column ColumnID="Source" Header="Source" DataIndex="source" />
                    <ext:Column ColumnID="Status" Header="Status" DataIndex="status" Width="205">
                        <PrepareCommands Fn="prepareReportGridCommands" />
                        <Commands>
                            <ext:ImageCommand Icon="MoneyDollar" CommandName="dummy" Hidden="true" />
                        </Commands>
                    </ext:Column>
                    <ext:DateColumn Align="Center" ColumnID="LastModified" Header="Last Modified" DataIndex="lastmodified" />
                    <ext:Column ColumnID="UploadedBy" Header="Uploaded By" DataIndex="uploadedby" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar ID="Pager" runat="server" PageSize="10" HideRefresh="true" />
            </BottomBar>
            <DirectEvents>
                <Command OnEvent="ReportGrid_Command">
                    <ExtraParams>
                        <ext:Parameter Name="command" Value="command" Mode="Raw" />
                        <ext:Parameter Name="key" Value="record.id" Mode="Raw" />
                    </ExtraParams>
                </Command>
            </DirectEvents>
        </ext:GridPanel>
    </div>
    </form>
</body>
</html>
    Last edited by Daniil; Sep 20, 2011 at 6:06 PM. Reason: [CLOSED]
  2. #2
    Sep 20, 2011, 4:00 PM
    Hi,

    I can suggest you to use Command listener + DirectMethod combination.

    Example

    <%@ Page Language="vb" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not ExtNet.IsAjaxRequest Then
            Dim data As New List(Of Object)
            With data
                .Add(New With {
                        .reportid = 1,
                        .desc = "1st Quarter Returns",
                        .source = "Wizard",
                        .status = "Pending Approval",
                        .statusid = 3,
                        .lastmodified = "1/1/2010",
                        .uploadedby = "Indiana Jones"})
                .Add(New With {
                        .reportid = 2,
                        .desc = "2nd Quarter Returns",
                        .source = "Upload",
                        .status = "Approved",
                        .statusid = 4,
                        .lastmodified = "12/31/2010",
                        .uploadedby = "Hans Solo"})
            End With
            ReportsStore.DataSource = data
            ReportsStore.DataBind()
        End If
    End Sub
     
    <DirectMethod()>
    Public Sub ReportGrid_Command(ByVal command As String, ByVal recordId As Integer)
        Select Case command
            Case "approve"
                ExtNet.Msg.Alert("approve", recordId).Show()
            Case "unapprove"
                ExtNet.Msg.Alert("unapprove", recordId).Show()
        End Select
    End Sub
 
 
 
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
    <style type="text/css">
        .actionLink {
            color: #0033ff;
        }
        .actionLink:hover {
            color: #0033ff;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">

        var prepareReportGridCommands = function (grid, commands, record, row, col, value) {
            var s = record.get('statusid');
            if (s == 3 || s == 15) {
                commands.push({
                    command: 'approve',
                    iconCls: 'actionLink',
                    text: 'Approve'
                });
            }
            if (s == 4 || s == 16) {
                commands.push({
                    command: 'unapprove',
                    iconCls: 'actionLink',
                    text: 'Unapprove'
                });
            }
        };

        var onCommand = function (command, record, rowIndex, colIndex) {    
            if (command === "approve") {
                Ext.net.DirectMethods.ReportGrid_Command(command, record.id);
            } else if (command === "unapprove") {
                Ext.Msg.confirm(
                    'Confirm', 
                    'Do you confirm?', 
                    function (answer) {
                        if (answer === "yes") {
                            Ext.net.DirectMethods.ReportGrid_Command(command, record.id);
                        }; 
                    }
                );
            }
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            AutoExpandColumn="desc"
            AutoHeight="true">
            <Store>
                <ext:Store ID="ReportsStore" runat="server">
                    <Reader>
                        <ext:JsonReader IDProperty="reportid">
                            <Fields>
                                <ext:RecordField Name="reportid" Type="Int" />
                                <ext:RecordField Name="desc" Type="String" />
                                <ext:RecordField Name="source" Type="String" />
                                <ext:RecordField Name="status" Type="String" />
                                <ext:RecordField Name="statusid" Type="Int" />
                                <ext:RecordField Name="lastmodified" Type="date" />
                                <ext:RecordField Name="uploadedby" Type="String" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <SortInfo Field="desc" Direction="DESC" />
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Description" DataIndex="desc" Width="300" />
                    <ext:Column Header="Source" DataIndex="source" />
                    <ext:Column Header="Status" DataIndex="status" Width="205">
                        <PrepareCommands Fn="prepareReportGridCommands" />
                        <Commands>
                            <ext:ImageCommand Icon="MoneyDollar" CommandName="dummy" Hidden="true" />
                        </Commands>
                    </ext:Column>
                    <ext:DateColumn Header="Last Modified" DataIndex="lastmodified" />
                    <ext:Column Header="Uploaded By" DataIndex="uploadedby" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="10" HideRefresh="true" />
            </BottomBar>
            <Listeners>
                <Command Fn="onCommand" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Sep 20, 2011, 4:47 PM
    Thanks for the reply. The solution that I settled on was using a <Confirmation> tag with a beforeconfirm attribute.

    Example below:

    <%@ Page Language="vb" AutoEventWireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not ExtNet.IsAjaxRequest Then
            Dim data As New List(Of Object)
            With data
                .Add(New With {
                        .reportid = 1,
                        .desc = "1st Quarter Returns",
                        .source = "Wizard",
                        .status = "Pending Approval",
                        .statusid = 3,
                        .lastmodified = "1/1/2010",
                        .uploadedby = "Indiana Jones"})
                .Add(New With {
                        .reportid = 2,
                        .desc = "2nd Quarter Returns",
                        .source = "Upload",
                        .status = "Approved",
                        .statusid = 4,
                        .lastmodified = "12/31/2010",
                        .uploadedby = "Hans Solo"})
            End With
            ReportsStore.DataSource = data
            ReportsStore.DataBind()
        End If
    End Sub
    
    Protected Sub ReportGrid_Command(ByVal sender As Object, ByVal e As DirectEventArgs)
        Dim reportid = CInt(e.ExtraParams("key"))

        Select Case e.ExtraParams("command")
            Case "approve"
                'approve the report
            Case "unapprove"
                'unapprove the report
        End Select
    End Sub



</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .actionLink
        {
            color: #0033ff;
        }
        .actionLink:hover
        {
            color: #0033ff;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">

        var prepareReportGridCommands = function (grid, commands, record, row, col, value) {
            var s = record.get('statusid');
            if (s == 3 || s == 15) {
                commands.push({
                    command: 'approve',
                    iconCls: 'actionLink',
                    text: 'Approve'
                });
            }
            if (s == 4 || s == 16) {
                commands.push({
                    command: 'unapprove',
                    iconCls: 'actionLink',
                    text: 'Unapprove'
                });
            }
        };

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <div>
        <ext:GridPanel ID="GridPanel1" runat="server" AutoExpandColumn="desc" Border="false">
            <Store>
                <ext:Store ID="ReportsStore" runat="server">
                    <Reader>
                        <ext:JsonReader IDProperty="reportid">
                            <Fields>
                                <ext:RecordField Name="reportid" Type="Int" />
                                <ext:RecordField Name="desc" Type="String" />
                                <ext:RecordField Name="source" Type="String" />
                                <ext:RecordField Name="status" Type="String" />
                                <ext:RecordField Name="statusid" Type="Int" />
                                <ext:RecordField Name="lastmodified" Type="date" />
                                <ext:RecordField Name="uploadedby" Type="String" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <SortInfo Field="desc" Direction="DESC" />
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Description" Header="Description" DataIndex="desc" Width="300" />
                    <ext:Column ColumnID="Source" Header="Source" DataIndex="source" />
                    <ext:Column ColumnID="Status" Header="Status" DataIndex="status" Width="205">
                        <PrepareCommands Fn="prepareReportGridCommands" />
                        <Commands>
                            <ext:ImageCommand Icon="MoneyDollar" CommandName="dummy" Hidden="true" />
                        </Commands>
                    </ext:Column>
                    <ext:DateColumn Align="Center" ColumnID="LastModified" Header="Last Modified" DataIndex="lastmodified" />
                    <ext:Column ColumnID="UploadedBy" Header="Uploaded By" DataIndex="uploadedby" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar ID="Pager" runat="server" PageSize="10" HideRefresh="true" />
            </BottomBar>
            <DirectEvents>
                <Command OnEvent="ReportGrid_Command">
                    <ExtraParams>
                        <ext:Parameter Name="command" Value="command" Mode="Raw" />
                        <ext:Parameter Name="key" Value="record.id" Mode="Raw" />
                    </ExtraParams>
                <Confirmation Message="Are you sure you want to unapprove this report?" BeforeConfirm="return (command == 'unapprove');" Title="Confirm" ConfirmRequest="true" />
                </Command>
            </DirectEvents>
        </ext:GridPanel>
    </div>
    </form>
</body>
</html>
  4. #4
    Sep 20, 2011, 6:07 PM
    It looks I misunderstood you.

    Confirmation of DirectEvent is the best solution.

Similar Threads

  1. [CLOSED] [1.0] Confirmation Message
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 30, 2011, 4:46 PM
  2. [CLOSED] Confirmation Message
    By FpNetWorth in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 04, 2011, 12:58 PM
  3. [CLOSED] [1.0] - How to use Raw message in DirectEvent Confirmation message
    By drkoh in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 18, 2010, 9:34 PM
  4. [CLOSED] Confirmation message question
    By methode in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 06, 2009, 8:23 AM
  5. About ext:ImageCommand confirmation ?
    By eelittle in forum 1.x Help
    Replies: 2
    Last Post: Jun 03, 2009, 5:45 PM

Posting Permissions