2013-10-17 53 views
6

私はグリッドビューを持っています。内部には、ボタンを含むCollapsiblePanelExtenderがあります。ボタンを押すと、ポストバックが起こり、CollapsiblePanelExtenderが閉じます。私は、CollapsiblePanelExtenderをポストバック後に開いた状態に保つソリューションを作成しようとしています。Ajax CollapsiblePanelExtenderポストバックに状態を保持

function pageLoad(sender, args) { 
    var objExtender;     
    var retval="";    

    if (document.getElementById(GridView1)) { 
     retval = document.getElementById(GridView1); 
    } 
    var CollapsiblePanelExtender1 = retval.getElementsByTagName("CollapsiblePanelExtender1"); 

    if(CollapsiblePanelExtender1.get_Collapsed()) { 
     CollapsiblePanelExtender1.set_Collapsed(true); 
    } 
    else { 
     CollapsiblePanelExtender1.set_Collapsed(false); 
    } 
} 

答えて

1

は基本的にCollapsiblePanelExtenderはそれがポストバック中の状態だ保つ: これは私がこれまで試みられてきたものです。しかしポストバック中は、データバインドを実行すると思います(私はあなたが持っていると思います)。データバインディング中は、すべてのコントロールが再作成され、その理由で内部状態が緩やかになります。

問題を解決するには、データバインディングを実行する前にCollapsiblePanelExtenderの状態を保存してから、この状態を復元することをアドバイスできます。これはサーバー側で行うことができます。アニメーションを有効にしている場合は、UIのちらつ​​きを避けるためにも役立ちます。

したがって、CollapsiblePanelExtenderの状態を取得するには、クライアントの状態値を覚えておくだけです。その後、この値を復元することができます。あなたはまだあなたがこのようなコードを必要とするよりも、クライアント側でCollapsiblePanelExtenderを拡張/折りたたむする場合

// To collapse panel. 
this.CollapsiblePanelExtender1.ClientState = "true"; 

// To Expand panel. 
this.CollapsiblePanelExtender1.ClientState = "false"; 

:たとえば、これは/サーバー側でCollapsiblePanelExtenderを折りたたむ拡張するために使用できるコードです

Sys.Application.add_load(function() { 
    var extender = $find('<%= this.CollapsiblePanelExtender1.ClientID %>'); 

    extender.expandPanel(); 

    extender.collapsePanel(); 
}); 

EDIT これは、クリックハンドラで状態を復元しようとしたために役立ちません。グリッドビューコントロールのデータバインドを呼び出すと、行は直ちに再作成されません。したがって、折りたたみ可能なエクステンダーコントロールの状態を設定(復元)する場合は、グリッドのRowCreatedイベントハンドラーで行う方がよいでしょう。 asp.netは私がRepeaterコントロールで折りたたみ可能なパネルドラッグ&ドロップを使用することができますので、私は実際に私のブログ上でこれらを使用

protected void GridView_OnRowCreated(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.DataRow && SomeValueToIdentifyThatThisPanelShouldBeExpanded) 
     { 
      CollapsiblePanelExtender extender = 
       e.Row.FindControl("CollapsiblePanelExtender1") as CollapsiblePanelExtender; 
      extender.ClientState = "false"; 
     } 
    } 
+0

にSuppressPostBack =「true」を設定してみてくださいました。私があなたに言ったように、折りたたみ可能なパネルエクステンダーは、gridviewテンプレート上にあります。だから私はfindcontrolを使う必要があります。私は自分のコンテキストにajaxコントロールツールキットを追加しています。折りたたみ可能なパネルを見つけるためのコードを書いています。その後、CollapsiblePanelExtender1を設定します。 ClientState = "false"は、私が持っているonclick関数の最後です。残念ながら、折りたたみパネルはポストバックの後で再び閉じられます – focus

+0

@focus私は自分の答えを更新しました。編集セクションをご覧ください。 –

+0

これは、すべての行に展開可能なパネルを開きます。私は、gridviewの特定の行に展開可能なパネルを開きたいと思います。ソリューションをすべての行で開きます。 – focus

1

:あなたはこのようなコードを使用することができる。例えば

このトリックは、パネルを開いたときのコンテンツのajaxです。 Webサービスからページまたはajaxを挿入するために、コンテンツを簡単にjqueryできます。

これは、折りたたみパネルにajaxedコンテンツのサンプルです。パネルはウェブサービスによってロードされます。パネルをクリックして展開します。

http://gosylvester.com/blog.aspx?id=39

+0

より具体的にお聞かせください。あなたが私に割り当てたリンクに関する多くの情報があります。私の問題は、折りたたみ可能なパネルがグリッドビューの行内にあることです。展開するとレコードの詳細が表示され、行のテキストボックスから編集できます。問題は、たとえば保存ボタンを押すと、ポストバックが発生し、折りたたみ可能なパネルが閉じられることです。だから、今度はユーザーが元のレコードを再度見つけて、折りたたみ可能なパネルを展開してください。 – focus

+0

サンプルの例です。このトリックは、あなたのコラプシブルパネルからポストバックしないことです。コンテンツを開くときに取得してください。パネルが閉じると、コンテンツは非表示になります。 – danny117

0

あなたは私はあなたが提案する何しようとしたが、それは働いていない折りたたみ可能なパネルエクステンダー

関連する問題