jQuery Grid Custom Editors
- 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
When the grid cell is put in edit mode the grid generates editor based on the colum type. However in some cases you may need a different editor to be generated for a column. In this case you can use custom editor. Each column has editor
property to which you can pass function and into it to instantiate different editors. Then in order to get appropriate value from this custom editor the grid will fire getCustomEditorValue
event. It is fired when the grid needs the custom editor value in order to update a field. The value of the editor needs to be assigned to the e.value argument of the event. For example:
$("#grid1").shieldGrid({ dataSource: { data: products, schema: { fields: { id: { path: "ProductID", type: Number}, name: { path: "ProductName", type: String, nullable: false }, quantity: { path: "SupplierID", type: Number }, price: { path: "UnitPrice", type: Number }, units: { path: "UnitsInStock", type: Number }, discontinued: { path: "Discontinued", type: Boolean }, myDate: { path: "d", type: Date } } } }, rowHover: false, columns: [ { field: "id" }, { field: "name", width: "200px" }, { field: "quantity" }, { field: "price", editor: myCustomEditor }, { field: "units" }, { field: "discontinued" }, { field: "myDate", format: "{0:MM/dd/yyyy}" } ], events: { getCustomEditorValue: function (e) { e.value = $("#test").swidget().value(); $("#test").swidget().destroy(); } }, editing: { enabled: true, event: "doubleclick type: "cell" } }); function myCustomEditor(cell, item) { $('<div id="test"/>') .appendTo(cell) .shieldDropDown({ dataSource: { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16] }, value: !item["price"] ? null : item["price"].toString() }).swidget().focus(); }