What's New?

Enable/Disable Tabs within UpdatePanel

Page 1 of 2 12 LastLast
  1. #1
    Aug 25, 2009, 1:28 PM

    Enable/Disable Tabs within UpdatePanel

    Hi there,

    Hope someone can help me on this one:

    I am trying to enable/disable the tabs of my TabPanel on my DetailsView ItemInserted event.
    The following code works let's say on Page_Load, but it doesn't work on DV ItemInserted.
    The reason I am using AddScript instead of Server Method is because the tabs are in my parent UpdatePanel which is not being refreshed at that moment.

    Can anyone guide on this, please?

               foreach (TMSTab tb in TabPanel2.Tabs)
            {
                if (!tb.Title.Trim().Equals("Details"))
                {
                    string sExtScript = string.Empty;
                    if (itm == 0)
                        sExtScript = string.Format("Ext.getCmp('{0}').setDisabled(true);", tb.ClientID);
                    else
                        sExtScript = string.Format("Ext.getCmp('{0}').setDisabled(false);", tb.ClientID);

                    Coolite.Ext.Web.ScriptManager.GetInstance(this.Page).AddScript(sExtScript);
                }
            }

    Thanks
    Leo.
  2. #2
    Aug 25, 2009, 4:03 PM

    RE: Enable/Disable Tabs within UpdatePanel

    Hi,

    Any chance to see example which we can test?
  3. #3
    Aug 26, 2009, 9:05 AM

    RE: Enable/Disable Tabs within UpdatePanel

    Hi Vlad,

    It been driving me insane!
    Just found out that putting exactly the same code within my main project it does not work.
    The below code works fine in a Test project a have.

    Cannot see differences that could affect it. Can you think in anything?

    Both are Framework 3.5 with exactly the same Coolite.Ext.Web.dll.

    Please advice?
    Leo.

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        DisableAll();
    }

    protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
    {
        //EnableAll();
        SetDisabledScript(false);
    }

    protected void EnableTabs_Click(object sender, EventArgs e)
    {
        //EnableAll();
        SetDisabledScript(false);
    }

    protected void DisableTabs_Click(object sender, EventArgs e)
    {
        //EnableAll();
        SetDisabledScript(true);
    }         

    private void DisableAll()
    {
        for (int i = 1; i < TabPanel2.Tabs.Count; i++)
        {
            TabPanel2.Tabs[i].Disabled = true;
        }
    }

    private void EnableAll()
    {
        for (int i = 1; i < TabPanel2.Tabs.Count; i++)
        {
            TabPanel2.Tabs[i].Enabled = true;
        }
    }

    private void SetDisabledScript(bool flag)
    {
        string sExtScript = string.Empty;

        for (int i = 1; i < TabPanel2.Tabs.Count; i++)
        {
            sExtScript = string.Format("Ext.getCmp('{0}').setDisabled({1});", TabPanel2.Tabs[i].ClientID, flag.ToString().ToLower());

            Coolite.Ext.Web.ScriptManager.GetInstance(this.Page).AddScript(sExtScript);
        }
    }    
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Enable/Disable Tabs Page</title>
</head>
<body>
    <form id="form1" enctype="multipart/form-data" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:ScriptManager ID="ASPScriptManager1" runat="server" ScriptMode="Release" LoadScriptsBeforeUI="true"
        AsyncPostBackTimeout="600" EnablePartialRendering="true" />
    <ext:TabPanel ID="TabPanel2" runat="server" AutoHeight="true" ActiveTabIndex="0"
        Title="TabPanel2">
        <Tabs>
            <ext:Tab ID="TabDetails" runat="server" Title="Details" IconCls="tabs" AutoHeight="true">
                <Body>
                    <asp:UpdatePanel ID="UpdatePanelDetails" runat="server" UpdateMode="Conditional"
                        ChildrenAsTriggers="true">
                        <ContentTemplate>
                            
                                <asp:DetailsView ID="DetailsView1" runat="server" Height="300px" Width="125px" AutoGenerateRows="False"
                                    DefaultMode="Insert" DataSourceID="ObjectDataSource1" OnItemInserted="DetailsView1_ItemInserted"
                                    ValidationGroup="Details">
                                    <Fields>
                                        <asp:TemplateField HeaderText="id">
                                            <EditItemTemplate>
                                                <asp:TextBox ID="TextBoxIdEdit" runat="server" Text='<%# Eval("id") %>' />
                                            </EditItemTemplate>
                                            <InsertItemTemplate>
                                                <asp:TextBox ID="TextBoxIdInsert" runat="server" Text='<%# Eval("id") %>' />
                                            </InsertItemTemplate>
                                            <ItemTemplate>
                                                <asp:Label ID="LabelId" runat="server" Text='<%# Bind("id") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="a">
                                            <EditItemTemplate>
                                                <asp:TextBox ID="TextBoxAEdit" runat="server" Text='<%# Eval("a") %>' />
                                            </EditItemTemplate>
                                            <InsertItemTemplate>
                                                <asp:TextBox ID="TextBoxAInsert" runat="server" Text='<%# Eval("a") %>' />
                                            </InsertItemTemplate>
                                            <ItemTemplate>
                                                <asp:Label ID="LabelA" runat="server" Text='<%# Bind("a") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="b">
                                            <EditItemTemplate>
                                                <asp:TextBox ID="TextBoxBEdit" runat="server" Text='<%# Eval("b") %>' />
                                            </EditItemTemplate>
                                            <InsertItemTemplate>
                                                <asp:TextBox ID="TextBoxBInsert" runat="server" Text='<%# Eval("b") %>' />
                                            </InsertItemTemplate>
                                            <ItemTemplate>
                                                <asp:Label ID="LabelB" runat="server" Text='<%# Bind("b") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:CommandField ButtonType="Button" ShowInsertButton="True" ShowEditButton="True"
                                            CausesValidation="true" ValidationGroup="Details" ItemStyle-HorizontalAlign="Center">
                                            <ItemStyle HorizontalAlign="Center"></ItemStyle>
                                        </asp:CommandField>
                                    </Fields>
                                </asp:DetailsView>
                                <asp:Button ID="EnableTabs" runat="server" Text="Enable Tabs" &#111;nclick="EnableTabs_Click" />
                                <asp:Button ID="DisableTabs" runat="server" Text="Disable Tabs" &#111;nclick="DisableTabs_Click" />
                                <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Select"
                                    InsertMethod="Insert" TypeName="DataSource"></asp:ObjectDataSource>
                            

                        </ContentTemplate>
                    </asp:UpdatePanel>
                </Body>
            </ext:Tab>
            <ext:Tab ID="Tab1" runat="server" Title="Tab1">
                <Body>
                        Tab1
                    </Body>
            </ext:Tab>
            <ext:Tab ID="Tab2" runat="server" Title="Tab2">
                <Body>
                        Tab2
                    </Body>
            </ext:Tab>
            <ext:Tab ID="Tab3" runat="server" Title="Tab3">
                <Body>
                        Tab3
                    </Body>
            </ext:Tab>
            <ext:Tab ID="Tab4" runat="server" Title="Tab4">
                <Body>
                        Tab4
                    </Body>
            </ext:Tab>
        </Tabs>
    </ext:TabPanel>
    </form>
