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));
Related
just a very new to Vue 2.0, i actually use if for Laravel 5.4, now you can see from below link that i created one component which name is "canvas-chart", what actually i want show is a filterable table, and then to get more Json data from next steps, but now it always show me "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." , can not understand that i follow the official documentation to use it why it's not work?
new Vue({
el:'#filterTest',
data:{
keywords:[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}]
},
computed: {
filterM: function () {
var self = this
return self.filter(function (word) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
});
Vue.component('canvas-chat',{
template:'#canvasChart',
props:['keywordsData']
})
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<th v-for="key.id in keywordsData">
<span class="arrow" ></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="key.name in keywordsData">
<td v-for="key.phone in keywordsData"> {{key.name}}</td>
</tr>
</tbody>
</table>
</script>
<div id="filterTest">
<canvas-chat keywordsData="keywords" ></canvas-chat>
</div>
You have a few issues:
You must register the canvas-chat component first before you use it in the main component (put Vue.component('canvas-chat', ... before new Vue(...)).
Your v-for loops are wrong. They should be like v-for="key in keywordsData", not v-for="key.id in keywordsData".
The v-fors on the tr and td elements don't make sense; you will have to process the keywordsData first (perhaps in a computed property) to get it into the correct format you want, then loop over that.
You must bind the keywordsData prop in the template like this: :keywords-data="keywords".
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.
I have a code as following;
JSP
<script type="text/javascript">
fnSelGrp = function(year)
$('#name').val(nm);
};
</script>
<table id = "One">
<tr> <td>onclick="fnSelGrp('${result.name}')">${result.name}</td> </tr>
</table>
<table id="Two">
<tr> <td> "HELLO" </td> </tr>
</table>
When I click on 'name', I want the table 'Two' to be disappeared and replace it with other JSP page, using AJAX.
It seems I should give 'fnSelGrp' an ID to make onClick function.
Can anyone help?
It looks like you are using jquery, so ensure that your jquery libraries are included before the <script> tag.
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
The code
$('#name').val(nm);
means set the value of the element with the ID name with nm
You do not have a element with the ID name
I have the following KendoUI template bound to an observable. When I push a new item to the observable array, how do I apply the kendoNumericTextBox to only the new item in the template?
If I apply by class, it has a strange effect of doubling the spinners on the existing numeric textboxes.
<div id="slots">
<table class="table table-striped table-condensed" style="width:auto;">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Volunteers Needed</th>
<th>
Reservation Passcode <i class="icon-question-sign" title ="Only people with the reservation passcode can signup."></i>
</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: slots">
</tbody>
</table>
</div>
$(document).ready(function () {
var viewModel = kendo.observable({
slots: [{DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" }]
});
kendo.bind($("#slots"), viewModel);
$(".numeric").kendoNumericTextBox({
format: "n0"
});
viewModel.slots.push({DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" });
$(".numeric").kendoNumericTextBox({
format: "n0"
});
});
Thanks for any help!
Try defining your template as:
<script type="text/x-kendo-tmpl" id="row-template">
<tr>
<td>#= DateText #</td>
<td>#= ShiftLabel #</td>
<td class="numeric"><input data-role="numerictextbox" data-format="n0" data-bind="value: Slots"></td>
<td>#= ReservationCode #</td>
</tr>
</script>
and remove the $(".numeric").kendoNumericTextBox(...) initializations. Doing this you should have a NumericTextBox each time the template is run (one per row).
Your JavaScript is like this:
$(document).ready(function () {
var viewModel = kendo.observable({
slots: [
{DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 2, ReservationCode: "ABC" }
]
});
kendo.bind($("#slots"), viewModel);
viewModel.slots.push({DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 3, ReservationCode: "ABC" });
});
See it running here http://jsfiddle.net/OnaBai/BV48W/
Why:
The fact that you use a CSS class (.numeric) causes you end up having a KendoUI Numeric Text Box inside the other.
Example: You have the following HTML:
<label>Number 1: <input id="number1" class="numeric"/></label>
<label>Number 2: <input id="number2" class="numeric"/></label>
And the JavaScript
$(document).ready(function () {
$(".numeric").kendoNumericTextBox({
format: "n0"
});
$(".numeric").kendoNumericTextBox({
format: "n0"
});
});
You will see what you called strange effect of doubling the spinners on the existing numeric textboxes.
Each time that you invoke kendoNumericTextBox using .numeric selector you add one extra spinner to the element. If it does not have a spinner (data just added to viewModel) it gets one but if then you add data and invoke kendoNumericTextBox using .numeric selector, that previous element gets another.
I have some problem getting all the html tags after script using Xpath
my html :
<table dir = "rtl .......">
<tbody>
<script src = "get.aspx?type=js&file=ajax&rev=3"......>
<script language = "JavaScript"......>
<script>..</script>
<tr>
<td id = "jm0x1"some code here...>
<td id = "jm0x2"some code here...>
also a lot of <tr> here....
</tbody>
how i can access all (td id = "jm0x..)
this is the page i want to parse: http://kooora.com/?c=6423
Something like this should work
//td[contains(#id, "jm0x")]
Then you can affine the contains string to the pattern you want.