I have an enum field linked to a remote source and as you type in the field the remote source supplies matches, which pop up just like you would expect. It works great. But I need that field to be in a Form. The problem is that when it's in the form it no longer works. I stripped the code down and listed it below. Hopefully the code below is enough, but you can click the links provided to try it and view source for the next couple of weeks or so.
Can anyone explain how to make it work in the Form?
This code works (try it here):
<html>
<head>
<title>Remote Source Enum</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div class="w2ui-field"><label>Name Picker:</label><div> <input id="tcidPicker"></div></div>
<script>
$('#tcidPicker').w2field('enum', {
url: '/v1/transactantstd/ISO',
renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
compare: function (item, search) {
// ... lines removed for brevity ...
}
});
</script>
</body>
</html>
This code does not work (try it here):
<html>
<head>
<title>Remote Source Enum in a Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="form">
<div class="w2ui-field">
<label>Name Picker:</label><input id="tcidPicker" name="tcidPicker">
</div>
</div>
<script type="text/javascript">
$(function () {
$('#form').w2form({
name : 'form',
fields: [
{ field: 'tcidPicker',
type: 'enum',
url: '/v1/transactantstd/ISO',
renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
compare: function (item, search) {
// ... lines removed for brevity
},
},
],
});
});
</script>
</body>
</html>
You need to wrap the options in a options property.
See: http://w2ui.com/web/docs/1.5/w2form.fields
In your case:
fields: [
{ field: 'tcidPicker',
type: 'enum',
options: {
url: '/v1/transactantstd/ISO',
renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
compare: function (item, search) {
// ... lines removed for brevity
},
},
},
],
Related
I have 3 columns in an ag-grid (version 23.2.0). First column and third column should be clickable to a modal.
The 3rd column has a FA pencil and works fine.
The 1st column has a name. The name is displayed but there is no clickable behavior.
I have included the code below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="Components" content="">
<meta name="Bryan Schmiedeler" content="">
<link rel="icon" href="../../favicon.ico">
<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/navbar-fixed-top/">
<!-- Latest compiled and minified Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper.js, -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Bootstrap.js, -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- ag-Grid.js, -->
<script src="https://unpkg.com/#ag-grid-enterprise/all-modules#23.2.0/dist/ag-grid-enterprise.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
var columnDefs = [
{headerName: "Trucker Name", field: "name",cellRenderer: 'activateCellRenderer2', width:250, colSpan: function(params) {
return params.data === 2 ? 3 : 1;
},},
{headerName: "Businesses", field: "model", minWidth: 200,
maxWidth: 350, flex: 2,},
{headerName: "Actions", field: "price",type:"rightAligned", cellRenderer: 'activateCellRenderer',flex: 1}
];
// specify the data
var rowData = [
{name: "Ben Christy", model: "Salina", price: "A"},
{name: "Cindy Blideman", model: "Pratt", price: "I"},
{name: "Wes Woodson", model: "Waverly", price: "A"},
{name: "Bryan Schmiedeler", model: "Overland Park", price: "A"}
];
// let the grid know which columns and what data to use
var gridOptions = {
defaultColDef: {
resizable: true
},
columnDefs: columnDefs,
domLayout: 'autoHeight',
components: {
'activateCellRenderer': ActivateCellRenderer,
'activateCellRenderer2': ActivateCellRenderer2
},
rowData: rowData,
};
// cell renderer class
function ActivateCellRenderer() {
}
// init method gets the details of the cell to be renderer
ActivateCellRenderer.prototype.init = function(params) {
this.eGui = document.createElement('div');
this.eGui.innerHTML = '<a data-toggle="modal" href="#myModal">\
<i class="fa fa-pencil"</i>\
</a>'
};
ActivateCellRenderer.prototype.getGui = function() {
return this.eGui;
};
// cell renderer class
function ActivateCellRenderer2() {
}
// init method gets the details of the cell to be renderer
ActivateCellRenderer2.prototype.init = function(params) {
this.eGui = document.createElement('div');
this.eGui.innerHTML = '<a data-toggle="modal" href="#myModal">'; this.eGui.innerHTML += params.value;
this.eGui.innerHTML += '</a>';
};
ActivateCellRenderer2.prototype.getGui = function() {
return this.eGui;
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
</script>
</head>
<body>
<div class = "container"; style= "width: 100%";>
<div class = "row">
<div id="myGrid" class="ag-theme-alpine" style="width: 100%";></div>
</div>
</div>
<body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
JS is not happy with the way you are building innerHTML. If you do not close the tag in one line then JS will do it for you and will ignore any matching closing tag it encounters later.
do it this way and cell will render like link and will be clickable.
this.eGui.innerHTML = '<a data-toggle="modal" href="#myModal">' + params.value + '</a>';
here is a fiddle containing your code snippet.
https://jsfiddle.net/dnfb0wop/
also check out this image explaining innerHTML fiasco.
Having two distinct values such as QtValidF and DocDate, I want to be able to display DocDate only if QtValidF comes null. How could I condition this?
<Text text="{
path: 'QtValidF',
formatter:'.formatoFecha'
}"/>
I'm trying this but doesn't work.
<Text text="{= ${QtValidF} != 'null' ? {
path: 'DocDate',
formatter: '.formatoFecha'
} : {
path: 'QtValidF',
formatter: '.formatoFecha'
}}"/>
Expression Binding
In general, you can make use of expression binding for a short and simple conditional expression.
<MyControl anyProperty="{= ${myPrimary} || ${mySecondary}}" />
Just like in JS, when the first operand results in one of the falsy values, the second one is taken into account.
Formatter
In case a formatter is preferred, the composite binding syntax can be used:
<MyControl anyProperty="{
parts: [
'myPrimary',
'mySecondary'
],
formatter: '.getThatValue'
}" />
Then in the controller:
getThatValue: function(primaryValue, secondaryValue) {
return primaryValue || secondaryValue;
},
For more information, please take a look at the topics Binding Syntax and Composite Binding.
Here is the inline binding expression:
value='{= ${/QValidF} !== null ? ${/QValidF} : ${/DocDate} }'
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Bernard LeTourneur - UI5 Single Page</title>
<script
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
id='sap-ui-bootstrap'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-bindingSyntax='complex'
data-sap-ui-compatVersion='edge'
data-sap-ui-preload='async'>
</script>
<script id='myXmlView' type='ui5/xmlview'>
<mvc:View
controllerName='MyController'
xmlns='sap.m'
xmlns:core='sap.ui.core'
xmlns:mvc='sap.ui.core.mvc'>
<Input id='inputStatus' enabled='false' value='{= ${/QValidF} !== null ? ${/QValidF} : ${/DocDate} }' />
<Button press="handleDataChange" text='{= ${/QValidF} !== null ? "Set QValidF to Null" : "Set QValidF to something"}' />
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
'use strict';
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function (Controller, JSONModel) {
'use strict';
return Controller.extend('MyController', {
onInit : function () {
var that = this;
var data = {QValidF: "something", DocDate: "2018/06/08"};
var oModel = new JSONModel(data);
this.getView().setModel(oModel);
},
handleDataChange: function(){
var isNull = this.getView().getModel().getProperty("/QValidF");
console.log(isNull);
if (isNull=="something"){
this.getView().getModel().setProperty("/", {QValidF: null, DocDate: "2018/06/08"});
}
else{
this.getView().getModel().setProperty("/", {QValidF: "something", DocDate: "2018/06/08"});
}
}
});
});
sap.ui.xmlview({
viewContent : jQuery('#myXmlView').html()
}).placeAt('content');
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
I have one jquery ui autocomplete input that I would like to show another dropdown after another. For example : If I type two characters of the city name like ba, it would display a dropdown contained : Addis Ababa, Baghdad, Baku, Bamako and Bangkok. If I pick one of them (Bangkok) and press a spacebar, another dropdown (at the same input box) would be displayed : Bangkok Accommodation, Bangkok Restaurants, Bangkok Sights, and Bangkok Transport. I can do this but only for the first time. When I change the keyword like ab. it should display Abu Dhabi, Abuja, etc but the dropdown fail to be displayed. Here is the script :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
}
});
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
</div>
</body>
</html>
I dont want to use another input box for this.
http://jsfiddle.net/Lngzbjc6/5/
After many trying, I got the solution (I dont know if this is the best). Here is the full code.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
}
});
}
});
$('#dest').keypress(function(event){
var dest = $.trim($('#dest').val());
var temp_val = $.trim($('#temp_val').val());
if(temp_val != ''){
if(event.which != 32)
$('#dest').autocomplete('option','source',Cities);
else{
var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
var found_arr='';
$.each(arr,function(index,value){
if(temp_val.indexOf(value) >= 0){
found_arr=value;
return false;
}
});
if(found_arr != '')
temp_val=temp_val.replace(found_arr,'');
var more=[
temp_val + ' Accommodation',
temp_val + ' Restaurants',
temp_val + ' Sights',
temp_val + ' Transport'
];
$('#dest').autocomplete('option','source',more);
}
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
<input type="hidden" id="temp_val" name="temp_val" value="">
</div>
</body>
</html>
I am using Kendo Grid UI. The following is an example of the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />
<link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
</head>
<body>
<div id="main">
<h1 id="exampleTitle">
<span class="exampleIcon gridIcon"></span>
<strong>Grid /</strong> Column resizing </h1>
<div id="theme-list-container"></div>
<div id="exampleWrap">
<script>preventFOUC()</script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
gridDataSource = new kendo.data.DataSource({
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
scrollable: true,
resizable: true,
columns: [
{
field: "OrderID",
title: "ID"
}, {
field: "OrderDate",
title: "Order Date"
},
{
field: "ShipCountry",
title: "Ship Country"
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date"
}
]
});
});
</script>
</div>
</div>
</div>
I want a customized reorder on columns. I have disabled drag and drop on OrderID. But columns other than OrderID can be reordered and these columns can be placed before OrderID column.
Is there a way where I can disable dropping of columns before OrderID?
You should do it in two steps:
Disable dropping into first column.
Disable dragging first column.
For the first part after creating the grid you can do:
$("th:nth(0)", "#grid").data("kendoDropTarget").destroy();
This gets from a grid which identifier is grid and the first head cell th:nth(0) the KendoUI DropTarget and destroys it (no longer a valid drop target).
For the second part, you should define a dragstart event that checks that you are dragging the first column and if so, you do not allow to drag it.
$("#grid").data("kendoDraggable").bind("dragstart", function(e) {
if (e.currentTarget.text() === "ID") {
e.preventDefault();
}
});
NOTE: Here I detected the first column asking for its text (ID) but you might change it to check for its position in the list of th in the grid and if so invoke preventDefault.
Check it running here: http://jsfiddle.net/OnaBai/jzZ4u/1/
check this for more elegant implementation:
kendo.ui.Grid.fn._reorderable = function (reorderable) {
return function () {
reorderable.call(this);
var dropTargets = $(this.element).find('th.disable-reorder');
dropTargets.each(function (idx, item) {
$(item).data("kendoDropTarget").destroy();
});
var draggable = $(this.element).data("kendoDraggable");
if (draggable) {
draggable.bind("dragstart", function (e) {
if ($(e.currentTarget).hasClass("disable-reorder"))
e.preventDefault();
});
}
}
}(kendo.ui.Grid.fn._reorderable);
where .disable-reorder class is for disabling column
I am not sure where to put following zingchart click event handling code in the html page.
zingchart.click = function(dataStr){
var data = eval('(' + dataStr + ')');
alert("Chart Clicked - ID: " + data["id"]);
}
If anybody knows please provide the sample HTML code.
The zingchart.click function can go anywhere after the zingchart script include.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../zingchart-1.1.min.js"></script>
</head>
<body>
<div>
<div>
<div id="zingchart"></div>
</div>
<script type="text/javascript">
var jsonConfig = '{"graphset" : [{"type" : "line","series" : [{"values" : [5, 10, 15, 5, 10, 5]}] }]}';
zingchart.render({
data : jsonConfig,
width : 600,
height : 300,
container : 'zingchart'
});
zingchart.click = function(data){
alert("Chart Clicked - ID: " + data["id"]);
}
</script>
</div>
</body>
</html>