I want to show a dynamic table which has records coming from a custom search.
Now I want to make the table row as an inline editable row.
I also need pagination with the table since I have 30 to 40 table columns which I need to display on the same table (scroll for columns).
I used Handsontable to achieve this as seen below, however, the image is not coming as I have entered in the table cell.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Scroll - Handsontable</title>
<script data-jsfiddle="common" src="handsontable.full.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="handsontable.full.css">
</head>
<body>
<div id="example1" style="width: 700px; height: 400px; overflow: auto">
<table id="example" class="row-border hover order-column" cellspacing="0" style="Display: none;" >
<thead>
<tr>
<th>Action</th>
<th>ID</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="edit.jpg" height="20" width="20"/></td>
<td>1</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td><img src="edit.jpg" height="20" width="20"/></td>
<td>2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr>
<td><img src="edit.jpg" height="20" width="20"/></td>
<td>3</td>
<td>test3</td>
<td>test3</td>
</tr>
</tbody>
</table>
</div>
<script data-jsfiddle="example1">
var data=$('#example tr').map(function(tr){
return [$(this).children().map(function(td){return $(this).text()}).get()]
}).get()
var
example = document.getElementById('example1'),
maximize = document.querySelector('.maximize'),
maxed = false,
resizeTimeout,
availableWidth,
availableHeight,
hot1;
hot1 = new Handsontable(example,{
data: data,
// colWidths: [55, 80, 80, 80, 80, 80, 80], //can also be a number or a function
rowHeaders: false,
colHeaders: false,
fixedColumnsLeft: 2,
fixedRowsTop: 1,
minSpareRows: 1,
contextMenu: true
});
function calculateSize() {
var offset;
if (maxed) {
offset = Handsontable.Dom.offset(example);
availableWidth = Handsontable.Dom.innerWidth(document.body) - offset.left + window.scrollX;
availableHeight = Handsontable.Dom.innerHeight(document.body) - offset.top + window.scrollY;
example.style.width = availableWidth + 'px';
example.style.height = availableHeight + 'px';
}
}
</script>
</div>
</body>
</html>
From the looks of it, your definition of the Handsontable is correct. Are you pasting that HTML after it's rendered or is that what Handsontable is creating for you? I'm not sure if you knew or not but you don't need to define the table in the HTML for this to work. As a matter of fact you should NOT be defining it.
If this was just the rendered code, could you please elaborate on what you mean by "I have used Handsontable for achieve this as below. but image not coming as i have entered in table cell."? What parts are wrong and what do you need changed?
Try this:
cells : function (row, col, prop) { return { renderer: 'html' }; }
as an option in your hot1 definition.
Related
I am trying to figure out what I've missed during my coding on my project. My problem is my datatable format/style is not what it seems to look like from standard format. I'm using ASP.net MVC.
This is the output: Page numbers, search box is not in style
Page numbers, search box is not in style
Here is my code:
<div class="row">
<div class="col-sm-20c">
<div class="panel-body">
<table id="tbl-transaction" class="table table-bordered" cellspacing="0" width="100%" align="center">
<thead>
<tr>
<th>Transaction No</th>
<th>Purpose of Visit</th>
<th>Name of Host</th>
<th>Transacted By</th>
<th>Details</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
#section Scripts
{
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script>
getall();
function getall()
{
$('#tbl-transaction').dataTable().fnDestroy();
$('#tbl-transaction').DataTable({
"ajax": {
"url": '/FSEWeb/Admin/GetAllTransactions',
"type": "get",
"datatype" : "JSON"
},
"columns" :
[
{ data :"TransactionNumber"},
{ data: "PurposeOfVisit" },
{ data: "NameOfHostFromST" },
{ data: "TransactedBy" },
{
data: null, "render" : function(data,type,row)
{
return '<button class= "btn btn-success" onclick = "get_details(' + data.id + ',' + data.TransactionNumber + ')"> Details </button>';
}
}
]
})
}
This table format is what I want to look like.
Desired output with styles
You have not incorporated JQuery Datatbles style sheet i.e.
<!-- Data table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css " />
Incorporate it at layout level or page level.
I need a table structure using kendo binding for which I have a row-template and item-template ,as I had red telrik(kendo) documentation which says only one line is allowed within row-template.The requirement is that I want to have more than one row in row-template.But as soon as I add more than one line It renders only for the first row.
<script type="text/kendo-template" id="tableEditRows">
<tr class="tableRow" data-bind="source:cells" data-template="tableEditCell"></tr>
<tr>
<td >testsal</td>
</tr>
</script>
<script type="text/kendo-template" id="tableEditCell">
<td class="tableCell" align="center">
<p>value</p>
</td>
</script>
<div id="numeric" ></div>
<script>
var table = $('<table class="tableEdit" style="width:200px">' +
'<tbody align="center" data-bind="source:rows" data-template="tableEditRows">');
$("#numeric").append(table);
var viewModel = kendo.observable( {
rows:[{
cells:[{
Id:1,
Value:"asas"
}]
},{
cells:[{
Id:1,
Value:"asas"
}]
}]
});
kendo.bind($("#numeric").get(0), viewModel);
here a link http://dojo.telerik.com/ifoBA/3 to that I am trying to do.
Is there a way to achieve having more than one line in row-template
I was able to solve this issue by making use of static templating as I had a fixed set of rows.I created a html template within which I used a for loop for each row and for each rows I called a item-template within a <tr> tag. Along with this, I had a additional row template to how additional details.below is a code snippet to show what I had done.
<script type="text/html" id="testTemplate" >
#for(var i=0;i<rows.length;i++){#
<tr class="tableRow" data-bind="source:rows[#=i#].cells" data-template='tableEditCell'></tr>
#if(rows[i].index==0){#
<tr >
<td class="tableCell" >
some value
</td>
</tr>
#}#
#}#
</script>
And here is the compiling and appending of template
var table = $('<table class="elvi"><tbody align="center"></tbody></table>');
var template = kendo.template($("#testTemplate").html());
var itemHtml = template(self.viewModel);
table.append(itemHtml);
table.appendTo($(self.element));
I am trying to bind an observableArray from an ajax server read but not able to bind it to the html. The json data is returning but not sure how to parse or get it to bind. I am new to Knockout.
Code:
<html>
<head>
<title></title>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>
function SurnameViewModel() {
var self = this;
self.Surnames = ko.observableArray();
$.ajax({
crossDomain: true,
type: 'POST',
url: "http://localhost/GetSurnames/Name/CID",
dataType: 'json',
data: { "Name": "d", "CID": "17" }, // <==this is just a sample data
processdata: true,
success: function (result) {
self.Surnames= ko.mapping.fromJS(result.data);
alert(self.Surnames()); // <== able to see the json data
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Failure!");
alert(xhr.status);
alert(thrownError);
}
});
}
// Activates knockout.js
$(document).ready(function() {
ko.applyBindings(new SurnameViewModel())
});
</script>
</head>
<body>
<h2>Surnames</h2>
<table>
<thead><tr>
<th>ID</th><th>Surname</th>
</tr></thead>
<tbody data-bind="foreach: Surnames">
<tr>
<td data-bind="text: Surnames().id"></td>
<td data-bind="text: Surnames().homename"></td>
</tr>
</tbody>
</table>
</body>
</html>
Json Data Returned from the alert
data: "[{"id":3,"homename":"DCosta"}]"
What am doing wrong here?
Edit: Working code
This is what worked for me.
I change this
ko.mapping.fromJS(result.data, {}, self.Surnames);
to
ko.mapping.fromJSON(result.data, {}, self.Surnames);
and in the html from this
<tr>
<td data-bind="text: Surnames().id"></td>
<td data-bind="text: Surnames().homename"></td>
</tr>
to this
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: homename"></td>
</tr>
You have two problems:
In your view when using the foreach binding you are "inside" of the context of the array so you don't need to write out the array name (Surnames()) again:
<tbody data-bind="foreach: Surnames">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: homename"></td>
</tr>
</tbody>
When you are getting back the data from the server you are overriding the Surnames array, the correct way of using the mapping plugin here:
ko.mapping.fromJS(result.data, {} /* empty mapping options */, self.Surnames);
Or
self.Surnames(ko.mapping.fromJS(result.data)());
Note the () in the above code, you need this because the ko.mapping.fromJS(result.data) will return an ko.observableArray without getting its underlaying value with the () you would end up with your Surnames containing another ko.observableArray
I want to load the table dynamically as soon as the page loads.i have tried the following code , but it is not showing 2nd column values found out in javascript.plz help me out.
<html>
<head>
<script type="text\javascript">
var brw=navigator.appCodeName;
var bw=navigator.appName;
var vrs=navigator.appVersion;
var plt=navigator.platform;
document.getElementById('r1').innerHTML = ' '+brw;
document.getElementById('r2').innerHTML = ' '+bw;
document.getElementById('r3').innerHTML = ' '+vrs;
document.getElementById('r4').innerHTML = ' '+plt;
</script>
</head>
<body>
<table border='1'>
<tr><td>Browser code </td><td><div id='r1'></div></td></tr>
<tr><td>Browser </td><td><div id='r2'></div></td></tr>
<tr><td>Browser Version </td><td><div id='r3'></div></td></tr>
<tr><td>Platform </td><td><div id='r4'></div></td></tr>
</table>
</body>
</html>
Your table should be like :
<table>
<thead>
<tr>
<th>Browser code</th>
<th>Browser</th>
<th>Browser version</th>
<th>Platform</th>
</tr>
</thead>
<tbody>
<tr>
<td><div id='r1'></div></td>
<td><div id='r2'></div></td>
<td><div id='r3'></div></td>
<td><div id='r4'></div></td>
</tr>
</tbody>
</table>
This way your table heads are set at top in <thead> balise, then you can add rows in <tbody> balise.
Just put your Javascript code at the end of your page.
Hi I am trying to catch an array of string from a class called AjaxFacade using DWR and I am using jquery to autocomplete a text box snippetof my jsp code is as follows
<%
String path = request.getContextPath();
%>
<script type='text/javascript' src='<%=path%>/dwr/interface/ajaxFacade.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/util.js'></script>
<script>
$(function()
{
var countries ;
countries = ajaxFacade.getCountries();
$("#tags").autocomplete({source : countries});
});
</script>
<tr>
<td align="left" valign="top" bgcolor="e3ddc7">
<div align="right"><strong> <font color="red">*</font>Old E-mail Address:</strong></div>
</td>
<td align="left" valign="top" bgcolor="#FFFFFF">
<html:text name="amsUserRequestForm" property="oldEmail" size="20" styleClass="ui-widget" styleId="tags">
</html:text></td>
</tr>
Function in AjaxFacade class is as follows
public String[] getUsers() {
String[] countries = {
"India",
"Iran",
"Iraq",
"Indoneshia",
"Ireland"
};
return countries;
}
No matter what I do it keeps me giving error this.source is not a function. Any help is greatly appreciated
make sure that the countries are filled with data make sync json call if needed.