Adding this configuration to the app/config/routing.yml file:
# app/config/routing.yml
sg_datatables_bundle:
resource: "@SgDatatablesBundle/Controller/"
type: annotationThis bundle uses X-editable for in-place editing.
Ensure to load all js and css files from X-editable with your base layout.
Example:
{% block stylesheets %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/fc-3.2.2/fh-3.1.2/r-2.1.0/datatables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
{% endblock %}
{% block head_javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js" charset="UTF-8"></script>
<script src="https://cdn.datatables.net/v/bs/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/fc-3.2.2/fh-3.1.2/r-2.1.0/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="{{ asset('bundles/sgdatatables/js/pipeline.js') }}"></script>
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>
{% endblock %}__
@SgDatatables/column/column_post_create_dt.js.twig
| Option | Type | Default | Description |
|---|---|---|---|
| url | string | 'sg_datatables_edit' | Url for submit. |
| params | array or null | null | Additional params for submit It is appended to original ajax data (pk, name and value). |
| default_value | string or null | null | Value that will be displayed in input if original field value is empty. |
| empty_class | string | 'editable-empty' | Css class applied when editable text is empty. |
| empty_text | string | 'Empty' | Text shown when element is empty. |
| highlight | string | '#FFFF80' | Color used to highlight element after update. |
| mode | string | 'popup' | Mode of editable, can be 'popup' or 'inline'. |
| name | string or null | null | Name of field. Will be submitted on server. Can be taken from id attribute. |
| pk | string | 'id' | Primary key of editable object. |
| editable_if | Closure or null | null | Editable only if conditions are True. |
| clear | bool | true | Whether to show clear button. |
| placeholder | string or null | null | Placeholder attribute of input. Shown when input is empty. |
$this->columnBuilder
->add('title', Column::class, array(
'title' => 'Title',
'searchable' => true,
'orderable' => true,
'editable' => array(TextEditable::class, array(
//'pk' => 'cid',
'placeholder' => 'Edit value',
'empty_text' => 'Empty Text'
))
))
;__
@SgDatatables/column/column_post_create_dt.js.twig
All options of Text Editable.
Additional:
| Option | Type | Default | Description |
|---|---|---|---|
| rows | int | 7 | Number of rows in textarea. |
$this->columnBuilder
->add('content', Column::class, array(
'title' => 'Content',
'editable' => array(TextareaEditable::class, array(
//'pk' => 'cid',
'rows' => 50
))
))
;__
@SgDatatables/column/column_post_create_dt.js.twig
All options of Text Editable.
Additional:
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| source | array | x | Source data for list. |
$this->columnBuilder
->add('visible', BooleanColumn::class, array(
'title' => 'Visible',
'true_label' => 'Yes',
'false_label' => 'No',
'true_icon' => 'glyphicon glyphicon-ok',
'false_icon' => 'glyphicon glyphicon-remove',
'filter' => array(SelectFilter::class, array(
'classes' => 'test1 test2',
'search_type' => 'eq',
'multiple' => true,
'select_options' => array(
'' => 'Any',
'1' => 'Yes',
'0' => 'No'
),
'cancel_button' => true,
)),
'editable' => array(SelectEditable::class, array(
'editable_if' => function($row) {
return $row['cid'] == 5;
},
'source' => array(
array('value' => 1, 'text' => 'Yes'),
array('value' => 0, 'text' => 'No'),
array('value' => null, 'text' => 'Null')
),
'mode' => 'inline',
'empty_text' => '',
//'pk' => 'cid',
/*
'params' => array(
'dataStr' => 'test1',
)
*/
)),
))
;__
@SgDatatables/column/column_post_create_dt.js.twig
All options of Text Editable.
Additional:
| Option | Type | Default | Description |
|---|---|---|---|
| format | string | 'YYYY-MM-DD' | Format used for sending value to server. |
| view_format | string or null | null (same as format) | Format used for displaying date. If not specified equals to $format. |
| min_year | int | 1970 | Minimum value in years dropdown. |
| max_year | int | 2035 | Maximum value in years dropdown. |
| minute_step | int | 5 | Step of values in minutes dropdown. |
| second_step | int | 1 | Step of values in seconds dropdown. |
| smart_days | bool | false | Number of days in dropdown is always 31 or not. |
$this->columnBuilder
->add('publishedAt', DateTimeColumn::class, array(
'title' => 'Published at',
'default_content' => 'No value',
'date_format' => 'L',
'filter' => array(DateRangeFilter::class, array(
'cancel_button' => true,
)),
'editable' => array(CombodateEditable::class, array(
'format' => 'YYYY-MM-DD',
'view_format' => 'DD.MM.YYYY',
'max_year' => 2025,
//'pk' => 'cid',
)),
'timeago' => true
))
;__