What's New?

Any event when an item is added or deleted from dataview?

  1. #1
    Dec 21, 2011, 10:53 AM

    Any event when an item is added or deleted from dataview?

    Hi,
    I am using ext.net dataview.

    I need to call a javascript function, when a new item gets added to the dataview, or an existing item gets deleted from dataview.

    This is my dataview

    <ext:DataView ID="dv" CollapseMode="Mini" runat="server" AutoScroll="true"
                                                                    StoreID="StoreMS" SingleSelect="true" ItemSelector="div.thumb-wrap1" AutoHeight="True">
                                                                    <Template ID="Template3" runat="server">
                                                                        <Html>
                                                                            <div class="odpanaroma" id="odtestdiv">
                                                                             <tpl for=".">
                                                                             <div class="odpanaromaitem">
                                                                              <div onclick="javascript:SaveData();">
                                                                               <div class="thumb-wrap-android" id="{TemplateId}" >                                                                              
                                                                                  <img  style="width:45px;height:45px"  src="{BgImage}" title="{caption}" >                                            
                                                                                    <span class="x-editable"  style="width:60px; height: 25px; color : {ButtonTextColor};  background-color :{CaptionBackground} ">{caption}</span>
                                                                               </div>
                                                                               </div>
                                                                               </div>
                                                                             </tpl>
                                                                            </div>
                                                                            <div class="x-clear">
                                                                             </div>
                                                                        </Html>
                                                                    </Template>
                                                                    <PrepareData Fn="prepareData" />                                                                      
                                                                </ext:DataView>
    Any help is really appreciated

    Regards
    Jophin
    Last edited by Daniil; Dec 22, 2011 at 6:54 AM. Reason: Please use [CODE] tags
  2. #2
    Dec 22, 2011, 7:07 AM
    Hi,

    Please the Store's Add and Remove events.
    http://docs.sencha.com/ext-js/3-4/#!...tore-event-add
    http://docs.sencha.com/ext-js/3-4/#!...e-event-remove
  3. #3
    Dec 22, 2011, 7:36 AM
    Daniil

    Hi,

    Please the Store's Add and Remove events.
    http://docs.sencha.com/ext-js/3-4/#!...tore-event-add
    http://docs.sencha.com/ext-js/3-4/#!...e-event-remove

    Hi Danil,

    Thanks for the reply.

    What my situation is, I need to call the javascript function ,only after the dataview is ready.

    So after adding or deleting item to the store , I am calling

    dataview = Ext.getCmp('<%=androidDataVwMS.ClientID %>')
    dataview.refresh();
    So I need to call my javascript function only after the dataview is ready after the refresh operation.

    So I would like to know if there is any event which gets fired after the dataview is ready, or anything else which will help me

    Regards
    Jophin
    Last edited by jophinm; Dec 22, 2011 at 7:49 AM.
  4. #4
    Dec 22, 2011, 7:40 AM
    I think you can try a Store's Load listener with some delay, for example, Delay="250". It should be enough.
  5. #5
    Dec 22, 2011, 8:01 AM
    Hi Danil,

    What I am doing right now is, something similar to what you said,

    I am putting a delay of 1000 ms in the PrepareData event handler of dataview
    MyJavascriptFunc() 
    <ext:DataView ID="androidDataVwMS" CollapseMode="Mini" runat="server" AutoScroll="true"
                                                                    StoreID="StoreMS" SingleSelect="true" ItemSelector="div.thumb-wrap1" AutoHeight="True">
                                                                    <Template ID="Template3" runat="server">
                                                                        <Html>
                                                                            <div class="odpanaroma" id="odtestdiv">
                                                                             <tpl for=".">                                                                             
                                                                             <div class="odpanaromaitem">
                                                                              <div onclick="javascript:SaveData();">
					                                                           <div class="thumb-wrap-android" id="{Id}" >                                                                              
                                                                                  <img  style="width:45px;height:45px"  src="{BgImage}" title="{caption}" >                                            
                                                                                    <span class="x-editable"  style="width:60px; height: 25px; color : {TextColor};  background-color :{Background} ">{caption}</span>
								                                               </div>
                                                                               </div>                                                                            
                                                                               </div>
                                                                             </tpl>
                                                                            </div>
                                                                            <div class="x-clear">
                                                                             </div>
                                                                        </Html>
                                                                    </Template>
                                                                    <PrepareData Fn="MyJavascriptFunc()" />
                                                                </ext:DataView>


<script type="text/javascript">
    
    var MyJavascriptFunc= function (data) {
        
                setTimeout("TheFunctionINeedToCallAfterDataviewIsReady()", 1000);
            

        return data;
    };

</script>
    But I would like to know where there is any other work aroung

    Regards
    Jophin
  6. #6
    Dec 22, 2011, 11:38 AM
    Well, in my real application I would add the "refresh" event for DataView on ExtJS level.

    Example
    <%@ 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)
        {
            Store store = this.DataView1.GetStore();
            store.DataSource = new object[]
            {
                new object[] { "test1" },
                new object[] { "test2" },
                new object[] { "test3" }
            };
            store.DataBind();
        }
    }
 
    protected void UpdateDataView(object sender, DirectEventArgs e)
    {
        Store store = this.DataView1.GetStore();
        store.DataSource = new object[]
            {
                new object[] { "new test1" },
                new object[] { "new test2" },
                new object[] { "new test3" }
            };
        store.DataBind();
    }
</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>
    
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    <script type="text/javascript">
        Ext.DataView.prototype.initComponent = Ext.DataView.prototype.initComponent.createSequence(function () {
            this.addEvents("refresh");
        });

        Ext.DataView.prototype.refresh = Ext.DataView.prototype.refresh.createSequence(function () {
            if (this.wasInitialRefresh) {
                this.fireEvent("refresh", this);
            } else {
                this.wasInitialRefresh = true;
            }
        });
    </script>
 
    <style type="text/css">
        .my-dataview .my-item {
            color: Green;
        }
         
        .my-dataview .x-view-selected {
            background-color: Gray;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:DataView
            ID="DataView1"
            runat="server"
            AutoHeight="true"
            Cls="my-dataview"
            MultiSelect="true"
            ItemSelector="div.my-item">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Template runat="server">
                <Html>
                    <tpl for=".">
                        <div class="my-item">{test}</div>
                    </tpl>
                </Html>
            </Template>
            <Listeners>
                <Render Handler="this.on('refresh', function () {
                                     alert('refresh');
                                 });" />
            </Listeners>
        </ext:DataView>
        <ext:Button runat="server" Text="Update">
            <DirectEvents>
                <Click OnEvent="UpdateDataView" />
            </DirectEvents>
        </ext:Button>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Dataview afterrefresh event
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 09, 2011, 6:57 AM
  2. [CLOSED] Need RowNumbererColumn to update store when a row is added or deleted.
    By Shanth in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Sep 26, 2011, 12:24 PM
  3. [CLOSED] dataview delete item(s)
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 01, 2011, 1:46 PM
  4. [CLOSED] Could not refresh the combobox data in the UI after I added the new item?
    By csssi_coolite in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 19, 2010, 11:44 AM
  5. [CLOSED] Add 2 contextMenu to DataView, one for an item and the other for the background
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 18, 2009, 1:40 PM

Posting Permissions