</body>
</html>
    public class DataSource
{
    private System.Data.DataTable GetDataTable()
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.Add("id", typeof(int));
        dt.Columns.Add("a", typeof(string));
        dt.Columns.Add("b", typeof(string));
        dt.Columns.Add("c", typeof(bool));
        dt.Columns.Add("d", typeof(int));
        dt.Columns.Add("e", typeof(float));
        dt.Columns.Add("f", typeof(decimal));
        dt.PrimaryKey = new System.Data.DataColumn[] { dt.Columns["id"] };

        for (int i = 1; i < 10; ++i)
        {
            dt.Rows.Add(new object[] { i, "a" + i, "b" + (10 - i), i % 2 == 0, i * 2, i * 1.14159, i * 3.14 });
        }

        return dt;
    }

    public System.Data.DataTable Select()
    {
        return GetDataTable();
    }

    public void Insert()
    {
        //fake insert
    }
}
  4. #4
    Aug 26, 2009, 9:29 AM

    RE: Enable/Disable Tabs within UpdatePanel

    Hi,

    In your real application what response from UpdatePanel (for example, see in FireBug)? Do you get any js errors?
  5. #5
    Aug 26, 2009, 9:59 AM

    RE: Enable/Disable Tabs within UpdatePanel



    Hi

    No errors at all. I set Firebug to break on all errors and keep looking for something weird, but I I got is the right response with the html expected. The only problem is really that I cannot enable the tabs again.
    When I first tested the example I sent you in my real application page it was enabling the tab on button click, but not on DetailsView ItemInserted. So I started to Google and found some people saying that registering javascript on iteminserted would not work. But then you asked me to do the simplified page and I saw that it works!
    Running out of ideas how to test it.

    Your support is very appreciated.

    Leo.
  6. #6
    Aug 26, 2009, 10:22 AM

    RE: Enable/Disable Tabs within UpdatePanel

    Hi,

    Just interesting to see UpdatePanel's response in real application. Can you post it?
  7. #7
    Aug 26, 2009, 11:04 AM

    RE: Enable/Disable Tabs within UpdatePanel



    Sure I can.
    As you can see, the Script Block is not rendered at the end of the real application. Can we find out why?

    The page is exactly the same file. Just a copy.

    Real Application
    1635|updatePanel|UpdatePanelDetails|


                            


                                


 <table class="detailsview" cellspacing="5" cellpadding="5" ValidationGroup="Details" border="0" id="DetailsView1"


 style="height:300px;width:125px;">


  <tr class="editrow">


   <td style="width:10%;">id</td><td>


                                                <input name="DetailsView1$TextBoxIdInsert" type="text"


 id="DetailsView1_TextBoxIdInsert" class="txtBox" />


                                            </td>


  </tr><tr class="editrow">


   <td style="width:10%;">a</td><td>


                                                <input name="DetailsView1$TextBoxAInsert" type="text"


 id="DetailsView1_TextBoxAInsert" class="txtBox" />


                                            </td>


  </tr><tr class="editrow">


   <td style="width:10%;">b</td><td>


                                                <input name="DetailsView1$TextBoxBInsert" type="text"


 id="DetailsView1_TextBoxBInsert" class="txtBox" />


                                            </td>


  </tr><tr class="alternatingrow">


   <td align="center" colspan="2"><input type="submit" name="DetailsView1$ctl01" value="Insert" />&amp;nbsp


