SelectionChanged
- Getting Started
- Setting Up ASP.NET Core MVC
- Accessibility
- Chart
- ASP.NET
- Overview
- Getting Started
- Design-time Support
- ItemTypes
- Chart Elements
- Chart Types
- Area Chart
- Bar Chart
- Bubble Chart
- Line Chart
- Pie Chart
- Sparklines
- Donut Chart
- Scatter Chart
- Spline Chart
- SplineArea Chart
- RangeArea Chart
- RangeBar Chart
- RangeSpline Chart
- StepLine Chart
- StepArea Chart
- PolarLine Chart
- PolarArea Chart
- PolarBar Chart
- PolarSpline Chart
- PolarSplineArea Chart
- PolarScatter Chart
- Combining Chart Types
- Data Binding
- Exporting
- Localization
- Selection
- Zooming and Panning
- Appearance and Styling
- Server Side Events
- Client Events
- Supported Browsers
- ASP.NET Core
- ASP.NET MVC
- JAVA Apache Wicket
- API
- allowUTCFormatting
- applyAnimation
- axisX
- axisTickText
- axisType
- categoricalValues
- decimalTicks
- drawColor
- drawWidth
- endOffset
- fixedEnd
- inverseOrder
- max
- min
- minorPlotStripColor
- minorPlotStripDashStyle
- minorPlotStripWidth
- minorTicksColor
- minorTicksHeight
- minorTicksRepeat
- minorTicksWidth
- offset
- plotBands
- plotLines
- plotStripColor
- plotStripDashStyle
- plotStripWidth
- startOffset
- swapLocation
- ticksColor
- ticksHeight
- ticksPlacement
- ticksRepeat
- ticksWidth
- title
- axisY
- axisTickText
- axisType
- decimalTicks
- drawColor
- drawWidth
- endOffset
- fixedEnd
- inverseOrder
- max
- min
- minorPlotStripColor
- minorPlotStripDashStyle
- minorPlotStripWidth
- minorTicksColor
- minorTicksHeight
- minorTicksRepeat
- minorTicksWidth
- offset
- plotBands
- plotLines
- plotStripColor
- plotStripDashStyle
- plotStripWidth
- startOffset
- swapLocation
- ticksColor
- ticksHeight
- ticksPlacement
- ticksRepeat
- ticksWidth
- title
- backgroundColor
- borderColor
- borderRadius
- borderWidth
- chartAreaBackgroundColor
- chartAreaBackgroundImage
- chartAreaBorderColor
- chartAreaBorderWidth
- chartAreaPaddingBottom
- chartAreaPaddingLeft
- chartAreaPaddingRight
- chartAreaPaddingTop
- chartLegend
- dataSeries
- enableAutoFit
- events
- exportOptions
- height
- isInverted
- margin
- primaryHeader
- secondaryHeader
- seriesPalette
- seriesSettings
- area
- bar
- bubble
- donut
- line
- pie
- polararea
- polarbar
- polarline
- polarscatter
- polarspline
- polarsplinearea
- rangearea
- rangebar
- rangesplinearea
- scatter
- spline
- splinearea
- steparea
- stepline
- seriesType
- theme
- tooltipSettings
- width
- zoomMode
- Getting Started
- Events
- How-To
- Methods
- Styling
- Supported Browsers
- ASP.NET
- Barcode
- QR Code
- TagCloud
- TreeMap
- Grid
- ASP.NET
- ASP.NET Core
- ASP.NET MVC
- JAVA Apache Wicket
- JavaScript
- API
- Settings
- altRowTemplate
- altRows
- columnReorder
- columns
- dataSource
- detailCollapseCssClass
- detailCollapseText
- detailExpandCollapse
- detailExpandCssClass
- detailExpandText
- detailTemplate
- editing
- exportOptions
- filtering
- grouping
- height
- maxHeight
- noRecordsTemplate
- noRecordsText
- paging
- resizing
- rowHover
- rowTemplate
- scrolling
- selection
- showHeader
- sorting
- toolbar
- Events
- Properties
- Methods
- addRow
- cancelEditing
- clearSelection
- collapseRow
- dataItem
- deleteRow
- destroy
- editCell
- editRow
- expandRow
- exportCsv
- exportExcel
- exportPdf
- filter
- hideColumn
- insertRow
- isHidden
- isLocked
- lockColumn
- page
- pageSize
- refresh
- reorderColumn
- revertChanges
- saveChanges
- scrollTop
- select
- selectedRowIndices
- showColumn
- sort
- ungroup
- unlockColumn
- Settings
- Getting Started
- Autogenerated Editors
- Binding to Data
- Cancel User Iteraction
- Change Options Dynamically
- Columns
- Custom Editors
- Exporting
- Filtering
- Footer Total Aggregates
- Grouping
- Hierarchy
- Paging
- RTL
- Scrolling
- Selection
- Sorting
- Templates
- Themes
- Validation
- API
- Accordion
- AutoComplete
- Button
- Calendar
- CheckBox
- ColorPicker
- ComboBox
- ContextMenu
- DataSource
- DatePicker
- DateTimePicker
- Draggable
- DropDown
- Droppable
- Editor
- ListBox
- LoadingPanel
- MaskedTextBox
- Menu
- MonthYearPicker
- NumericTextBox
- Pager
- ProgressBar
- RadioButton
- Rating
- RecursiveDataSource
- Slider
- SplitButton
- Splitter
- Switch
- Tabs
- TextBox
- TimePicker
- Timeline
- Tooltip
- TreeView
- Upload
- Window
SelectionChanged
fires when the chart's point is selected or deselected. In order to enable selection of points the EnablePointSelection
property needs to be set to true:
<shield:ShieldChart ID="ShieldChart1" runat="server" ...> <DataSeries> <shield:ChartBarSeries ...> <Settings EnablePointSelection="true" > </Settings> ...
NOTE: In order to postback to the server when user selects or deselects point/points the AutoPostBack
property needs to be set to true.
This event can be used for handling server side the client side selection of the chart point. In this way the master - detail relationship can be achieved:
<shield:ShieldChart ID="ShieldChart1" runat="server" AutoPostBack="true" OnSelectionChanged="ShieldChart1_SelectionChanged" OnTakeDataSource="ShieldChart1_TakeDataSource"> <DataSeries> <shield:ChartBarSeries DataFieldY="Sales"> <Settings EnablePointSelection="true" > </Settings> </shield:ChartBarSeries> </DataSeries> </shield:ShieldChart> <shield:ShieldChart ID="ShieldChart2" OnTakeDataSource="ShieldChart2_TakeDataSource" > <DataSeries> <shield:ChartDonutSeries DataFieldY="Data" DataFieldX="Product"> </shield:ChartDonutSeries> </DataSeries> </shield:ShieldChart>
protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e) { ShieldChart1.DataSource = new object[] { new {Quarter = "Q1", Sales = 312 }, new {Quarter = "Q2", Sales = 212 }, new {Quarter = "Q3", Sales = 322 }, new {Quarter = "Q4", Sales = 128 } }; } public List DataPerformance { get; set; } protected void ShieldChart2_TakeDataSource(object sender, ChartTakeDataSourceEventArgs e) { ShieldChart2.DataSource = DataPerformance; } protected void ShieldChart1_SelectionChanged(object sender, ChartSelectionChangedEventArgs e) { if (e.Selected) { SelectedQuarter = e.Name; DataPerformance = GetPerformanceData().Where(d => d.Quarter == SelectedQuarter).ToList(); } else { DataPerformance = null; } ShieldChart2.DataBind(); }
In order to avoid the blinking into the browser when chart postback a asp:UpdatePanel
control can be used with following configuration:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <shield:ShieldChart ID="ShieldChart2" OnTakeDataSource="ShieldChart2_TakeDataSource" > <DataSeries> <shield:ChartDonutSeries DataFieldY="Data" DataFieldX="Product"> </shield:ChartDonutSeries> </DataSeries> </shield:ShieldChart> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ShieldChart1" EventName="SelectionChanged" /> </Triggers> </asp:UpdatePanel>
Thus when the first chart point is selected only the second chart will be updated.
For more information see Master/Detail Charts example.