{% if files is not empty %}
The following files are generated:
	{% for file in files %}
		{{ file }}
	{% endfor %}
{% endif %}

Add the following code to your controller:

	$renderer = $this->get('dtc_grid.renderer.datatables');

	// for a plain html grid, use the following
	// $renderer = $this->get('dtc_grid.renderer.table');

	// for jq_grid, use the following
	// $renderer = $this->get('dtc_grid.renderer.jq_grid');

	$gridSource = $this->get('{{ gridsource_id }}');

	/* To enable sorting, uncomment below
	$columns = $gridSource->getColumns();
	foreach ($columns as $column) {
		$column->setOption('sortable', true);
	}
	*/

	$renderer->bind($gridSource);
	return array('dtc_grid' => $renderer);

Add the following code to your Bundle Extension, if you haven't already:

	$yamlLoader = new Loader\YamlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
	$yamlLoader->load('grid.yml');

Add the following code to your routing.yml, if you haven't already:

    dtc_grid:
        resource: '@DtcGridBundle/Resources/config/routing.yml'
        prefix: /dtc_grid

Use the following template for jQuery DataTables (optional):
{% verbatim %}
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            {% block stylesheets %}
                {% for stylesheet in dtc_grid_theme_css %}
                    {% if stylesheet.url is defined %}
                        <link rel="stylesheet" href="{{ stylesheet.url }}"
                            {% if stylesheet.integrity is not empty %} integrity="{{ stylesheet.integrity }}"{% endif %}
                            {% if stylesheet.crossorigin is not empty %} crossorigin="{{ stylesheet.crossorigin }}"{% endif %}
                        >
                    {% else %}
                        <link rel="stylesheet" href="{{ stylesheet }}">
                    {% endif %}
                {% endfor %}
                {% for stylesheet in dtc_grid_local_css %}
                    <link rel="stylesheet" href="{{ app.request.baseUrl }}{{ stylesheet }}" />
                {% endfor %}
            {% endblock %}

            {% for stylesheet in dtc_grid_datatables_css %}
                {% if stylesheet.url is defined %}
                    <link rel="stylesheet" href="{{ stylesheet.url }}"
                            {% if stylesheet.integrity is not empty %} integrity="{{ stylesheet.integrity }}"{% endif %}
                            {% if stylesheet.crossorigin is not empty %} crossorigin="{{ stylesheet.crossorigin }}"{% endif %}
                    >
                {% else %}
                    <link rel="stylesheet" href="{{ stylesheet }}">
                {% endif %}
            {% endfor %}

			{% block dtc_grid_javascripts %}
				<script src="{{ dtc_grid_jquery.url }}"
					{% if dtc_grid_jquery.integrity is not empty  %} integrity="{{ dtc_grid_jquery.integrity }}"{% endif %}
					{% if dtc_grid_jquery.crossorigin is not empty  %} crossorigin="{{ dtc_grid_jquery.crossorigin }}"{% endif %}>
				</script>
				<script src="{{ dtc_grid_purl }}"></script>
				{% for javascript in dtc_grid_datatables_js %}
					{% if javascript.url is defined %}
						<script src="{{ javascript.url }}"
								{% if javascript.integrity is not empty %} integrity="{{ javascript.integrity }}"{% endif %}
								{% if javascript.crossorigin is not empty %} crossorigin="{{ javascript.crossorigin }}"{% endif %}
						></script>
					{% else %}
						<script src="{{ javascript }}"></script>
					{% endif %}
				{% endfor %}
			{% endblock %}
			{% block javascripts %}
				{% for javascript in dtc_grid_theme_js %}
					{% if javascript.url is defined %}
						<script src="{{ javascript.url }}"
							{% if javascript.integrity is not empty %} integrity="{{ javascript.integrity }}"{% endif %}
							{% if javascript.crossorigin is not empty %} crossorigin="{{ javascript.crossorigin }}"{% endif %}
						></script>
					{% else %}
						<script src="{{ javascript }}"></script>
					{% endif %}
				{% endfor %}
				{% for javascript in dtc_grid_local_js %}
					<script src="{{ app.request.baseUrl }}{{ javascript }}"></script>
				{% endfor %}
			{% endblock javascripts %}
		</head>
        <body>
            {{ dtc_grid.render | raw }}
        </body>
    </html>
{% endverbatim %}

