[CLOSED] View text data in new windows or combobox

[ppettigrew]

Hi,

I have a GridView and I want a column with long text.

I want to load this text only if user click on it. Example, a combobox and when I open it, my LOG text is show. Or, a button in my row and when I click on it, I show a new windows with my LOG text.

This is my actual code:

function approvalStoreLoad() {
    transactType = Ext.getCmp('criteriaType').getValue();
    dateFrom = Ext.getCmp('criteriaDateFrom').getValue().dateFormat('Y-m-d'); 
    dateTo = Ext.getCmp('criteriaDateTo').getValue().dateFormat('Y-m-d');

    enableApplyCancel(false);
        if (Ext.getCmp('gridPanelEmployee').getSelectionModel().getSelected() != null) {
            var conn = new Ext.data.Connection();
            conn.request({
                    url: '<%= Url.Action("GetApprovalLevel", "Approval") %>',
                    method: 'GET',
                    params: { employeeId: Ext.getCmp('gridPanelEmployee').getSelectionModel().getSelected().get('Id') },
                    success: function(responseObject) {
                    approvalLevel = Ext.decode(responseObject.responseText);
                }
            });
        }
}

<ext:store id="approvalStore" runat="server" autoload="false" groupfield="Date">
    <Reader>
        <ext:JsonReader Root="data" IDProperty="Quantity">
            <Fields>
                <ext:RecordField Name="Date" Type="Date" />
                <ext:RecordField Name="ProjectName" />
                <ext:RecordField Name="ApprovalLevel" Type="String" />
                <ext:RecordField Name="ApproverName" />
                <ext:RecordField Name="ApprovalDate" Type="Date" />
                <ext:RecordField Name="IsApproved" />
                <ext:RecordField Name="Quantity" Type="Float" />
                <ext:RecordField Name="ApproverName" />
                <ext:RecordField Name="ClientName" />
                <ext:RecordField Name="Description" />
                <ext:RecordField Name="PayCode" />
                <ext:RecordField Name="IsBillable" />
                <ext:RecordField Name="LOG" />
            </Fields>
        </ext:JsonReader>
    </Reader>
    <Listeners>
        <Load Handler="approvalStoreLoad()" />
    </Listeners>
    <BaseParams>
        <ext:Parameter Name="employeeId" Value="selectedEmployee()" Mode="Raw" />
        <ext:Parameter Name="startDate" Value="criteriaDateFrom.getValue()" Mode="Raw" />
        <ext:Parameter Name="endDate" Value="criteriaDateTo.getValue()" Mode="Raw" />
        <ext:Parameter Name="approvalType" Value="criteriaType.getValue()" Mode="Raw" />
    </BaseParams>
</ext:store>

<ext:GridPanel ID="gridPanelApproval" Border="false" runat="server" StoreID="approvalStore">
    <ColumnModel>
        <Columns>
            <ext:Column DataIndex="fieldLOG" Header="LOG" ColumnID="fieldLOG" Width="240">

Do you have an idea for me?

I have an attachement for show you exemple with windows application.

Thanks.

[klaus.schwarz]

For such occasions I made a "MsgBox" in the base class of my page.
Add a DirectEvent to the "Command" of the grid, load the data in the function of the DirectEvent and call the "MsgBox"

  Public Function MsgBox(ByVal Title As String, ByVal Msg As String) As Integer
        Dim rc As Integer

        Dim btn As New Ext.Net.Button
        With btn
            .ID = "MsgBox01_btn01"
            .Text = "OK"
            .X = 110
            .Y = 180
            .Width = 100
            .OnClientClick = "Msgbox01.close();"
            '.Listeners.Click.Fn = "Msgbox01.Close();"
        End With

        Dim txt As New Ext.Net.TextArea
        With txt
            .ID = "Msgbox01_lbl01"
            .Text = Msg
            .X = 6
            .Y = 6
            .Width = 296
            .Height = 172
            .ReadOnly = True
        End With

        Dim wnd As New Ext.Net.Window
        With wnd
            .ID = "Msgbox01"
            .Height = 240
            .Width = 320
            .Title = Title
            .Layout = "Absolute"
        End With
        wnd.Items.Add(btn)
        wnd.Items.Add(txt)
        wnd.Render(Me.Form)

        Return rc
    End Function

[Daniil]

Hello, ppettigrew!

I suggest you to use the code from the following examples:
https://examples1.ext.net/#/GridPane...etails_Window/
or
https://examples1.ext.net/#/GridPanel/Miscellaneous/Details_Window_Remote/

Just link the respective methods from these examples with respective events of a control which is chose to show details.

[Vladimir]

Hi,

Please see the following sample

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    }

    private object[] Data
    {
        get
        {
            string text = "Long long long long long long long long text";
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am", text },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am", text },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am", text },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am", text }
            };
        }
    }
</script>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    

    <ext:ResourcePlaceHolder runat="server" />

    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
        
        var openMemo = function(record){
            new Ext.Window({
                title : "MEMO",
                width : 200,
                height : 200,
                modal : true,
                closeAction : "close",
                layout : "fit",
                items : [
                    {
                        xtype : "textarea",
                        readOnly : true,
                        value : record.get('memo')
                    }
                ]
            }).show();
        };        
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    
    <h1>Simple Array Grid</h1>
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        StripeRows="true"
        Title="Array Grid" 
        TrackMouseOver="true"
        Width="700" 
        Height="350">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            <ext:RecordField Name="memo" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                <ext:Column Header="Price" DataIndex="price">                  
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column Header="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                <ext:Column Header="MEMO" DataIndex="Memo">
                    <Renderer Handler="return Ext.util.Format.htmlEncode('<MEMO>'); " />
                    
                    <Commands>
                        <ext:ImageCommand CommandName="openmemo" Icon="ApplicationForm" />
                    </Commands>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel runat="server" SingleSelect="true" />
        </SelectionModel>
        <Listeners>
            <Command Handler="if(command == 'openmemo'){openMemo(record);}" />
        </Listeners>
    </ext:GridPanel>          
</body>
</html>

[ppettigrew]

Hi,

Thanks for your reply, this work fine.

It is possible to show icon only if data is present?

This is for show icon for my record with LOG text. Other have no icon.

The text it is load on grid render or just when openMemo is call? If my text is very long, I prefere load it only if I click ion it.

Patrick

[Vladimir]

Hi,

You have to use PrepareCommand property of the column and hide the command when it is required

Please see the following sample
https://examples1.ext.net/#/GridPane.../Cell_Command/

Also please note that all fields (including memo) will be rendered to the page always therefore (if memo is too large) it is better
- exclude memo field from the page
- make request to the server when command is clicked and retrieve the memo from DB for particular field (for example use Command DirectEvent, pass record id, in the DirectEvent handler retrieve memo value for required row, create window and show it)

[ppettigrew]

Hi,

Thank you, this is work fine.

Can I use my icon file in your <ext> image command?

<ext:ImageCommand CommandName="Dollar" Icon="MoneyDollar" />

Change MoneyDollar for MyIcon?

Thanks.

[Vladimir]

Hi,

Yes, use IconCls property and set css rule name

IconCls="myIcon"

   .myIcon{
         background-image:url(myimage.png) !important;
   }

[ppettigrew]

Hi,

I have try DirectEvent with your example for open a memo only when I click on my item but with no success.

Do you have an example for use it with a memo in a gridview?

Thank.

[Vladimir]

Hi,

Please post the code what you tried