[CLOSED] Rerun template on the fly

**craig2005** · Feb 12, 2011, 2:39 AM

I need to rerun a template on the fly and I can't use direct events because this is being auto loaded into a tab.

I want to be able to click the button in the top bar and have it change a javascript variable. Then reload dataview with the template taking into account the value for a javascript variable used in an if condition.

<tpl if="AllowDelete == true">
       <div><input type="checkbox" name="delPhoto" value="{id}" /></div>
 </tpl>

I've pretty much taken your photos dataview example and used it, but i need a way to delete photos. I was thinking about dragging and dropping into a panel to delete, but i thought this would be easier.

I've also tried removing the if statement from the template and hiding the div with the checkbox and then showing it again when the button is clicked. But that doesn't work well either. The code below doesn't seem to help and paging seems to reset everything anyway.

var elems = Ext.query("input[name=delPhoto]");
for(i=0; i<elems.length; i++) { 
    elems[i].parentElement.style.display = "block";
}

Is this possible?

<script>
var AllowDelete = false;
</script>
<ext:Panel ID="plnPhotosCenterLayout" runat="server" Border="false" Layout="fit">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        ID="plnPhotosImagePanel" 
                        Layout = "fit"
                        Title="Photos">
                        <Items>
                            <ext:DataView ID="dvPhotos" 
                                StoreID="storePhoto"
                                runat="server"
                                AutoHeight = "true"
                                MultiSelect="true"
                                ItemSelector="div.thumb-wrap"
                                <Template ID="Template1" runat="server">
                                    <Html>
                                        <tpl for=".">
                                            <div class="thumb-wrap">
                                                <div class="thumb">
                                                   <a href='{image}' title='{name}'>
                                                   <img src="{thumb}" title="{name}"></a></div>
                                                <span class="x-editable">{name}</span>
                                                <tpl if="AllowDelete == true">
                                                    <div><input type="checkbox" name="delPhoto" value="{id}" /></div>
                                                </tpl>
                                            </div>
                                            
                                        </tpl>
                                        <div class="x-clear"></div>        
                                    </Html>
                                </Template>                   
                             </ext:DataView>
                        </Items>
                        <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button ID="btnDeleteSelected" runat="server" Text="Delete Selected Photos" Icon="Delete">
                                           <Listeners>
                                                <Click Handler="AllowDelete=true; storePhoto.reload(); dvPhotos.refresh();" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                    </ext:Panel>

I left out the store because it's not really relevant and i wanted to keep this as short as possible.

**Daniil** · Feb 12, 2011, 6:07 AM

Originally Posted by craig2005

I need to rerun a template on the fly and I can't use direct events because this is being auto loaded into a tab.

I want to be able to click the button in the top bar and have it change a javascript variable. Then reload dataview with the template taking into account the value for a javascript variable used in an if condition.

Hi,

I'm not sure what exact problem do you have with 'if' statement in template and global variable. Could you clarify?

I tested it using the sample below and it appears to be working fine.

One note is - you could just use .refresh() instead of both .reload() and .refresh() because .refresh() should reload store in according to ExtJS docs.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.DataView&member=refresh

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();
        }
    }
</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>
    
    <script type="text/javascript">
        var allowDelete = false;
    </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 if="allowDelete">
                        Allow delete
                    </tpl>
                </tpl>
            </Html>
        </Template>
    </ext:DataView>
    <ext:Button runat="server" Text="Toggle allowDelete">
        <Listeners>
            <Click Handler="allowDelete = !allowDelete;" />
        </Listeners>
    </ext:Button>
    <ext:Button runat="server" Text="Refresh">
        <Listeners>
            <Click Handler="DataView1.refresh();" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

**Daniil** · Feb 12, 2011, 6:14 AM

Originally Posted by craig2005

I've pretty much taken your photos dataview example and used it, but i need a way to delete photos. I was thinking about dragging and dropping into a panel to delete, but i thought this would be easier.

