I would like to attach an event to the button at the end of the sap.m.Select control to call the backend for values displayed in the dropdown of that control. How can this be achieved?
Thanks!
Please check this running example. Hope it gives you some hints. Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_belize" data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="myXmlView" type="ui5/xmlview">
<mvc:View height="100%" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="MyController" displayBlock="true">
<Select id="test_select" forceSelection="false" items="{
path: '/ProductCollection',
sorter: { path: 'ProductId' }
}">
<core:Item key="{ProductId}" text="{ProductId}" />
</Select>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function() {
"use strict";
sap.ui.define([
"jquery.sap.global",
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
], function(jQuery, Controller, JSONModel) {
"use strict";
return Controller.extend("MyController", {
onInit: function() {
this.oModel = new JSONModel();
this.getView().setModel(this.oModel);
var that = this;
var oSelect = this.getView().byId("test_select");
oSelect.ontap = function(oEvent) {
if (!oSelect.isOpen()) {
oSelect.setBusy(true);
that.oModel.setData({});
var callBackend = function() {
that.simulateBackendData();
oSelect.setBusy(false);
}
setTimeout(callBackend, 3000);
}
sap.m.Select.prototype.ontap.apply(this, arguments);
};
},
simulateBackendData: function() {
var oData = {
"ProductCollection": [{
"ProductId": Math.random()
},
{
"ProductId": Math.random()
},
{
"ProductId": Math.random()
},
{
"ProductId": Math.random()
},
]
};
this.oModel.setData(oData);
}
});
});
sap.ui.xmlview({
viewContent: jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content" role="application">
</body>
</html>
Related
I'd like to load Vue Component via AJAX dynamically and render its template.
Main Vue Instance:
const router = new VueRouter({
path: '/vue/actions/',
mode: 'history'
});
var app = new Vue({
el: '#mainContainer',
router,
data: {
mainContent: ''
},
methods: {
action: function (url) {
alert(url);
this.$router.push({ path: '/vue/actions/?'+url});
console.log(this.$route.query);
},
actions: function () {
var action;
if (!this.$route.query.action || this.$route.query.action == 'main') {
action = 'index';
} else {
action = this.$route.query.action;
}
var mainContent;
fetch('/vue/actions/?content_type=json&action='+action).then((response) => {
if(response.ok) {
return response.json();
}
throw new Error('Network response was not ok');
}).then((json) => {
this.$router.push({ path: '/vue/actions/', query: { action: json.action }});
// this.mainContent = json.template;
console.log(json.template);
this.dynamicComponent = json.template;
}).catch((error) => {
console.log(error);
});
}
},
created: function () {
this.actions();
}
})
Initial Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script src="/js/vue-router.js"></script>
</head>
<body>
<template><div><component :is="dynamicComponent"></component></div></template>
<div id="mainContainer" v-html="mainContent"></div>
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
Component I'd like to load via AJAX:
Vue.component('dynamicComponent', {
template: '<div>Dynamic Component!</div>'
});
Is it possible to load such Vue Componet and render its template (with an ability to use Vue data bindings in the Component template)?
Here is how I got what I need:
Main Vue Instance:
const router = new VueRouter({
path: '/vue/actions/',
mode: 'history'
});
var app = new Vue({
el: '#mainContainer',
router,
data: {
mainContent: ''
},
methods: {
action: function (url) {
this.$router.push({ path: '/vue/actions/?'+url});
console.log(this.$route.query);
},
actions: function () {
var action;
if (!this.$route.query.action || this.$route.query.action == 'main') {
action = 'index';
} else {
action = this.$route.query.action;
}
Vue.component('dynamic-component', (resolve) => {
import('/vue/actions/?content_type=javascript&action='+action).then((component) => {
resolve(component.default);
});
});
}
},
created: function () {
this.actions();
}
})
Main/Initial Page Body:
<body>
<div id="mainContainer">
<dynamic-component></dynamic-component>
</div>
<script type="text/javascript" src="{{.__web_root_folder}}/js/main.js"></script>
</body>
Component code that I'm loading when needed:
export default {
template: '<div>Async Component! {{.test}}</div>',
data () {
return {
test: 'Works!'
}
}
}
Thanks to #MazinoSUkah !
I need get changes in my array then i edit data in user controls. In this snipet my example. As I did not try, I can not do it. How I can make it?
Please try with the 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>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
</head>
<body>
<a id="btnShowTest" href="#">Test</a>
<div id="layout"></div>
<script>
var root = {};
root.data =
[
{
code: 1,
name: "Test1",
status: true
},
{
code: 2,
name: "Test2",
status: true
},
{
code: 3,
name: "Test3",
status: false
},
];
$(function () {
$("#btnShowTest").kendoButton().click(function (e) {
Show();
});
root.ds = new kendo.data.DataSource(
{
pageSize: 10,
schema:
{
model:
{
id: "code",
fields:
{
code:
{
editable: false,
nullable: true
},
name:
{
type: "string"
},
status:
{
type: "boolean"
},
}
}
},
data: root.data
});
$("#layout").kendoListView(
{
dataSource: root.ds,
template: kendo.template($("#managersTemplate").html())
});
});
function Show() {
//root.ds.sync();
// var arr = root.ds.data();
var arr = root.data;
var str = "";
for (var i = 0; i < arr.length; ++i) {
str += arr[i].status + ", ";
}
alert(str);
}
function testclick(obj) {
var arr = root.data;
for (var i = 0; i < arr.length; ++i) {
if (arr[i].code == $(obj).attr('id')) {
arr[i].status = $(obj).prop('checked');
}
}
}
</script>
<script type="text/x-kendo-tmpl" id="managersTemplate">
<div >
<input type="checkbox" data-bind="checked:status" name="status" id="#:code#" onclick="testclick(this)" />
<span class="checkbox">#:name#</span>
</div>
</script>
</body>
</html>
Let me know if any concern.
I'm trying to configure a Kendo grid and I'm having issues when trying to add properties such as sorting, grouping, etc. The grid works until I add the property, then it doesn't display any of the data. I have looked at the documentation on Kendo's site and it looks as if I have everything the same as theirs but obviously I'm nissing something.
Here is the View:
#model ExampleKendoUI.Models.HeaderVm
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>#Model.Name</div>
#section scripts {
<script>
// Output the data as JSON
var podata = #Html.Raw(Json.Encode(ViewBag.LineItems));
</script>
<div id="poGrid" class="k-content">
<script>
$(document).ready(function () {
$("#poGrid").kendoGrid({
dataSource: {
data: podata
},
// sortable:true, *** Uncommenting this will break the grid ***
columns: [
{
field: "Description",
title: "Desc"
},
{
field: "Quantity",
title: "Quantity"
}
]
});
});
</script>
</div>
}
Here is the controller:
namespace ExampleKendoUI.Controllers
{
public class SampleController : Controller
{
//
// GET: /Sample/
public ActionResult Index(int id)
{
var header = new HeaderVm()
{
Id = id,
Name = "Req ID"
};
var results = new List<PoLineVm>()
{
new PoLineVm()
{
Id = 1,
Description = "Some Product",
Quantity = 1.5
},
new PoLineVm()
{
Id = 2,
Description = "Another Product",
Quantity = 4.0
},
new PoLineVm()
{
Id = 3,
Description = "Last Product",
Quantity = 20
},
};
ViewBag.LineItems = results;
return View(header);
}}}
Here is the _Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
<link href="~/Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" />
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
<script src="/scripts/kendo/2012.3.1114/kendo.core.min.js"></script>
<script src="~/Scripts/kendo/2012.3.1114/kendo.data.min.js"></script>
<script src="~/Scripts/kendo/2012.3.1114/kendo.grid.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
You haven't included the required JavaScript files and the JavaScript error means that kendoSortable is missing. Check the documentation for the required JavaScript files: http://docs.kendoui.com/getting-started/javascript-dependencies
Here is my jsonp feed: http://www.letheatredelorient.fr/saison/data.jsonp (JSONLint valid)
Here is my getJSON script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$.getJSON("http://www.letheatredelorient.fr/saison/data.jsonp?callback=", function (data) {
$.each(data.Items, function (i, node) {
var title = node.titre;
$("#myTitle").html(title);
});
});
});
</script>
</head>
<body>
<div id="myTitle"></div>
</body>
</html>
It's really simple. But, it gets the feed, but it doesn't parse it. Any ideas?
Try this:
var title = node.node.titre;
In your code the node is the Item object, the node is in that, is this a little clearer?
$.getJSON("http://www.letheatredelorient.fr/saison/data.jsonp?callback=", function (data) {
$.each(data.Items, function (i, item) {
//For each item in Items
var title = item.node.titre;
$("#myTitle").html(title);
});
});
This is your json, I've added comments, you're looping through items which contain node:
{
"Items": [
-item{
"node": {
"titre": "La Faculté",
"image": "http://www.letheatredelorient.fr/sites/default/files/imagecache/130/saison/spectacles/faculte/photos/faculte-web2calainfonteray.jpg"
}
},
-item{
"node": {
"titre": "Nouveau Roman",
"image": "http://www.letheatredelorient.fr/sites/default/files/imagecache/130/saison/spectacles/nouveau-roman/photos/1210-nouveauroman-04cjeanlouisfernandez.jpg"
}
}
]
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax div example</title>
<script type="text/javascript" src="jscripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var dbn,machine_name;
function main_draw(d,m,r)
{
dbn = d;
machine_name = m;
draw_charts();
if ( r > 0 )
{
setRefreshid = setInterval("draw_pie()",r);
}
}
function draw_charts()
{
document.getElementById('ajdiv4').innerHTML = "";
document.getElementById('ajdiv3').innerHTML = "";
document.getElementById('ajdiv2').innerHTML = "";
document.getElementById('ajdiv1').innerHTML = "";
draw_pie();
draw_line();
draw_space();
draw_backup();
}
function draw_pie()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/graph_pie1.html',
success: function(html)
{
$("#ajdiv4").html(html);
}
}); }, 100);
}
function draw_line()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/graph_line1.html',
success: function(html)
{
$("#ajdiv3").html(html);
}
}); }, 200);
}
function draw_space()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/space_graph.php',
success: function(html)
{
$("#ajdiv2").html(html);
}
}); }, 300);
}
function draw_backup()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/backup_graph.php',
success: function(html)
{
$("#ajdiv1").html(html);
}
}); }, 400);
}
</script>
</head>
<body>
<div id="ajdiv1" style="float:left"></div>
<div id="ajdiv2" style="float:left"></div>
<div id="ajdiv3" style="float:left"></div>
<div id="ajdiv4" style="float:left"></div>
<button id="b1" onclick="main_draw('CQ1','va2apsap010',10000)">Display Content</button>
</body>
</html>
Above is an entire code which makes AJAX calls upon clicking on "Display Content" and after that it refreshes content of div "ajdiv4" by calling function "draw_pie". The only problem with this is that when it refreshes, it moves the pie graph all the way to the left. I would like it to stay and update it in the current position. Please help if any of you know what is going on here, Thanks.
Have you tried specifying the dimensions of your DIVs? With your current code, you could probably do:
<style>
#ajdiv1, #ajdiv2, #ajdiv3, #ajdiv4 {
height:200px;
width:200px;
}
</style>
Alternatively, add a class attribute to simplify things:
<style>
.chartContainer {
height:200px;
width:200px;
}
</style>
If you have a working version up, or can post something on JSfiddle, that would make things easier to troubleshoot.