[CLOSED] Add RowSelectEvent via codebehind

**78fede78** · Nov 16, 2010, 8:55 AM

Where am I doing wrong?

Ext.Net.RowSelectionModel rw = new RowSelectionModel { SingleSelect = true };
rw.DirectEvents.RowSelect.Event += RowChildSelect;
rw.DirectEvents.RowSelect.EventMask.ShowMask = true;
grid.SelectionModel.Add(rw);

This is the complete code:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Import Namespace="ListView=Ext.Net.ListView"%>

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (X.IsAjaxRequest)
        {
            //We do not need to DataBind on an DirectEvent
            return;
        }
        
        List<object> data = new List<object>();
        
        for (int i = 1; i <= 10; i++)
        {
            data.Add(new { ID = "S" + i, Name = "Supplier " + i});
        }
        
        this.Store1.DataSource = data;
        this.Store1.DataBind();
    }
    
    private void RemoveFromCache(string id)
    {
        X.Js.Call("removeFromCache", id);
    }

    private void AddToCache(string id)
    {
        X.Js.Call("addToCache", id);
    }


    protected void RowChildSelect(object sender, DirectEventArgs e)
    {
        X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
      
    }

    protected void BeforeExpand(object sender, DirectEventArgs e)
    {
        string id = e.ExtraParams["id"];
        
        Store store = new Store { ID = "StoreRow_"+id };

        JsonReader reader = new JsonReader();
        reader.IDProperty = "ID";
        reader.Fields.Add("ID", "Name");
        store.Reader.Add(reader);

        List<object> data = new List<object>();
        
        for (int i = 1; i <= 10; i++)
        {
            data.Add(new { ID = "P"+i, Name = "Product " + i });
        }

        store.DataSource = data;

        this.RemoveFromCache(store.ID);
        store.Render();
        this.AddToCache(store.ID);
        
        GridPanel grid = new GridPanel{
             ID = "GridPanelRow_"+id,
             StoreID = "{raw}StoreRow_" + id,
             Height = 200
        };
        
        grid.ColumnModel.Columns.Add(new Column
                                         {
                                             Header = "Products's Name",
                                             DataIndex = "Name"
                                         });
        grid.ColumnModel.ID = "GridPanelRowCM_" + id;

        grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });


        Ext.Net.RowSelectionModel rw = new RowSelectionModel { SingleSelect = true };
        rw.DirectEvents.RowSelect.Event += RowChildSelect;
        rw.DirectEvents.RowSelect.EventMask.ShowMask = true;
        grid.SelectionModel.Add(rw);
           
        

        //important
        X.Get("row-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick"}, true);

        this.RemoveFromCache(grid.ID);
        grid.Render("row-" + id, RenderMode.RenderTo);
        this.AddToCache(grid.ID);
    }
    
</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>RowExpander with GridPanel - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
    <ext:ResourcePlaceHolder runat="server" Mode="Script" />
    
    <script type="text/javascript">
        window.lookup = [];
        
        var clean = function () {
            if (window.lookup.length > 0) {
                RowExpander1.collapseAll();
                
                Ext.each(window.lookup, function (control) {
                    if (control) {
                        control.destroy();
                    }
                });
                
                window.lookup = [];
            }            
        };

        var removeFromCache = function(c) {
            var c = window[c];
            window.lookup.remove(c);
            
            if (c) {
                c.destroy();
            }
        };

        var addToCache = function(c) {
            window.lookup.push(window[c]);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <h1>Row Expander Plugin with GridPanel</h1>
        
        <p>The caching is presented, GridPanel renders once only (until view refresh)</p>
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:JsonReader IDProperty="ID">
                    <Fields>
                        <ext:RecordField Name="ID" />
                        <ext:RecordField Name="Name" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StoreID="Store1" 
            TrackMouseOver="false"
            Title="Expander Rows with ListView" 
            Collapsible="true"
            AnimCollapse="true" 
            Icon="Table" 
            Width="600" 
            Height="600">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Supplier" DataIndex="Name" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" ForceFit="true">
                    <Listeners>
                        <BeforeRefresh Fn="clean" />
                    </Listeners>
                </ext:GridView>
            </View>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <Plugins>
                <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
                    <Template runat="server">
                        <Html>
                            <div id="row-{ID}" style="background-color:White;"></div>
                        </Html>
                    </Template>
                    <DirectEvents>
                        <BeforeExpand 
                            OnEvent="BeforeExpand" 
                            Before="return !body.rendered;" 
                            Success="body.rendered=true;">
                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
                            <ExtraParams>
                                <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                            </ExtraParams>
                        </BeforeExpand>
                    </DirectEvents>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>

**Daniil** · Nov 16, 2010, 9:16 AM

Hi,

ASP.NET is stateless system. It means that controls are not recreated automatically during each request (including DirectEvent).
RowSelect's DirectEvent handler requires a control RowSelectionModel but it is not exist because this was created during another request.

So, there is two ways to achieve your requirement.

1. Recreating a RowSelectionModel during each request (in Page_Load, Page_Init, ...);

2. Using a DirectMethod.

Example

[DirectMethod]
public void RowChildSelect()
{
    X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
   
}

...
Ext.Net.RowSelectionModel rw = new RowSelectionModel { SingleSelect = true };
rw.Listeners.RowSelect.Handler = "Ext.net.DirectMethods.RowChildSelect({eventMask: {showMask: true, minDelay: 2000}});";
grid.SelectionModel.Add(rw);
...

**78fede78** · Nov 16, 2010, 11:28 AM

hello Daniil
I used the solution of the direct method
I only have a small problem

eventMask appears across the whole page(Figure 1).

does not target

 rw.Listeners.RowSelect.Handler = "Ext.net.DirectMethods.RowChildSelect({eventMask: {showMask: true, minDelay: 2000, Target:'CustomTarget',CustomTarget:'FormPanelGeneral'}});";

**Daniil** · Nov 16, 2010, 11:53 AM

Hi,

Client side properties are lower-case. Please use "target" instead of "Target", "customTarget" instead of "CustomTarget", etc.

Example

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

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

<script runat="server">
    [DirectMethod]
    public void Test()
    {
        X.Msg.Alert("Server", "Hello!").Show();
    }
</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>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:FormPanel ID="FormPanel1" runat="server" Width="200" Height="200" Html="I'm FormPanel" />
    <ext:Button runat="server" Text="Click me">
        <Listeners>
            <Click Handler="Ext.net.DirectMethods.Test({
                eventMask: {
                    showMask: true, 
                    minDelay: 2000, 
                    target: 'customtarget', 
                    customTarget: 'FormPanel1'
                }
            });" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

Thread: [CLOSED] Add RowSelectEvent via codebehind

Thread Tools

Search Thread

Display

[CLOSED] Add RowSelectEvent via codebehind

Similar Threads

[CLOSED] Tooltip not being set in the Codebehind...

[CLOSED] ext.UserControlLoader in CodeBehind

[CLOSED] [1.0] Add GridFilters in codeBehind

[CLOSED] OnClick in CodeBehind

[CLOSED] Add panel from codebehind

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Add RowSelectEvent via codebehind

[CLOSED] Add RowSelectEvent via codebehind

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us