Kentico CMS 7.0 Developer's Guide

Web part binding (obsolete)

Web part binding (obsolete)

Previous topic Next topic Mail us feedback on this topic!  

Web part binding (obsolete)

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

 

InfoBox_Exclamation

 

Obsolete feature

 

This feature is now obsolete. If you need to bind the behavior of a web part to another web part value, please use URL parameters or create a user control that contains both web parts and write custom code that will ensure the communication between the web parts (as described in Setting web part properties dynamically in your code).

 

If you need to use this feature for backward compatibility, you need to add the following parameter to your web.config file, to the appSettings section:

 

<add key="CMSShowWebPartBindingTab" value="true"/>

 

Web part binding allows you to connect two web parts. For example: you can have a web part containing a drop-down list with countries. When some value is selected, it is provided to another web part that displays a list of company offices in the selected country. You can manage web part binding on the Binding tab:

 

devguide_clip0784

 

Example - creating a product selection dialog with drop-down list and product list

 

In this example, we will create two web parts - selector and viewer and bind their properties so that the product viewer reflects the product selector status.

 

1. Open the CMS project in Visual Studio and create a new folder MyWebParts under the CMSWebParts folder in the Solution Explorer:
 
devguide_clip0145
 

2. Create a new user control (ASCX) under MyWebParts folder and call it ProductSelector.ascx. Switch to its HTML source and paste the following code:
 

<asp:DropDownList ID="DropDownList1" runat="server"

OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">

<asp:ListItem Value="Under">Under 500</asp:ListItem>

<asp:ListItem Value="Over">Over 500</asp:ListItem>

</asp:DropDownList>

 
Switch to the code behind and add the following code to the beginning of the code:
 

[C#]

 

using System;

using CMS.PortalControls;

using CMS.GlobalHelper;

using CMS.DocumentEngine;

using CMS.CMSHelper;

using CMS.ExtendedControls;

 

Change the class inheritance like this:
 
[C#]
 

public partial class CMSWebParts_MyWebParts_ProductSelector : CMSAbstractWebPart

 

Add the following code inside the page class:
 

[C#]

 

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

  this.SetValue("PriceRange", this.DropDownList1.SelectedValue.ToString());

  this.ReloadConsumers();

}

 
Please note that you need to set the new value of the web part property PriceRange and call the ReloadConsumers method.
 

3. Create a new user control (ASCX) under MyWebParts folder and call it ProductViewer.ascx. Switch to its HTML source and paste the following code:
 

<%@ Register Assembly="CMS.Controls" Namespace="CMS.Controls" TagPrefix="cc1" %>

<cc1:CMSRepeater ID="CMSRepeater1" runat="server" EnableViewState="true" TransformationName="CorporateSite.Transformations.ProductList" SelectedItemTransformationName="CMS.Smartphone.Default" Path="/%" ClassNames="CMS.Smartphone">

</cc1:CMSRepeater>

 

The CMSRepeater control will display the product list.

 

Switch to the code behind and add the following code to the beginning of the code:
 

[C#]

 

using System;

using CMS.PortalControls;

using CMS.GlobalHelper;

using CMS.DocumentEngine;

using CMS.CMSHelper;

using CMS.ExtendedControls;

 

Change the class inheritance like this:
 
[C#]

 

public partial class CMSWebParts_MyWebParts_ProductViewer : CMSAbstractWebPart

 

Add the following code inside the page class:
 

[C#]

 

public override void OnContentLoaded()

{

  base.OnContentLoaded();

   SetupControl();

}

/// <summary>

/// Reloads data on request

/// </summary>

 

public override void ReloadData()

{

  base.ReloadData();

  this.SetupControl();

  this.CMSRepeater1.ReloadData(true);

}

 

/// <summary>

/// Initializes the control properties

/// </summary>

 

protected void SetupControl()

{

  if ((this.PagePlaceholder.ViewMode == CMS.PortalEngine.ViewModeEnum.Design) || (this.HideOnCurrentPage) || (!this.IsVisible))

   {

      // Stop processing in Design mode and if the control is invisible

      this.CMSRepeater1.StopProcessing = true;

   }

 

  else

   {

      // set CMSRepeater properties according to the selected value (price range)

      string priceRange = ValidationHelper.GetString(this.GetValue("PriceRange"), "Under");

      if (priceRange == "Over")

       {

          this.CMSRepeater1.WhereCondition = "SKUPrice > 500";

       }

 

      else

       {

          this.CMSRepeater1.WhereCondition = "SKUPrice <= 500";

       }

 

   }

}

 

4. Save the changes and go to Site Manager -> Development -> Web parts. Create a new category called My Web Parts and add a new web part:

 

Display name: Product selector

Code name: ProductSelector

File path: MyWebParts/ProductSelector.ascx

 

5. Create another new web part:

 

Display name: Product viewer

Code name: ProductViewer

File path: MyWebParts/ProductViewer.ascx

 
... and then switch to the Properties tab and create a new property:
 

Attribute name: PriceRange

Attribute type: Text

Attribute size: 100

Allow empty value: yes

Display attribute in the editing form: no
 

6. Go to CMS Desk, create a new blank page and call it Product list.

 

7. Switch to the Design tab and add the Product selector web part to the page. Leave all its properties at the default values.

 

8. Next, add the Product viewer web part, set the following properties on the General tab:

 

Content before: <div class="Product list">

Content after: </div>

 

and on the Binding tab, add a new web part binding using the following values:

 

Local property: PriceRange

Source web part ID: ProductSelector

Source property: PriceRange
 

9. Go to the Live site mode and see the page. It should look like this:
 
devguide_clip0804

 

When you change the drop-down list value, the product list below is automatically updated.