Sunday, January 23, 2011

Working With Silverlight DataGrid PART1

Hi,
Many of us face's lots of issue while we work with silverlight datagrid.
The issue primarily comes as because of following reasons.
1. Bugs in the DataGrid which obviously is an issue.
 Eg. The famous bug  which happens while scrolling silverlight grid, where when you add TextBox and CheckBox in the silverlight grid and try to scroll after applying edit in multiple rows of the grid the position of the checkbox or textbox changes.
2. Asp.net style development  where we try to presume our development considering silver light as another just Asp.net application. And start putting our self in trouble.

Dealing with the Bugs first.
Ideally the scrolling bug comes when you don't apply BindingMode.TwoWay
Obviously you will say why I should need to apply that property to my Grid Columns?You will have to when you need to play with all the properties and flavor of your silver light data grid.

I have given a complete description with the code on how to resolve the scrolling issue and use check box and text box in the silver light data grid as well as handle click events for the check box inside the grid and bind another grid.

Simulating the Scrolling issue
1. In the below code snippet just remove the BindingMode.TwoWay wherever you find and you have reproduced the bug.

2.Working with Silverlight Grid
  1.  Creating a silverlight3.0 project from visual studio. 
   
   


 2.   Adding a Class for the list to bind to the grid.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication2
{
public class Nutrition
{
public string Group
{
get;
set;
}

public string name
{
get;
set;
}

public Int32 quantity
{
get;
set;
}

public bool check
{
get;
set;
}

public int id
{
get;
set;
}

}
}
    3.  XAML Code page.


    4.    Code behind for Xaml Code.

    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.Xml;
    using System.Xml.Schema;
    using System.CodeDom;
    using System.Windows.Data;

    namespace SilverlightApplication2
    {
        public partial class MainPage : UserControl
        {
            List data1 = new List();
            List data = new List();
            public MainPage()
            {
                InitializeComponent();

                LoadData();
          
            }

            private void LoadData()
            {

                Nutrition Nutrition1 = new Nutrition();
                Nutrition1.Group = "BabyFood";
                Nutrition1.name = "MilkMaid";
                Nutrition1.quantity = 1;
                Nutrition1.check = true;
                Nutrition1.id = 1;
                Nutrition Nutrition2 = new Nutrition();
                Nutrition2.Group = "BabyFood";
                Nutrition2.name = "Milkana";
                Nutrition2.quantity = 1;
                Nutrition2.check = false;
                Nutrition2.id = 2;
                Nutrition Nutrition3 = new Nutrition();
                Nutrition3.Group = "IndianFood";
                Nutrition3.name = "DalTadka";
                Nutrition3.quantity = 1;
                Nutrition3.check = false;
                Nutrition3.id = 3;
                Nutrition Nutrition4 = new Nutrition();
                Nutrition4.Group = "IndianFood";
                Nutrition4.name = "DalMakhani";
                Nutrition4.quantity = 3;
                Nutrition4.check = false;
                Nutrition4.id = 4;
                Nutrition Nutrition5 = new Nutrition();
                Nutrition5.Group = "IndianFood";
                Nutrition5.name = "PaneerParatha";
                Nutrition5.quantity = 3;
                Nutrition5.check = false;
                Nutrition5.id = 5;
                Nutrition Nutrition6 = new Nutrition();
                Nutrition6.Group = "ContinentalFood";
                Nutrition6.name = "Loa Loa";
                Nutrition6.quantity = 3;
                Nutrition6.check = false;
                Nutrition6.id = 6;

                data.Add(Nutrition1);
                data.Add(Nutrition2);
            
                data.Add(Nutrition3);
                data.Add(Nutrition4);
                data.Add(Nutrition5);
                data.Add(Nutrition6)
            
                Food.ItemsSource = data;
                DataGridTextColumn textColumn1 = new DataGridTextColumn();
                textColumn1.Header = "Group";
                textColumn1.Binding = new Binding("Group");
                textColumn1.Binding.Mode = BindingMode.TwoWay;
                Food.Columns.Add(textColumn1);
          
                DataGridBoundColumn textColumn2 = new DataGridTextColumn();
                textColumn2.Header = "Name";
                textColumn2.Binding = new Binding("name");
                textColumn2.Binding.Mode = BindingMode.TwoWay;
                textColumn2.IsReadOnly = true;
                Food.Columns.Add(textColumn2);
                //DataGridCheckBoxColumn cbk = new DataGridCheckBoxColumn();
          
                //cbk.Header = "Checked";
                //cbk.Binding = new Binding("check");
                //cbk.Binding.Mode = BindingMode.TwoWay;
            
                //Food.Columns.Add(cbk);

            }

            private void RowFilterButton_Click(object sender, RoutedEventArgs e)
            {
                CheckBox cb = sender as CheckBox;
                if (cb.IsChecked == true)
                {
                    data1.Add(data[Convert.ToInt32(cb.Content) - 1]);

                }
                else {
                    data1.Remove(data[Convert.ToInt32(cb.Content) - 1]);
                }
                Food1.ItemsSource = null;
                Food1.ItemsSource = data1;
                      
       }
        }
    }


    5.   Scenario And Behavior Explained
    Grid 1 Populated with checkbox as external control in the datagrid.

    On Check and Uncheck of checkbox in Grid1, item being added and removed from grid2.




    2 comments:

    Anonymous said...

    http://aspilham.blogspot.com/2009/11/data-binding-to-combox-inside-datagrid.html

    Anonymous said...

    http://weblogs.asp.net/manishdalal/archive/2008/09/28/combobox-in-datagrid.aspx

    Recent Posts