Skip to main content Skip to footer

Filtering Charts from C1FlexGrid in LightSwitch

This blog demonstrates the binding of C1Chart for LightSwitch to C1FlexGrid control. It looks to implement filtering of Chart data based on the Filtered rows in C1FlexGrid. Lets see how the final implementation will look like. flexchartfilter Core logic looks to change the datasource of the C1Chart control with each filtering operation in C1FlexGrid.

Define DataSource and Assign Screen Controls

I am not going into the details of the binding of C1Chart and C1FlexGrid controls to a common database. You have to add a Table and use the same as common datasource for both C1FlexGrid and C1Chart controls.

Changing Chart Data Based on Flexgrid Filtering

Following code block uses the FilterApplied event to track the change in C1FlexGrid data. Once the data changes, a list is generated for the Filtered rows. This collection of filtered rows acts as new datasource for C1Chart control.


bool renderFlag = false;  

void \_flex\_ControlAvailable(object sender, ControlAvailableEventArgs e)  
{  
  flex = e.Control as C1.Silverlight.FlexGrid.C1FlexGrid;  
  flex.LayoutUpdated += flex_LayoutUpdated;  
}  

void flex_LayoutUpdated(object sender, EventArgs e)  
{  
  var filter = C1FlexGridFilterService.GetFlexGridFilter(flex);  

  if (filter != null)  
    filter.FilterApplied += filter_FilterApplied;  
}  

void filter_FilterApplied(object sender, EventArgs e)  
{  
  if (flex.Rows.Count > 0)  
   {  
      if (renderFlag)  
      {  
         renderFlag = false;  
         return;  
      }  

      List<LightSwitchApplication.ProductSales> lst = new List<ProductSales>();  
      foreach (Row rw in flex.Rows)  
      {  
         if (rw.IsVisible)  
           lst.Add(rw.DataItem as LightSwitchApplication.ProductSales);  
      }  

      if (flex.Rows.Count >= lst.Count)  
          renderFlag = true;  

      Chart.Data.ItemsSource = null;  

      Chart.BeginUpdate();  
      Chart.Data.ItemsSource = lst.AsEnumerable();  
      Chart.EndUpdate();  
    }  
}  


This brings to end of the short implementation of this utility blog. To see the running demo, find the sample attched below. Download Sample

MESCIUS inc.

comments powered by Disqus