;<input type="button" value="Cancel" &#111;nclick="__doPostBack('DetailsView1','Cancel$-1')" /


></td>


  </tr>


 </table>






                                <input type="submit" name="EnableTabs" value="Enable Tabs" id="EnableTabs"


 />


                                <input type="submit" name="DisableTabs" value="Disable Tabs" id="DisableTabs"


 />


                                


                            



                        |0|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||644|hiddenField


|__VIEWSTATE|/wEPDwUKMTExMzU3NjQ3MA9kFgICBA9kFgICBQ9kFgpmD2QWAmYPFgIeBWNsYXNzBQh4LWhpZGRlbhYCAgEPZBY


CZg9kFgICAQ88KwAPAQAPFgQeC18hRGF0YUJvdW5kZx4LXyFJdGVtQ291bnRmZBYCZg9kFgRmDw8WAh4HVmlzaWJsZWhkZAIFDw8


WAh8DaGRkAgEPFCoSU3lzdGVtLldlYi5VSS5QYWlyAQ8FBGJhc2UPFgIeCERpc2FibGVkZ2QWAmYPFgIfAAUIeC1oaWRkZW5kAgI


PFCsEAQ8FBGJhc2UPFgIfBGdkFgJmDxYCHwAFCHgtaGlkZGVuZAIDDxQrBAEPBQRiYXNlDxYCHwRnZBYCZg8WAh8ABQh4LWhpZGR


