ASP.NET Grid Setup
- 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
ShieldGrid for ASP.NET is a server-side wrapper component implemented in the ASP.NET server side component pattern. To get started using the component simply add a reference to the Shield.Web.UI assembly in your ASP.NET project.
Since the ShieldGrid is a wrapper of JavaScript Grid component you need to include the references to the CSS and JavaScript resources in the HEAD section of your webpage:
<head id="Head1" runat="server"> <link rel="stylesheet" type="text/css" href="css/light/all.min.css" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/shieldui-all.min.js" type="text/javascript"></script> </head>
The javascript resources for client side component you can find on the download page under “ShieldUI JavaScript” section.
In order to have intelisence into the aspx pages markup you need to add the Shield.Web.UI namespace to the
<system.web> <pages> <controls> <add tagPrefix="shield" namespace="Shield.Web.UI" assembly="Shield.Web.UI" /> </controls> </pages> </system.web>
The other approach is to add following line of code into your aspx page:
<%@ Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
The ShieldUI Grid code for ASP.NET follows the ASP.NET pattern by providing a set of properties that configure the widgets. The component API is a 1:1 reflection of the JavaScript widgets configuration, so you only have to get familiar with a single set of configuration options:
// JavaScript Grid demo $("#grid").shieldGrid({ dataSource: { data: gridData }, sorting:{ multiple: true }, paging: { pageSize: 12, pageLinksCount: 10 }, selection:{ type: "row", multiple: true, toggle: false }, columns: [ { field: "id", width: "70px", title: "ID" }, { field: "name", title: "Person Name"}, { field: "company", title: "Company Name"}, { field: "email", title:"Email Address", width: "270px"} ] });
<script src="../../../../../Content/json/gridData.js"></script> <shield:ShieldDataSource runat="server" ID="shieldDataSource1" Data="gridData"></shield:ShieldDataSource> <shield:ShieldGrid ID="ShieldGrid2" runat="server" ClientDataSourceID="shieldDataSource"> <Sorting Multiple="true" /> <Paging PageLinksCount="10" PageSize="12"> </Paging> <Selection Type="Row" Multiple="true" Toggle="false" /> <Columns> <shield:GridColumn Field="id" Width="70px" Title="ID"></shield:GridColumn> <shield:GridColumn Field="name" Title="Person Name"></shield:GridColumn> <shield:GridColumn Field="company" Title="Company Name"></shield:GridColumn> <shield:GridColumn Field="email" Width="270px" Title="Email Address"></shield:GridColumn> </Columns> </shield:ShieldGrid>
Note that the Grid component can be bound to data only via a ShieldDataSource component.
To see the configuration options in action, please refer to our online demos.