I want to access [PATH_TO_SOME_OTHER_MODEL] value. So that when the view loads the TEAMS can be filtered via oData V4 call itself
<Select id="TeamSelect" change="onTeamSelect" autoAdjustWidth="true"
items="{
path : '/TEAMS',
parameters : {
$filter : 'Name startswith \'[PATH_TO_SOME_OTHER_MODEL]\''
}
}" >
<core:Item key="{Team_Id}" text="{Name}"/>
</Select>
What is the correct syntax to get the value from another model?
You can't do it directly in the XML. You need to create and add a Filter once both models are loaded.
Here a snippet
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize_plus' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Select modelContextChange="onChange" id="mySelect" items="{ path: 'model1>/Names'}">
<core:Item key="{model1>Id}" text="{model1>Name}" />
</Select>
<Button text="Disable Filter" press="removeFilter"></Button>
<Button text="Enable Filter" press="addFilter"></Button>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onAfterRendering: function() {
this.addFilter();
},
addFilter: function() {
var sFilterQuery = this.getView().getModel("model2").getProperty("/filterQuery");
var oFilter = new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.StartsWith, sFilterQuery);
this.getView().byId("mySelect").getBinding("items").filter(oFilter);
},
removeFilter: function() {
this.getView().byId("mySelect").getBinding("items").filter();
}
});
/*** THIS IS THE "APPLICATION" CODE ***/
// create some dummy JSON data
var data1 = {
Names: [{
"Id": 1,
"Name": "John",
},
{
"Id": 1,
"Name": "Mark",
},
{
"Id": 1,
"Name": "Liz",
},
{
"Id": 1,
"Name": "Jane",
}
]
};
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData(data1);
//create a second model
var data2 = {
filterQuery: "J"
};
var oJSONModel2 = new sap.ui.model.json.JSONModel();
oJSONModel2.setData(data2);
// instantiate the View
var myView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
}); // accessing the HTML inside the script tag above
myView.setModel(oJSONModel, "model1");
myView.setModel(oJSONModel2, "model2");
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
Related
How to pass default value in md-autocomplete?
Image 1 : HTML code
Image 2 : JS code
Image 3 : Output
As you can see, I am not getting any default country as output. Is there any way to do that?
Assign yr SearchText the default value & selectedItem the object.
$scope.local ={
...
searchText : 'Default Value',
selectedItem : 'Default object'
...
}
I write small codepen with autocomplete and default value.
What you must do:
Init main model.
Define model field, used in autocomplete md-selected-item property.
Define callback for loading autocomplete items.
Before save main model extract id (or other field) from associated field.
Main error in your code here:
$scope.local = {
...
selectedItem: 1, // Must be object, but not integer
...
}
(function(A) {
"use strict";
var app = A.module('app', ['ngMaterial']);
function main(
$q,
$scope,
$timeout
) {
$timeout(function() {
$scope.user = {
firstname: "Maxim",
lastname: "Dunaevsky",
group: {
id: 1,
title: "Administrator"
}
};
}, 500);
$scope.loadGroups = function(filterText) {
var d = $q.defer(),
allItems = [{
id: 1,
title: 'Administrator'
}, {
id: 2,
title: 'Manager'
}, {
id: 3,
title: 'Moderator'
}, {
id: 4,
title: 'VIP-User'
}, {
id: 5,
title: 'Standard user'
}];
$timeout(function() {
var items = [];
A.forEach(allItems, function(item) {
if (item.title.indexOf(filterText) > -1) {
items.push(item);
}
});
d.resolve(items);
}, 1000);
return d.promise;
};
}
main.$inject = [
'$q',
'$scope',
'$timeout'
];
app.controller('Main', main);
}(this.angular));
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script>
</head>
<body ng-app="app" flex layout="column" layout-margin ng-controller="Main">
<md-content layout="column" class="md-whiteframe-z1" layout-margin>
<md-toolbar>
<div class="md-toolbar-tools">
<h3>Form</h3>
</div>
</md-toolbar>
<md-content class="md-whiteframe-z1">
<div class="md-padding">
<md-input-container>
<label for="firstname">First name</label>
<input type="text" name="firstname" ng-model="user.firstname" />
</md-input-container>
<md-input-container>
<label for="lastname">Last name</label>
<input type="text" name="lastname" ng-model="user.lastname" />
</md-input-container>
<md-autocomplete md-selected-item="user.group" md-items="item in loadGroups(filterText)" md-item-text="item.title" md-search-text="filterText">
<md-item-template>{{ item.title }}</md-item-template>
<md-not-found>No items.</md-not-found>
</md-autocomplete>
</div>
</md-content>
</md-content>
<md-content class="md-whiteframe-z1" layout-margin>
<md-toolbar>
<div class="md-toolbar-tools">
<h3>Model as JSON</h3>
</div>
</md-toolbar>
<md-content class="md-padding">
<p>
{{ user | json }}
</p>
</md-content>
</md-content>
</body>
I know this is an old question, but some people may benefit from my solution. I struggled with the problem of the model for the auto-complete being asynchronous and having my autocompletes as part of an ng-repeat. Many of the solutions to this problem found on the web have only a single auto complete and static data.
My solution was to add another directive to the autocomplete with a watch on the variable that I want to set as default for the auto complete.
in my template:
<md-autocomplete initscope='{{quote["Scope"+i]}}' ng-repeat='i in [1,2,3,4,5,6,7,8]'
class='m-1'
md-selected-item="ScopeSelected"
md-clear-button="true"
md-dropdown-position="top"
md-search-text="pScopeSearch"
md-selected-item-change='selectPScope(item.label,i)'
md-items="item in scopePSearch(pScopeSearch,i)"
md-item-text="item.label"
placeholder="Plowing Scope {{i}}"
md-min-length="3"
md-menu-class="autocomplete-custom-template"
>
then in my module:
Details.directive('initscope', function () {
return function (scope, element, attrs) {
scope.$watch(function (){
return attrs.initscope;
}, function (value, oldValue) {
//console.log(attrs.initscope)
if(oldValue=="" && value!="" && !scope.initialized){
//console.log(attrs.initscope);
var item = {id:0, order:0,label:attrs.initscope?attrs.initscope:"" }
scope.ScopeSelected = item;
scope.initialized = true;
}
});
};
});
this checks for changes to the quote["Scope"+i] (because initially it would be null) and creates an initial selected item and sets the autocompletes' selected item to that object. Then it sets an initialized value to true so that this never happens again.
I used timeout to do this.
$timeout(function() {
$scope.local = {selectedItem : 1}
}, 2000);
How can we implement select all option in Kendo Multiselect For?
#(Html.Kendo().MultiSelectFor(model => model.TestData)
.DataTextField("DataText")
.DataValueField("DataValue")
.Placeholder("Select..")
.Events(e => e.DataBound("CheckIfEmpty"))
.AutoBind(false)
.Enable(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Action", "Controller").Data("filterData");
})
.ServerFiltering(false);
})
)
Please check below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section k-header">
<select id="TestData" data-placeholder="Select movie..."></select>
</div>
<div>
<button type="button" onclick="SelectAllClick();">Select All</button>
</div>
<script>
$(document).ready(function () {
var data = [
{ text: "12 Angry Men", value: "1" },
{ text: "Il buono, il brutto, il cattivo.", value: "2" },
{ text: "Inception", value: "3" },
{ text: "One Flew Over the Cuckoo's Nest", value: "4" },
{ text: "Pulp Fiction", value: "5" },
{ text: "Schindler's List", value: "6" },
{ text: "The Dark Knight", value: "7" },
{ text: "The Godfather", value: "8" },
{ text: "The Godfather: Part II", value: "9" },
{ text: "The Shawshank Redemption", value: "10" },
{ text: "The Shawshank Redemption 2", value: "11" }
];
$("#TestData").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data
});
});
function SelectAllClick() {
var multiSelect = $("#TestData").data("kendoMultiSelect");
var selectedValues = "";
var strComma = "";
for (var i = 0; i < multiSelect.dataSource.data().length; i++) {
var item = multiSelect.dataSource.data()[i];
selectedValues += strComma + item.value;
strComma = ",";
}
multiSelect.value(selectedValues.split(","));
}
</script>
</body>
</html>
Let me know if any concern.
Something like this should work:
<script>
$('#selectAll').click(function(){
var ctl = $('#TestData').data('kendoMultiSelect');
var opts = ctl.dataSource.data();
var selected = [];
for (var idx = 0; idx < opts.length; idx++) {
selected.push(opts[idx].value);
}
ctl.value(selected);
});
</script>
If you're using something like underscore, I can make it even easier for you by doing something like this:
<script>
$('#selectAll').click(function(){
var ctl = $('#TestData').data('kendoMultiSelect');
var opts = ctl.dataSource.data();
var selected = _.pluck(opts, 'value');
ctl.value(selected);
});
</script>
I have my google pie chart code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
["Work", 50],
["Eat", 20],
["Commute", 20],
["Watch TV", 5],
["Sleep", 5]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I need to change it in ruby code.
here in #datas variable i have two field
#datas.each do |data|
data.name
data.value
It gives two value but i need to write in this order so that my code works like
['data.name, data.value]
How can i change my ruby code in google api formate? I did but i couldn't.
Try this:
#dates.map { |d| [d.name, d.value] }
EDIT: And the javascript code could be like this:
var data = google.visualization.arrayToDataTable(<%= #dates.map { |d| [d.name, d.value] }.inspect %>)
If I have a controller:
HTH.todosController = SC.ArrayProxy.create({
content: HTH.store.find(HTH.Todo)
});
I can display all todos doing this:
...
<script type="text/x-handlebars">
{{#collection contentBinding="HTH.todosController"}}
{{content}}
{{/collection}}
</script>
...
But how would I display a todo with a specific ID coming from the view?
...
<script type="text/x-handlebars">
{{#view contentBinding="HTH.todosController.specific" specificId="1"}}
{{content}}
{{/view}}
</script>
...
Here's a solution in jsfiddle allowing you to define the specific id of the todo in the handlebars definition of the view as you have in your example. It's a bit crude, but it works.
Handlebars:
<script type="text/x-handlebars">
{{view App.SpecificIdWrapper}}
<hr />
{{#collection App.TodosView contentBinding="App.todosController"}}
{{content.name}}
{{/collection}}
<hr />
{{view App.SelectedToDoView}}
</script>
<script type="text/x-handlebars" data-template-name="specificId">
{{#view App.SpecificIdView dataBinding="App.todosController.content" specificId=3}}
Specific Todo Id: {{content.id}}
<br />
Specific Todo Name: {{content.name}}
{{/view}}
</script>
<script type="text/x-handlebars" data-template-name="selectedToDo">
{{#view contentBinding="App.todosController.selectedToDo.content"}}
Selected Todo Id: {{content.id}}
{{/view}}
JavaScript:
App = Ember.Application.create();
App.SpecificIdWrapper = Ember.View.extend({
templateName: 'specificId'
});
App.SpecificIdView = Ember.View.extend({
content: null,
data: null,
specificId: null,
_getTodoById: function() {
var data = this.get('data');
if(data) {
for(var i=0;i<data.length;i++) {
if(data[i].get('id') === this.get('specificId')) {
this.set('content', data[i]);
break;
}
}
}
},
// This will make sure the content is set when the view is rendered
didInsertElement: function() {
this._getTodoById();
},
// And this will update the content whenever specificId is changed
specificIdDidChange: function() {
this._getTodoById();
}.observes('specificId')
});
App.SelectedToDoView = Ember.View.extend({
templateName: 'selectedToDo'
});
App.TodosView = Ember.CollectionView.extend({
itemViewClass: Ember.View.extend({
click: function() {
App.todosController.set('selectedToDo', this);
}
})
});
App.todosController = Ember.ArrayController.create({
content: [
Ember.Object.create({id: 1, name: "obj1"}),
Ember.Object.create({id: 2, name: "obj2"}),
Ember.Object.create({id: 3, name: "obj3"}),
Ember.Object.create({id: 4, name: "obj4"}),
Ember.Object.create({id: 5, name: "obj5"}),
Ember.Object.create({id: 6, name: "obj6"})
],
selectedToDo: null
});
Are you thinking about a CRUD style master/details workflow?
If you are, here's a series of tutorials I just wrote for CRUD operations in SC2.
Basically, I attach a double click handler to the table row that triggers a state chart action to display the details in a modal dialog.
CollectionView : SC.CollectionView.extend({
contentBinding: 'App.resultsController',
itemViewClass: SC.View.extend({
tagName: 'tr',
// Spit out the content's index in the array proxy as an attribute of the tr element
attributeBindings: ['contentIndex'],
willInsertElement: function() {
this._super();
// Add handler for double clicking
var id = this.$().attr('id');
this.$().dblclick(function() {
App.statechart.sendAction('showUser', $('#' + this.id).attr('contentIndex'));
});
}
})
Part 4 of the tutorial shows how I did this.
Hope this helps.
There is an example tree in the dojo campus with hyperlinks. They are not clickable. Does anyone have a dojo implementation with clickable links? Have you been able to determine which node/link was clicked? I am looking for sample code that does this.
Here is the sample code from dojo campus. How do I make these links clickable and how do I implement node selection from click of image?
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
var rawdata = [{
label: 'Something <b>important</b>',
id: '1',
children: [{
label: 'Life',
id: '1.1'
},
{
label: 'Liberty',
id: '1.2'
}]
},
{
label: 'Some links (note: the link is <b>not</b> clickable)',
id: '2',
children: [{
id: '2.1',
label: 'Dojo Toolkit'
},
{
id: '2.2',
label: '<img src="http://dojofoundation.org/media/img/dojo.logo.png" alt="greatest ever" height="32px" />'
},
{
id: '2.3',
label: 'my blog'
}]
}];
function prepare() {
var store = new dojo.data.ItemFileReadStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store
});
var treeControl = new dijit.Tree({
model: treeModel,
showRoot: false,
_createTreeNode: function(
/*Object*/
args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
return tnode;
}
},
"treeOne");
}
dojo.addOnLoad(prepare);
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div id="treeOne">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
You can do a connect to the onClick event on the Tree. When creating your Tree, add an extra onClick parameter to your constructor, pointing to a function with the following signature:
function myOnClickHandler(item, tree, evt){
//item is the node's DataStore item
//I forgot if tree is the whole tree or just the currtent node
//evt is the usual event object, with things like mouse position, etc...
console.log('clicked a tree');
}
var treeControl = new dijit.Tree({
model: treeModel,
showRoot: false,
_createTreeNode: function( /*Object*/ args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
return tnode;
},
onClick: myOnclickHandler // THIS LINE //
},
"treeOne");