lbmQCBA8UKwQBDwUEYmFzZQ8WAh8EZ2QWAmYPFgIfAAUIeC1oaWRkZW5kGAIFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXl


fXxYHBQ5TY3JpcHRNYW5hZ2VyMQUJVGFiUGFuZWwyBQpUYWJEZXRhaWxzBQRUYWIxBQRUYWIyBQRUYWIzBQRUYWI0BQxEZXRhaWxzVmlldzEPFCsAB2RkAgJkZBYAZGSTEQq61lw2w20ZUJkn60hTfkczhA


==|0|asyncPostBackControlIDs|||0|postBackControlIDs|||19|updatePanelIDs||tUpdatePanelDetails|0|childUpdatePanelIDs


|||18|panelsToRefreshIDs||UpdatePanelDetails|3|asyncPostBackTimeout||600|26|formAction||EnableDisableTabsTest


.aspx|24|pageTitle||Enable/Disable Tabs Page|
    Test Application:
    1463|updatePanel|UpdatePanelDetails|


                            


                                


 <table cellspacing="0" rules="all" ValidationGroup="Details" border="1" id="DetailsView1" style="height


:300px;width:125px;border-collapse:collapse;">


  <tr>


   <td>id</td><td>


                                                <input name="DetailsView1$TextBoxIdInsert" type="text"


 id="DetailsView1_TextBoxIdInsert" />


                                            </td>


  </tr><tr>


   <td>a</td><td>


                                                <input name="DetailsView1$TextBoxAInsert" type="text"


 id="DetailsView1_TextBoxAInsert" />


                                            </td>


  </tr><tr>


   <td>b</td><td>


                                                <input name="DetailsView1$TextBoxBInsert" type="text"


 id="DetailsView1_TextBoxBInsert" />


                                            </td>


  </tr><tr>


   <td align="center" colspan="2"><input type="submit" name="DetailsView1$ctl01" value="Insert" />&amp;nbsp


;<input type="button" value="Cancel" &#111;nclick="__doPostBack('DetailsView1','Cancel$-1')" /


></td>


  </tr>


 </table>






                                <input type="submit" name="EnableTabs" value="Enable Tabs" id="EnableTabs"


 />


                                <input type="submit" name="DisableTabs" value="Disable Tabs" id="DisableTabs"


 />


                                


                            



                        |0|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||644|hiddenField


|__VIEWSTATE|/wEPDwUKMTExMzU3NjQ3MA9kFgICBA9kFgICBQ9kFgpmD2QWAmYPFgIeBWNsYXNzBQh4LWhpZGRlbhYCAgEPZBY


CZg9kFgICAQ88KwAPAQAPFgQeC18hRGF0YUJvdW5kZx4LXyFJdGVtQ291bnRmZBYCZg9kFgRmDw8WAh4HVmlzaWJsZWhkZAIFDw8


WAh8DaGRkAgEPFCoSU3lzdGVtLldlYi5VSS5QYWlyAQ8FBGJhc2UPFgIeCERpc2FibGVkZ2QWAmYPFgIfAAUIeC1oaWRkZW5kAgI


PFCsEAQ8FBGJhc2UPFgIfBGdkFgJmDxYCHwAFCHgtaGlkZGVuZAIDDxQrBAEPBQRiYXNlDxYCHwRnZBYCZg8WAh8ABQh4LWhpZGR


lbmQCBA8UKwQBDwUEYmFzZQ8WAh8EZ2QWAmYPFgIfAAUIeC1oaWRkZW5kGAIFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXl


fXxYHBQ5TY3JpcHRNYW5hZ2VyMQUJVGFiUGFuZWwyBQpUYWJEZXRhaWxzBQRUYWIxBQRUYWIyBQRUYWIzBQRUYWI0BQxEZXRhaWxzVmlldzEPFCsAB2RkAgJkZBYAZGQu5a0lukm6cieWDeuUdiWfuqrhJA