Use the following template for a plain html grid
{% verbatim %}
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	{% block stylesheets %}
		{% for stylesheet in dtc_grid_theme_css %}
			{% if stylesheet.url is defined %}
				<link rel="stylesheet" href="{{ stylesheet.url }}"
					{% if stylesheet.integrity is not empty %} integrity="{{ stylesheet.integrity }}"{% endif %}
					{% if stylesheet.crossorigin is not empty %} crossorigin="{{ stylesheet.crossorigin }}"{% endif %}
				>
			{% else %}
				<link rel="stylesheet" href="{{ stylesheet }}">
			{% endif %}
		{% endfor %}
		{% for stylesheet in dtc_grid_local_css %}
			<link rel="stylesheet" href="{{ app.request.baseUrl }}{{ stylesheet }}" />
		{% endfor %}
	{% endblock %}
	{% block javascripts %}
		{% for javascript in dtc_grid_theme_js %}
			{% if javascript.url is defined %}
				<script src="{{ javascript.url }}"
					{% if javascript.integrity is not empty %} integrity="{{ javascript.integrity }}"{% endif %}
					{% if javascript.crossorigin is not empty %} crossorigin="{{ javascript.crossorigin }}"{% endif %}
				></script>
			{% else %}
				<script src="{{ javascript }}"></script>
			{% endif %}
		{% endfor %}
		{% for javascript in dtc_grid_local_js %}
			<script src="{{ app.request.baseUrl }}{{ javascript }}"></script>
		{% endfor %}
	{% endblock javascripts %}
</head>
<body>
{{ dtc_grid.render | raw }}
</body>
</html>
{% endverbatim %}


Use the following template for jqGrid (optional):
{% verbatim %}
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	{% block stylesheets %}
		{% for stylesheet in dtc_grid_theme_css %}
			{% if stylesheet.url is defined %}
				<link rel="stylesheet" href="{{ stylesheet.url }}"
					{% if stylesheet.integrity is not empty %} integrity="{{ stylesheet.integrity }}"{% endif %}
					{% if stylesheet.crossorigin is not empty %} crossorigin="{{ stylesheet.crossorigin }}"{% endif %}
				>
			{% else %}
				<link rel="stylesheet" href="{{ stylesheet }}">
			{% endif %}
		{% endfor %}
		{% for stylesheet in dtc_grid_local_css %}
			<link rel="stylesheet" href="{{ app.request.baseUrl }}{{ stylesheet }}" />
		{% endfor %}
	{% endblock %}

	{% for stylesheet in dtc_grid_jq_grid_css %}
		{% if stylesheet.url is defined %}
			<link rel="stylesheet" href="{{ stylesheet.url }}"
					{% if stylesheet.integrity is not empty %} integrity="{{ stylesheet.integrity }}"{% endif %}
					{% if stylesheet.crossorigin is not empty %} crossorigin="{{ stylesheet.crossorigin }}"{% endif %}
			>
		{% else %}
			<link rel="stylesheet" href="{{ stylesheet }}">
		{% endif %}
	{% endfor %}

	{% block dtc_grid_javascripts %}
		<script src="{{ dtc_grid_jquery.url }}"
			{% if dtc_grid_jquery.integrity is not empty  %} integrity="{{ dtc_grid_jquery.integrity }}"{% endif %}
			{% if dtc_grid_jquery.crossorigin is not empty  %} crossorigin="{{ dtc_grid_jquery.crossorigin }}"{% endif %}>
		</script>
		{% for javascript in dtc_grid_jq_grid_js %}
			{% if javascript.url is defined %}
				<script src="{{ javascript.url }}"
						{% if javascript.integrity is not empty %} integrity="{{ javascript.integrity }}"{% endif %}
						{% if javascript.crossorigin is not empty %} crossorigin="{{ javascript.crossorigin }}"{% endif %}
				></script>
			{% else %}
				<script src="{{ javascript }}"></script>
			{% endif %}
		{% endfor %}
	{% endblock %}

	{% block javascripts %}
		{% for javascript in dtc_grid_theme_js %}
			{% if javascript.url is defined %}
				<script src="{{ javascript.url }}"
					{% if javascript.integrity is not empty %} integrity="{{ javascript.integrity }}"{% endif %}
					{% if javascript.crossorigin is not empty %} crossorigin="{{ javascript.crossorigin }}"{% endif %}
				></script>
			{% else %}
				<script src="{{ javascript }}"></script>
			{% endif %}
		{% endfor %}
		{% for javascript in dtc_grid_local_js %}
			<script src="{{ app.request.baseUrl }}{{ javascript }}"></script>
		{% endfor %}
	{% endblock javascripts %}
</head>
<body>
{{ dtc_grid.render | raw }}
</body>
</html>
{% endverbatim %}


