Develop Reference

Use CSS classes to style Kendo Editor template

I want to be able to add classes to HTML elements within a Kendo template and then apply styling to them using CSS.
<style>
.foo {
color: red;
}
</style>
<table class="table template">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td class="foo">Foo</td>
<td>Bar</td>
<td>Baz</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<textarea id="myKendoEditor"></textarea>
<script>
let template = $(".template").get(0).outerHTML;
$("#myKendoEditor").data("kendoEditor").value(template);
</script>
This doesn't work, I guess because the markup within the template is not part of the DOM at the point where CSS get applied.
Is there any way to do this? The only success I've had is adding style attributes to the elements within the template but this is really nasty as I want to keep the style separate from the template.

Angular js inside of an ng-if

I know this is not how the code should be structured but I am limited. I am trying to include a datatable inside angular ng-if section. When I take off the ng-if statement the js runs fine. I am looking for ways around this where it works. I have tried to move the js outside of the ng-if, but then the datatable doesn't work. Any hint in the right direction would be helpful. Thanks.
<div ng-if="test">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<!-- Results table -->
<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Created On</th>
<th>Table ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2011-04-28 13:32:07</th>
<th>Mortgage</th>
<th>Edit</th>
</tr>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2016-04-18 14:36:07</th>
<th>Monthly</th>
<th>Edit</th>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example2').DataTable();
});
</script>
</div>

ng-if will create a child scope which is different from your controller scope. Try to use ng-show instead
<div ng-show="test">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<!-- Results table -->
<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Created On</th>
<th>Table ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2011-04-28 13:32:07</th>
<th>Mortgage</th>
<th>Edit</th>
</tr>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2016-04-18 14:36:07</th>
<th>Monthly</th>
<th>Edit</th>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example2').DataTable();
});
</script>
</div>

ng-if has its own scope, so the functions you are calling are undefined inside of it.
ng-show is a possible solution, but has it's own caveats.
Plase, take a look at this answer, which explains the importance of using the dot in your directives. Even if you choose to use ng-show, I would recommend that you refactor your controller and view to avoid further complications down the road.
If you are new to angular, don't hesitate to read John Papa's styleguide, which covers that situation and many others.

Header Row Problems with JSPDF and AutoTable

I am trying to generate PDF file from html table using JSPDF and AutoTable.
In my example there is a html table with two header row as follows:
<table id="table" style="display:none ;">
<thead>
<tr>
<th >ID</th>
<th >First name</th>
<th >Last name</th>
<th >Email</th>
<th >Country</th>
<th >IP-address</th>
<th >IP-address</th>
</tr>
<tr>
<th >ID</th>
<th >First name</th>
<th >Last name</th>
<th >Email</th>
<th> Country</th>
<th >IP-address</th>
</tr>
</thead>
</table>
But the PDF file is generated with single header row.. how to solve this problem?
and one more is there any option to generate PDF file with the selected Column only.
Fiddle is here:
https://jsfiddle.net/x22fk0p4/3/

UPDATE: v3 supports multiple header rows so the below now inaccurate.
The plugin does not support it out of the box, but it can be done manually with the hooks. I would almost consider this a hack though. What I did was first increasing the height of the default header, then simply draw the secondary header in the space that was freed because of it.

datatables for jquery 2.1.1 to make table header as dropdown

I have a simple table like
<table>
<thead>
<tr><th>A</th><th>B</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a1</td><td>b1</td><td>c1</td></tr>
<tr><td>a2</td><td>b2</td><td>c2</td></tr>
</tbody>
</table>
I actually wanted the thead columns to behave like buttons for sorting table ascending or descending order-wise.
I found an option of using datatables plug-in which works like this.
But I am using jquery 2.1.1 and the above plug-in isn't available for this version.
I am bit confused of how to proceed further to make such implementation with my code.
Any help will be appreciated!

"Stupid jQuery Table Sort" seems to fully support jquery 2+.
JSbin demo: http://jsbin.com/wimefeseni/1/edit?html,output
JS:
$(function(){
$("table").stupidtable();
});
HTML:
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
</tbody>
Link to plugin: http://joequery.github.io/Stupid-Table-Plugin/

Creating merged table cells using Twitter Bootstrap

How can we use Bootstrap to create <thead> with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?
Here's how it looks like in Excel:

I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:
You can use a combination of the colspan and rowspan attributes, where rowspan is used for table headers spanning multiple rows, and the same applies to colspan and columns.
Break up your table headers into rows, according to their levels.
So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.
Your first row should have 3 columns: State, Utilities Company and Summer Period.
Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.
Let's apply the attributes:
Your 1st th for State spans 2 rows, so we add rowspan="2".
The same applies to the next table header, Utilities Company.
Summer Period spans 1 row and 3 columns, so we add colspan="3"
Add another tr in the header, containing the 3 cells for data1, data2 and data3.
The resulting HTML looks like this:
<thead>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thead>
Here is a demo fiddle.
Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.

Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for Bootstrap:
<table class="table table-bordered">
<thread>
<tr>
<th>State</th>
<th>Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th></th>
<th></th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>
You may have to add some CSS between your first and second header row to display your data correctly

<table class="table table-bordered">
<thread>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>