==|104|hiddenField|__EVENTVALIDATION|/wEWCQLlhPaPCgLXovGCBwKopM/tCQKHpM/tCQKM5eX2BALgkumxDgKr3rP0AgL0


+LadAwLB5eCpDZ9e/mYHtYRiU5Fj9VBeJRF6XfOg|0|asyncPostBackControlIDs|||0|postBackControlIDs|||19|updatePanelIDs


||tUpdatePanelDetails|0|childUpdatePanelIDs|||18|panelsToRefreshIDs||UpdatePanelDetails|3|asyncPostBackTimeout


||600|26|formAction||EnableDisableTabsTest.aspx|24|pageTitle||Enable/Disable Tabs Page|254|scriptStartupBlock


|ScriptContentWithTags|{"text":"Ext.onReady(function(){Ext.getCmp(\u0027Tab1\u0027).setDisabled(false


);Ext.getCmp(\u0027Tab2\u0027).setDisabled(false);Ext.getCmp(\u0027Tab3\u0027).setDisabled(false);Ext


.getCmp(\u0027Tab4\u0027).setDisabled(false);});","type":"text/javascript"}|
  8. #8
    Aug 26, 2009, 11:10 AM

    RE: Enable/Disable Tabs within UpdatePanel

    Hi,

    Do see any difference where placed ScriptManager in test and real application?


    Also try to do the following.


    1. Put HiddenField inside UpdatePanel
    2. Register script using HiddenField instead ScriptManager


    Does it change anything?
  9. #9
    Aug 26, 2009, 11:33 AM

    RE: Enable/Disable Tabs within UpdatePanel

    Hi,

    The file is exactly the same, so there is no difference on the ScriptManager markup.

    1 - Added:
    <ext:Hidden ID="HiddenField1" runat="server" Text="1"></ext:Hidden>
    2 - Registered:
    HiddenField1.AddScript(sExtScript);
    Same results. No changes.

    Leo
  10. #10
    Aug 26, 2009, 1:56 PM

    RE: Enable/Disable Tabs within UpdatePanel



    Hi,

    I could not spot the problem, but I notice some differences on the web.config.
    This application I converted to Framework 3.5 not so long ago, so I reviewed everyline to see it could make any difference.

    <system.webServer>
  <validation validateIntegratedModeConfiguration="false"/>
  <modules>
   <remove name="ScriptModule"/><add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  </modules>
    It turned out that I found differences where preCondition was set to IntegratedMode and others few.

    A the end I managed to make it work only when I press the button (button click) in my real page using:

    

ScriptManager.RegisterStartupScript(this.Page, typeof(SalesEdit), "scr", sExtScript, true);
    Instead of Coolite ScriptManager.
    But when I tried onItemInserted I got error:

    Ext.getCmp("ctl18") has no properties
    It didn't work inserting the ScriptContainer before the script.

    Another difference between those application projects is that one is running on Cassini and other on IIS7. I know that I had some problems using II7 on Vista (cleanResourceUrl) when I started using Coolite and I post some details here in this forum.
    I am simply guessing here... IIS, pipeline, integratedMode, managedHandler and so on is not something I really have experience on.

    Any thougths?

    It happened many times that I tried to reproduce an error in my test application and the same does not happens in my real scenario. I am starting to think that if I find out the reason it could solve more than one of my problems.

    Leo.

    Leo.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How to disable/enable tabs on the client?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 21, 2012, 5:56 PM
  2. Button Enable/Disable
    By Maia in forum 1.x Help
    Replies: 5
    Last Post: Jul 02, 2010, 8:03 PM
  3. how to disable and enable combobox?
    By sadeque in forum 1.x Help
    Replies: 1
    Last Post: Jul 27, 2009, 5:00 AM
  4. Enable or disable the button
    By VietView in forum 1.x Help
    Replies: 4
    Last Post: Jan 09, 2009, 11:59 AM
  5. Nested UpdatePanel + Tabs + Editor
    By ljcorreia in forum Bugs
    Replies: 2
    Last Post: Aug 15, 2008, 2:41 PM

Posting Permissions