I am need to take acces to the model fields from the template of the item of a listview. Basically I need to replace the first name with the "valueToAccess" from viewModel. Some Body can help me here.
<div id="app"></div>
<script type="text/x-kendo-template" id="item-template">
#= name #
</script>
<script type="text/x-kendo-template" id="view-template">
<div data-role="listview"
data-bind="source: items"
data-template="item-template">
</div>
</script>
<script>
var viewModel = {
items: new kendo.data.DataSource({
data: [{ name: "item1" }, { name: "item2" }]
}),
valueToAccess: "index",
remove: function(e){
this.items.remove(e.data);
}
};
viewModel.items = new kendo.data.DataSource({
data: [{ name: "item1" }, { name: "item2" }]
});
var view = new kendo.View('view-template', { model: viewModel });
view.render("#app");
</script>
<div id="app"></div>
You can do it by using a dependent property.
<script type="text/x-kendo-template" id="item-template">
<a data-bind="attr: { href: href}, text: name"></a>
</script>
<script>
var viewModel = {
items: new kendo.data.DataSource({
data: [{ name: "item1" }, { name: "item2" }]
}),
valueToAccess: "index",
href: function(item) {
return this.get("valueToAccess") + "/" + item.name;
},
remove: function(e){
this.items.remove(e.data);
}
};
</script>
Here is a live demo: http://jsbin.com/naxiy/1/edit
Related
The code for a Vue.js treeview looks like this:
HTML:
<!-- item template -->
<script type="text/x-template" id="item-template">
<li>
<div
:class="{bold: isFolder}"
v-on:click="toggle"
v-on:dblclick="changeType">
{{model.name}}
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="model in model.children"
:model="model">
</item>
<li class="add" v-on:click="addChild">+</li>
</ul>
</li>
</script>
<p>(You can double click on an item to turn it into a folder.)</p>
<!-- the demo root element -->
<ul id="demo">
<item
class="item"
:model="treeData">
</item>
</ul>
Script:
// demo data
var data = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
}
// define the item component
Vue.component('item', {
template: '#item-template',
props: {
model: Object
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () {
return this.model.children &&
this.model.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, 'children', [])
this.addChild()
this.open = true
}
},
addChild: function () {
this.model.children.push({
name: 'new stuff'
})
}
}
})
// boot up the demo
var demo = new Vue({
el: '#demo',
data: {
treeData: data
}
})
Is there any way I can add Bootstrap styling to this, to make the treeview look something like the first example below:
I have very little frontend experience and don't really understand where to put the CSS here. I don't really understand the part of the code where it's mixed script and cshtml (inside <script type="text/x-template" id="item-template">).
To add bootstrap to your page just include their source files:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
As far as those specific styles, I'm not going to fully setup your UI, that isn't what stack overflow is for. You can follow along with the instructions on this github which should get you close:
https://github.com/jonmiles/bootstrap-treeview
I've create a new directive to use the jQuery Plug-In Select2 with vue.js as written down on the vue.js example page.
But I don't want to just output the value of the selected option. To store the selections I try to bind my custom method create to the #change event.
Inside the directive, the Select2 will trigger the change event for the select input field while it updates, but nevertheless it still doesn't call my custom method.
Is there some hidden magic? I've tried to read the source code of vue.js but can't find something that puts me in the right direction.
Vue.directive('select', {
twoWay: true,
priority: 1000,
params: ['options'],
bind: function() {
var self = this;
$(this.el)
.select2({
data: this.params.options
})
.on('change', function() {
self.set(this.value);
});
},
update: function(value) {
$(this.el).val(value).trigger('change');
},
unbind: function() {
$(this.el).off().select2('destroy');
}
});
var vm = new Vue({
el: '#items',
data: {
items: [],
new_item: '',
options: [{
id: 1,
text: 'First'
}, {
id: 2,
text: 'Second'
}, {
id: 3,
text: 'Third'
}, {
id: 4,
text: 'Fourth'
}, {
id: 5,
text: 'Fifth'
}]
},
methods: {
create: function() {
var self = this,
label = '';
this.options.map(function(item) {
if (self.new_item == item.id)
label = item.text;
});
var obj = {
id: self.new_item,
name: label
};
this.items.push(obj);
this.new_item = '';
}
}
});
select {
min-width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<div id="items">
<ul>
<li v-for="item in items">{{ item.id }} – {{ item.name }}</li>
</ul>
<select v-select="new_item" #change="create" :options="options">
<option value="0">--Select--</option>
</select>
</div>
Maybe you can add watcher to your new_item variable like this. So you can do something when new_item value change.
I myself still searching how to trigger #change after select2 change method, but no clue til now.
Vue.directive('select', {
twoWay: true,
priority: 1000,
params: ['options'],
bind: function() {
var self = this;
$(this.el)
.select2({
data: this.params.options
})
.on('change', function() {
self.set(this.value);
});
},
update: function(value) {
$(this.el).val(value).trigger('change');
},
unbind: function() {
$(this.el).off().select2('destroy');
}
});
var vm = new Vue({
el: '#items',
data: {
items: [],
new_item: '',
options: [{
id: 1,
text: 'First'
}, {
id: 2,
text: 'Second'
}, {
id: 3,
text: 'Third'
}, {
id: 4,
text: 'Fourth'
}, {
id: 5,
text: 'Fifth'
}]
},
methods: {
create: function() {
var self = this,
label = '';
this.options.map(function(item) {
if (self.new_item == item.id)
label = item.text;
});
var obj = {
id: self.new_item,
name: label
};
this.items.push(obj);
this.new_item = '';
}
},
watch:{
new_item:function(){
alert(this.new_item);
}
}
});
select {
min-width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<div id="items">
<ul>
<li v-for="item in items">{{ item.id }} – {{ item.name }}</li>
</ul>
<select v-select="new_item" #change="create" :options="options">
<option value="0">--Select--</option>
</select>
</div>
I'm building a Kendo Grid using the MVVM pattern and I want 2 custom filters:
A general grid filter with extra = false and custom operators
A custom column filter with a combobox
Very similar to this Kendo Grid demo. I just can't seem to get it working with MVVM pattern using data-filterable attribute or filterable ui on the column:
<div data-role="grid"
data-filterable="customGridFilter"
data-columns="[
{ field: 'Id', hidden: 'true' },
{ field: 'Name', filterable: '{ ui: customNameFilter }' },
{ field: 'Value' }
]"
data-bind="source: gridDs">
</div>
I've created a JS Fiddle to illustrate what I'm going for.
Actually it just missed some point like
data-filterable="customGridFilter" should become
data-filterable="true",
and also in the kendo dojo they are using jQuery 1.9.1 and yours is
compact(edge) which cause the issue.
After changing to jQuery 1.9.1 it works fine like below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<script>
var customNameFilter = customNameFilter || null;
</script>
<div data-role="grid" data-filterable="true" data-columns="[
{ field: 'Id', hidden: 'true' },
{ field: 'Name', filterable: { ui: customNameFilter } },
{ field: 'Value' }
]" data-bind="source: gridDs"></div>
</div>
<script>
$(document).ready(function() {
customNameFilter = function(e) {
console.log("test")
e.kendoComboBox({
dataSource: {
data: [{
Id: 1,
Name: "Test1"
}, {
Id: 2,
Name: "Test2"
}, {
Id: 3,
Name: "Test3"
}]
},
dataValueField: "Id",
dataTextField: "Name",
filter: "contains"
});
};
var viewModel = kendo.observable({
gridDs: new kendo.data.DataSource({
data: [{
Id: 1,
Name: "Test1",
Value: 3
}, {
Id: 2,
Name: "Test2",
Value: 5
}, {
Id: 3,
Name: "Test3",
Value: 2
}, {
Id: 4,
Name: "Test4",
Value: 7
}]
}),
customGridFilter: {
extra: false,
operators: {
string: {
contains: "Contains",
doesnotcontain: "Does not contain",
eq: "Is equal to",
neq: "Is not equal to",
startswith: "Starts with",
endswith: "Ends with"
}
}
},
});
kendo.bind($('#test'), viewModel);
});
// this doesn't work
//var grid = $('#test').data('kendoGrid');
//grid.options.filterable = customFilter;
</script>
</body>
</html>
I am using angular schema form directive to render the form. I am able to render all the elements except checkbox. When I use checkbox I get following error:
TypeError: Cannot read property 'default' of undefined
JS:
var ngSchemaForm = {};
ngSchemaForm.schema={
type: "object",
properties: {
cbProp: {
cb: { title: "I am checkbox", type: "boolean", default: false }
},
}
}
ngSchemaForm.cbSection={
type: "conditional",
condition: "model.currentSection=='cbSection'",
items: [
{
type: "section",
htmlClass: "row",
items: [
{
type: "section",
htmlClass: "col-lg-12",
items: [{ key: "cbProp.cb", type: "checkbox" }]
}
]
}
]
}
ngSchemaForm.form={
"type": "section",
"htmlClass": "container",
"items": [ ngSchemaForm.cbSection ]
}
var formApp = angular.module('formApp', ['schemaForm']);
formApp.controller('FormController', function ($scope) {
$scope.schema = ngSchemaForm.schema;
$scope.form = ngSchemaForm.form;
$scope.model = { currentSection: "cbSection" };
});
HTML:
<div id="formApp" ng-app="formApp" ng-controller="FormController">
<p></p>
<ng-form name="formApp" >
<div sf-schema="schema"
sf-form="form"
sf-model="model">
</div>
</ng-form>
</div>
changed:
items: [{ key: "cbProp.cb", type: "checkbox" }]
To:
items: [{ key: "cbProp.cb" }]
and worked
I have DevExtreme dxList:
<div data-bind="dxList: { dataSource: ds, itemTemplate: tpl }">
</div>
var vm = {
ds: [{
"key": "group1",
"items": [{ name: "item1" }, { name: "item2" }]
}],
tpl: function() {
var r = '<div data-options="dxTemplate:{ name:\'tpl\' }">';
r += '<div data-bind="dxCheckBox: { text: name }"></div>';
r += '</div>';
return r;
}
};
};
ko.applyBindings(vm);
How can I change itemTemplate run-time only for a specific item? (e.g. on mouse over)
To change list item template you could use the following sample http://jsfiddle.net/oakvprw9/8/
This is the exemplary item template:
<div data-bind="dxList: { dataSource: dataSource, onItemClick: onItemClick }">
<div data-options="dxTemplate: { name: 'item' }">
<div>
<span data-bind="text: text, visible: !editEnabled()"></span>
<div data-bind="visible: editEnabled">
<div data-bind="dxTextBox: { value: text }"></div>
<div data-bind="dxButton: { text: 'Save', onClick: $root.saveChanges }"></div>
<div data-bind="dxButton: { text: 'Cancel', onClick: $root.cancelChanges }"></div>
</div>
</div>
</div>