I have been playing around with Kendo UI Grid and I like how it can take a HTML mark-up table very easy.
Is it possible to use HTML mark-up table and make into Kendo Editable Grid.
http://demos.kendoui.com/web/grid/from-table.html
In case anyone else needs assistance with this, here is the solution. Let's say I created a table with the following form:
<table id="data">
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Field 1 data</td>
<td>Field 2 data</td>
<td>Field 3 data</td>
<td></td>
</tr>
</tbody>
</table>
Note that there is an empty header and data column. This is where KendoUI will add the command buttons when the grid is initialized.
To initialize this as an editable KendoUI Grid, you would use the following javascript:
$("#data").kendoGrid({
editable: "popup", //or "inline"
columns: [
{ field: "field1", title: "Field 1" },
{ field: "field2", title: "Field 2" },
{ field: "field3", title: "Field 3" },
{ command: "edit" }
]
});
You can then customize your editor templates and such the same as you would when creating the grid from remote or local JSON data.
As an additional note, in my version of KendoUI, there is a bug in the popup editor window. You'll need to add this style override in order to make the popup window display correctly if it's not (i.e. all you see is a small white square in the middle of the screen):
.k-window
{
transform: none !important;
}
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 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));
The following is the DOM details:
<div id: "abc_440"
<table class = "listtable" >
<tbody>
<tr>
<td id = "someid" >
<td class = 'someclass_item"> This is Text </td>
<td class = 'someclass_button">
< a > Add </a>
</td>
</tr>
</tbody>
</table>
</div>
I need to click on 'Add' for particular text at "This is Text". I have to use div with ID (abc_440)to locate the corresponding table as there are may divs with this same dom layout. but index at div ID (for example 440) keeps changing to random number. How do I handle it in general ?
Please help.
I think that what you want to do is very similar to the previous Watir question.
Given that the id is randomly generated, it does not sounds like a good way of finding the link. You will likely need to use the text of the same row.
Assuming that the "This is Text" is unique (as you said you want to find the Add link for it), you can find that td, go to the parent row and then get the link.
b.td(:text => 'This is Text').parent.link.click
If you need to ensure that the text is in the second column, then you can do:
b.trs.find{ |tr|
tr.td.exists? and tr.td(:index => 1).text == 'This is Text'
}.link.click
The tr.td.exists? is added in case some of your rows do not have any tds (example a header row), which would cause an exception when checking the second criteria.
Don't mix quotes in HTML tags. id: doesn't work. <td>s should rarely be empty. The Add button should be a button, not an <a>nchor element. Buttons only work in <form>s.
<form id="abc_440" action='someURI'> <!-- The handler for the button. -->
<table class="listtable">
<tbody>
<tr>
<td id = "someid">
<!-- What goes here? -->
</td>
<td class='someclass_item'>
This is Text
</td>
<td class='someclass_button'>
<button name='add'>Add</button>
</td>
</tr>
</tbody>
</table>
</form>
You should be able to find the button through its name attribute, add, and through the form's id attribute, abc_440. Who generates the ids?
Once you have the problem of finding the add button solved, and figuring out where the form's id comes from, please then stop using tables for formatting. There's no need for that. Learn about <form>s, <fieldset>s, <legend>s, and <label>s. I doubt you need the *some_id* part, the text part should probably be a <label>, and you can use CSS to format your <label>s as:
label {
width: 150px;
float: left;
}
fieldset p {
clear: left;
}
I have a simple table, how do I use JqGrid for it? I downloaded the plugin, but don't know how to use it.
<table id="table-to-grid">
<tr>
<td>something</td>
<td>something else</td>
</tr>
</table>
Silly me, I didn't include headings and tbody>. It works now.
<table id="table-to-grid">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tbody>
<tr>
<td>something</td>
<td>something else</td>
</tr>
</tbody>
</table>
I don't recommend you to use tableToGrid. You should better use grid with datatype: "local", data: mydata options where mydata represents the input data. You have to specify colModel which describe the columns of the grid (name, sort type, format etc). It's important to divide pure data which need be placed in the grid from the presentation of the data. For example you can display boolean data as checkboxes. You need just add formatter: "checkbox" property in the definition of the corresponding column.
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.