Cascading drop down column in a SharePoint 2007 List

Objective

This article will show how to use codeplex project to achieve Cascading drop down columns in SharePoint list. This article will show how to achieve parent child relationship in column of SharePoint list.

Step 1Download the project from codeplex. Choose WSP file to download. To download the project

Click here

Step 2

After downloading the WSP add the solution using STSADM command. Navigate to BIN folder and add the solution.

Command

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\12\BIN> stsa

dm -o addsolution -filename c:\Stoneshare.CascadingDropDown.WithFilter.wsp

Step 3

Open Central ADMIN and deploy solution. Navigate to Operation -> Global Configuration -> Solution Management. Select the Global Deployment option.

Step 4

After globally deployed the solution; check the GAC; type Assembly at Run; there would be a DLL added.

Step 5

Let us say; three lists as follows.

Continent List

  1. This list is having only one column called Title.
  2. Title column is single line of text.

 

Countries List

  1. This List contains three columns.
  2. Title column is single line of text.
  3. Country column is single line of text.
  4. Continent column is Look up column from Continent list. See the diagram below.

 

Cities List

     This List contains three columns.

  1. Title column is single line of text.
  2. City column is single line of text.
  3. Country column is Look up column from Countries list. See the diagram below.

 

Step 6

Creating MyLocation list. This list will have cascading dropdown column.

  1. There are four columns in this list.
  2. Title is Single line of text column.

    MyContinent column


Point to be noted

  1. Name of column is MyContinent
  2. Type is Cascading drop down list. This type will come after adding downloaded WSP as solution for the server.
  3. This is a required column.
  4. Give name of the Cascading drop down list detail as MyContinent
  5. There is no parent for this column.
  6. Give Child Name as MyCountry. This column will get created as next column for this list. MyContinent will act as parent for MyCountry column.
  7. In Site URL give URL of the site where Continent, Country and City list is part of. And then click on Load Lists.
  8. As a list name select Continent
  9. As column of the value select Title.
  10. As column for the text select Title.
  11. Column to join to parent can be null. Because there is Parent for the column.
  12. Select column to filter as title.
  13. As an operator choose Show All. We want to display all continent names.

MyCountry column

 Points to be noted

  1. Parent name is MyContinent. This column got created previously.
  2. Child name is MyCity. This column will get created next.
  3. Column to join parent is Continent because this column is holding value for Continent in Countries list.
  4. Column to filter is Continent
  5. Select operator as Show All.
  6. Value to filter is MyContinent .MyContinent is name of the parent column.

     MyCity column


Points to be noted

  1. Parent name is MyCountry. This column got created previously.
  2. Column to join parent is Country because this column is holding value for Country in City list.
  3. Column to filter is Country
  4. Select operator as Show All.
  5. Value to filter is MyCountry. MyCountry is name of the parent column.

After creating above four columns structure of MyLocation list will look like.

 

Step 7

Creating new Item in MyLOcation list.

MyContinent drop down has the entire continent from the list.

 

After selecting ASIA for MyContinent . MyCountry drop down is loaded with India

 

While selecting India in MyCountry drop down MyCity will be loaded with Delhi.

Giving Title as South extension. The new Item would be like below.

Making Image Gray in SILVERLIGHT 3.0

Objective

This article will show; how to make an Image Gray in SILVERLIGHT 3.0. This is a very basic article showing ; how to make an image gray in SILVERLIGHT.

Follow the Steps

  1. Create a new SILVERLIGHT application.

Design the XAML page

  1. Create two rows
  2. In first row put an Image using Image control.
  3. A.jpg is an existing image in application. I added this image by choosing Add Existing Item option.
  4. In 2nd row put a stack panel. Make orientation to horizontal.
  5. Put two buttons in stack panel. Purpose of one button is to make image gray and other to bring original image back.

MainPage.Xaml

<UserControl x:Class=”BehaviorSample1.MainPage”
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243; xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006

mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>

<Grid x:Name=”LayoutRoot” Height=”Auto” Width=”Auto” Background=”Black”>

<Grid.RowDefinitions>
<RowDefinition Height=”4*”/>
<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<Image x:Name=”myImage” Height=”Auto” Width=”Auto” Source=”a.jpg” Grid.Row=”0″/>

<StackPanel Orientation=”Horizontal” Grid.Row=”1″>

<Button x:Name=”btnMakeGray” Content=”Make Gray” Height=”50″ Width=”150″ HorizontalAlignment=”Center”/>

<Button x:Name=”btnMakeOriginal” Content=”Make Original” Height=”50″ Width=”150″ HorizontalAlignment=”Center” />

</StackPanel>

</Grid>
</UserControl>

Function to make an Image Gray

  1. WriteableBitmap
    class is used to change color of image in SILVERLIGHT.
  2. Function is returning instance of this class.
  3. In function we are looping through height of the image and nesting through width of the image.
  4. Color of each pixel is being changed in the loop.
  5. We will assign instance of WriteableBitmap class as source of image.
WriteableBitmap MakeGray(Image img){

WriteableBitmap bitmap = new WriteableBitmap(img, null);
for (int y = 0; y < bitmap.PixelHeight; y++)
{
for (int x = 0; x < bitmap.PixelWidth; x++)
{
int pixelLocation = bitmap.PixelWidth * y + x;
int pixel = bitmap.Pixels[pixelLocation];
byte[] pixelBytes = BitConverter.GetBytes(pixel);
byte bwPixel = (byte)(.299 * pixelBytes[2] + .587 * pixelBytes[1] + .114 * pixelBytes[0]);
pixelBytes[0] = bwPixel;
pixelBytes[1] = bwPixel;
pixelBytes[2] = bwPixel;
bitmap.Pixels[pixelLocation] = BitConverter.ToInt32(pixelBytes, 0);
}}
return bitmap ;
}

 Code for the Events

         Add events to buttons at the page load.

  1. On click event of btnMakeGray button call MakeGray function.
  2. On click event of btnMakeOriginal button bind image with original source.

MainPage.Xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Media.Imaging; 

namespace BehaviorSample1{

public partial class MainPage : UserControl{

public MainPage(){
InitializeComponent();
ImageSource img = myImage.Source;
btnMakeGray.Click += (sender, args) => { myImage.Source = MakeGray(myImage); };
btnMakeOriginal.Click += (sender, args) => { myImage.Source = new
BitmapImage(new Uri(“a.jpg”, UriKind.Relative)); };
}
WriteableBitmap MakeGray(Image img)
{
WriteableBitmap bitmap = new WriteableBitmap(img, null);
for (int y = 0; y < bitmap.PixelHeight; y++)
{
for (int x = 0; x < bitmap.PixelWidth; x++){
int pixelLocation = bitmap.PixelWidth * y + x;
int pixel = bitmap.Pixels[pixelLocation];
byte[] pixelBytes = BitConverter.GetBytes(pixel);
byte bwPixel = (byte)(.299 * pixelBytes[2] + .587 * pixelBytes[1] + .114 * pixelBytes[0]);
pixelBytes[0] = bwPixel;
pixelBytes[1] = bwPixel;pixelBytes[2] = bwPixel;
bitmap.Pixels[pixelLocation] = BitConverter.ToInt32(pixelBytes, 0);
}}
return bitmap ;
}}}

Output