I've also tried removing the if statement from the template and hiding the div with the checkbox and then showing it again when the button is clicked. But that doesn't work well either. The code below doesn't seem to help and paging seems to reset everything anyway.

var elems = Ext.query("input[name=delPhoto]");
for(i=0; i<elems.length; i++) { 
    elems[i].parentElement.style.display = "block";
}

Is this possible?

<script>
var AllowDelete = false;
</script>
<ext:Panel ID="plnPhotosCenterLayout" runat="server" Border="false" Layout="fit">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        ID="plnPhotosImagePanel" 
                        Layout = "fit"
                        Title="Photos">
                        <Items>
                            <ext:DataView ID="dvPhotos" 
                                StoreID="storePhoto"
                                runat="server"
                                AutoHeight = "true"
                                MultiSelect="true"
                                ItemSelector="div.thumb-wrap"
                                <Template ID="Template1" runat="server">
                                    <Html>
                                        <tpl for=".">
                                            <div class="thumb-wrap">
                                                <div class="thumb">
                                                   <a href='{image}' title='{name}'>
                                                   <img src="{thumb}" title="{name}"></a></div>
                                                <span class="x-editable">{name}</span>
                                                <tpl if="AllowDelete == true">
                                                    <div><input type="checkbox" name="delPhoto" value="{id}" /></div>
                                                </tpl>
                                            </div>
                                            
                                        </tpl>
                                        <div class="x-clear"></div>        
                                    </Html>
                                </Template>                   
                             </ext:DataView>
                        </Items>
                        <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button ID="btnDeleteSelected" runat="server" Text="Delete Selected Photos" Icon="Delete">
                                           <Listeners>
                                                <Click Handler="AllowDelete=true; storePhoto.reload(); dvPhotos.refresh();" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                    </ext:Panel>

I left out the store because it's not really relevant and i wanted to keep this as short as possible.

Well, it would be best to avoid dealing with styles directly in case with DataView, because template is re-rendered during DataView's refreshing (paging causes refresh) and custom styles are just removed.

What about delete selected records? Please look at the example.

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();
        }
    }
</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>
    
    <script type="text/javascript">
        var allowDelete = false;

        var deleteSelectedRecords = function() {
            var records = DataView1.getSelectedRecords();
                store = DataView1.getStore();

            store.remove(records);
        }
    </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>
    </ext:DataView>
    <ext:Button runat="server" Text="Delete selected records">
        <Listeners>
            <Click Fn="deleteSelectedRecords" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

**craig2005** · Feb 12, 2011, 2:31 PM

I'm not sure why it wasn't working for me before. It's working great now. I guess i was just working for too long yesterday.

thanks!

**craig2005** · Feb 13, 2011, 3:21 PM

Originally Posted by Daniil

One note is - you could just use .refresh() instead of both .reload() and .refresh() because .refresh() should reload store in according to ExtJS docs.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.DataView&member=refresh

You actually need the store.reload() for the paging to be updated. But that's only after you delete. For just changing the template, you are fine with just the refresh.

Thanks for the select and delete example. That was really helpful and answered my follow-up question :-)

thanks again!

**Daniil** · Feb 14, 2011, 8:35 AM

Originally Posted by craig2005

You actually need the store.reload() for the paging to be updated. But that's only after you delete. For just changing the template, you are fine with just the refresh.

Yes, you are right.

Thread: [CLOSED] Rerun template on the fly

Thread Tools

Search Thread

Display

[CLOSED] Rerun template on the fly

Similar Threads

[CLOSED] \r and \n in template

[CLOSED] Set Template in Code Behind

[CLOSED] EXT MVC Template with IOC, DI, TDD etc.

[CLOSED] [1.0] ComboBox Template

[CLOSED] Combo with Template

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Rerun template on the fly

[CLOSED] Rerun template on the fly

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us