When long text documents are uploaded then my popup's width gets altered.
Is there any way to trim long text with three dots for tree node's text?
Following is my HTML code to create tree structure
<div class="col-md-12" style="height:100%;overflow:auto" ng-if="IsTree">
<oe-jstree source="AssemblyDocuments"
name="documenttree"
is-upload-file="true"
options="treeOptions"
tree-node-creator="createNode(item)"
on-item-selected="NodeSelected(item)"
on-item-created="NodeCreated(item, callback)"
on-item-renamed="NodeRenamed(item, callback)"
on-item-removed="NodeRemoved(item, callback)"
on-item-archived="NodeArcive(item, callback)"
on-item-download="onItemDownload(item, callback)"
on-item-tagged="onItemTagged(item, callback)"
tag-list="TagMst"
is-read-only="isReadOnly"
id="documenttree"></oe-jstree>
</div>
How can I cut text and show three dots with a tooltip?
$scope.createNode = function (nodedata) {
if (nodedata.Name != null)
nodedata.Name = nodedata.Name.trim();
var node = {
id: nodedata.Id,
text: nodedata.Name.substr(0, 60) + (nodedata.Name.length > 60 ? "..." : ""),
state: {
opened: true
},
type: nodedata.isFile == true ? File : Folder,
icon: nodedata.isFile == true ? (nodedata.Archive == true ? 'jstree-zip' : 'jstree-file') : 'jstree-folder',
children: GetChilders(nodedata),
FileTagDetails: nodedata.FileTagDetails,
model: nodedata,
a_attr: {
title: nodedata.Name
}
};
return node;
};
By using text: nodedata.Name.substr(0, 60) + (nodedata.Name.length > 60 ? "..." : ""), you can achieve 3 dots
Related
First off, let me admit to being a React newbie...
I want to set the value displayed and selected in this component after the first render (eg from a button)
Here's my test code (with imports etc removed)
$(function () {
const data = [
{
DataID: 1,
DataType: 'Data1'
},
{
DataID: 2,
DataType: 'Data2'
},
{
DataID: 3,
DataType: 'Data3'
},
{
DataID: 4,
DataType: 'Data4'
}
]
ReactDOM.render(
<SelectionsExample
options={data}
preset={[data[1]]}
/>,
document.getElementById('divExampleSelector')
)
});
function SelectionsExample(props) {
const [options, setOptions] = useState(props.options);
const [preset, setPreset] = useState(props.preset);
function handleSelect(s) {
console.log((s ? s.DataType : 'Nothing') + ' selected');
}
function handlePreset() {
let s = options[2];
console.log('Preset', s);
setPreset([s]);
}
return (
<>
<Typeahead
id="selections-example"
options={options}
defaultSelected={preset ?? []}
onChange={(s) => handleSelect(s[0])}
labelKey="DataType"
clearButton
placeholder="Choose a value..."
/>
<Button
onClick={handlePreset}
variant="outline-secondary">Preset </Button>
</>
)
}
On first render, all works fine with as expected the second item in my options list shown.
But when I click the 'Preset' button, handlePreset runs but nothing changes in the control. I would have expected the selection to change to value of options[2].
If I change the Typeahead prop 'defaultSelected' to 'selected', then the only item I can select is the one I pass in in the 'preset' prop.
What am I doing wrong?
Using defaultSelected makes the typeahead uncontrolled, and will only display a preset selection when the component mounts. Since you want to be able to change the preset later, you should use selected to make the typeahead controlled:
function SelectionsExample(props) {
const [selected, setSelected] = useState(props.preset);
function handleSelect(s) {
console.log((s[0] ? s[0].DataType : 'Nothing') + ' selected');
setSelected(s);
}
function handlePreset() {
let s = props.options[2];
console.log('Preset', s);
setSelected([s]);
}
return (
<>
<Typeahead
clearButton
id="selections-example"
labelKey="DataType"
onChange={handleSelect}
options={props.options}
placeholder="Choose a value..."
selected={selected}
/>
<button onClick={handlePreset}>
Preset
</button>
</>
);
}
Working sandbox: https://codesandbox.io/s/heuristic-haze-3vugt
Requirement: I have a fragment.xml file which I am extending. The form element is currently being processed with a formatter.js where I am validating some values based on some condition:
In Fragment, the formatter function is getting called correctly
<Text text="{
parts: [
{path: 'ZName1'},
{path: 'ZStatus1'}
],
formatter: '.Formatter.delivery'
}" >
Formatter:
delivery: function(iName, iStatus) {
var sResult = "";
if(iStatus === "A" ) {
sResult = iName ;
} else if(iStatus === "P") {
sResult = iName ;
} else {
sResult = iName ;
}
return sResult ;
}
In the output, I should get sResult highlighted either in green, yellow, or red based on the condition.
Binding on text will not work for highlighting the text. refer the example for alternative solution.
<Text id="id" text="{ZName1}" class="{parts: [{path: 'ZName1'},{path: 'ZStatus1'} ],
formatter : '.Formatter.delivery'}">
In Format.js file:
delivery: function(iName, iStatus) {
var idText = this.byId("id");
if(iStatus === "A" ) {
idText.removeStyleClass("classForYellowColor");
idText.removeStyleClass("classForRedColor");
return "classForGreenColor";
} else if(iStatus === "P") {
idText.removeStyleClass("classForGreenColor");
idText.removeStyleClass("classForRedColor");
return "classForYellowColor";
} else {
idText.removeStyleClass("classForGreenColor");
idText.removeStyleClass("classForYellowColor");
return "classForRedColor";
}
}
Instead of plain sap.m.Text, take advantage of sap.m.ObjectStatus which works exactly like Text but supports semantic colors (via state) out-of-the-box.
Run the following snippet to see the results:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/m/List",
"sap/m/CustomListItem",
"sap/m/ObjectStatus", // instead of Text
"sap/ui/core/ValueState",
"sap/ui/model/json/JSONModel",
], (List, Item, ObjectStatus, ValueState, JSONModel) => new List().bindItems({
path: "/myData",
template: new Item().addContent(new ObjectStatus({
text: "{ZName1}",
state: {
path: "ZStatus1",
formatter: status =>
status === "A" ? ValueState.Success : // Green
status === "P" ? ValueState.Warning : // Yellow
status === "Z" ? ValueState.Error : // Red
ValueState.None
},
}).addStyleClass("sapUiSmallMargin")),
}).setModel(new JSONModel({
myData: [
{
ZName1: "Success",
ZStatus1: "A"
},
{
ZName1: "Warning",
ZStatus1: "P"
},
{
ZName1: "Error",
ZStatus1: "Z"
},
{
ZName1: "None",
ZStatus1: ""
},
],
})).placeAt("content")));
<script>
window["sap-ui-config"] = {
libs: "sap.ui.core, sap.m",
preload: "async",
theme: "sap_belize",
compatVersion: "edge",
"xx-waitForTheme": true,
"xx-async": true
}
</script>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
We can see green, yellow, and red depending on the condition.
In Fragment file:
<Text text="{parts: [{path: 'ZName1'},{path: 'ZStatus1'}],
formatter : '.Formatter.delivery'}" >
In CSS file:
.greenTxtHlight {
color: green;
}
.yellowTxtHlight {
color: yellow;
}
.redTxtHlight {
color: red;
}
In Formatter file:
delivery: function(sName, sStatus) {
switch(sStatus){
case "A":
this.addStyleClass("greenTxtHlight");
this.removeStyleClass("yellowTxtHlight");
this.removeStyleClass("redTxtHlight");
break;
case "P":
this.removeStyleClass("greenTxtHlight");
this.addStyleClass("yellowTxtHlight");
this.removeStyleClass("redTxtHlight");
break;
case "G"://Update this
this.removeStyleClass("greenTxtHlight");
this.removeStyleClass("yellowTxtHlight");
this.addStyleClass("redTxtHlight");
break;
}
return sName;
}
I have the following code and I'm trying to include a Text inside an HTML Element.
new sap.ui.core.HTML({
content:
'<div class="left">' +
new sap.m.Text("mengeLabel", {text: "Menge: "}).addStyleClass('list-label') +
new sap.m.Text("menge",{ text: "{Quantity}" }) +
'</div>'
}),
The code is inside a CustomListItem's content attribute. When it gets rendered it looks like this:
<div class="left" data-sap-ui-preserve="__html0-__clone0" id="__html0-__clone0">
Element sap.m.Text#mengeLabelElement sap.m.Text#menge
</div>
My goal is to have a surrounding div with a class for better CSS positioning.
How can this be done with UI5?
content aggregation of the HTML control allows only string and here new sap.m.Text are casting to the string. You can create your own wrapper control.
sap.ui.core.Control.extend("my.Wrapper", {
metadata : {
defaultAggregation : "content",
aggregations : {
content : {type : "sap.ui.core.Control", multiple : true }
}
},
renderer: {
render : function(oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("myWrapper");
oRm.writeClasses();
oRm.write(">");
oControl.getContent().forEach(function(oChild) {
oRm.renderControl(oChild);
});
oRm.write("</div>");
}
}
});
And you can use it like this
new my.Wrapper({
content: [
new sap.m.Text("mengeLabel", {text: "Menge: "}).addStyleClass('list-label'),
new sap.m.Text("menge",{ text: "{Quantity}" })
]
})
I'm trying out KendoUI Web and I'm trying to get the multiselect, numeric, and fileupload widgets to display and function correctly in my custom popup editor. When clicking the Edit button the popup does not display multiselect, numeric, and fileupload correct and I cannot load the default value from the grid row into the multiselect widget (for example '1,2' in the sample data. When i click the Save button within the popup editor all the fields should populate into my text box (which seem to be working ok). I would like to stick to the HTML method of initializing widgets rather than using MVC.
If someone could please help with my issues.
I am unsure how to initialize the widgets (multiselect, numeric, and fileupload) because if i put the javascript initialization in the template, I get errors.
I cannot load default values from the grid row into my multiselect dropdown.
Does anyone know what needs to be done to get this to work correctly?
Here is my current code at http://jsfiddle.net/Xwtq3/
<h2>")
Users</h2>")
")
<div id=""example"" class=""k-content"">")
")
<input name=""txtAdvancedSearchString"" type=""text"" onchange=""javascript:setTimeout('__doPostBack")
")
(\'txtAdvancedSearchString\',\'\')', 0)"" onkeypress=""if (WebForm_TextBoxKeyHandler(event) == false) return false;"" ")
")
id=""txtAdvancedSearchString"" />")
<script>")
var mydata = [{")
guid: ""D007DD39-540B-4bc3-9900-39A8B931EB19"",")
fullname: ""Jeff"",")
email: ""jeffkent#testemail.com"",")
groups: ""1,2"",")
administrator: ""1"",")
url: ""jeff.jpg""")
}, {")
guid: ""E8CFD49A-3B85-4093-AE52-F55C73E12A7B"",")
fullname: ""Frank"",")
email: ""testemail#email.com"",")
groups: ""3,4"",")
administrator: ""1"",")
url: ""todd.jpg""")
}];")
</script>")
<div id=""grid""></div>")
<div id=""details""></div>")
<script>")
var wnd,")
detailsTemplate;")
")
$(document).ready(function() {")
")
")
var grid = $(""#grid"").kendoGrid({")
dataSource: {")
pageSize: 20,")
data: mydata")
},")
pageable: true,")
groupable: true,")
selectable: ""row"",")
reorderable: true,")
sortable: true,")
filterable: true,")
columnMenu: true,")
height: 430,")
columns: [{")
field: ""fullname"",")
title: ""Full Name""")
}, {")
field: ""email"",")
title: ""Email""")
}, {")
field: ""groups"",")
title: ""Groups""")
}, {")
field: ""administrator"",")
title: ""User Role""")
}, {")
field: ""url"",")
title: ""File URL""")
}, {")
command: {")
text: ""Edit"",")
click: showDetails")
},")
title: "" "",")
width: ""140px""")
}]")
}).data(""kendoGrid"");")
")
wnd = $(""#details"")")
.kendoWindow({")
title: ""Download"",")
modal: true,")
visible: false,")
resizable: false,")
width: 300")
}).data(""kendoWindow"");")
")
detailsTemplate = kendo.template($(""#template"").html());")
});")
")
function showDetails(e) {")
e.preventDefault();")
")
")
var dataItem = this.dataItem($(e.currentTarget).closest(""tr""));")
wnd.content(detailsTemplate(dataItem));")
wnd.center().open();")
}")
</script>")
<script type=""text/x-kendo-template"" id=""template"">")
<div id = ""details-container"" > <h2 > View / Edit User </h2>")
<table cellspacing=""6"" cellpadding=""3"">")
<tr>")
<td><label ID=""lblID"" for=""txtID"">ID:</label > <br /> <input type = ""text""")
id = ""txtID""")
class = ""k-textbox""")
placeholder = """"")
value = ""#= guid #"" > </input></td > </tr>")
<td><label ID=""lblFirstName"" for=""txtFirstName"">First Name:</label > <br /> <input type = ""text""")
id = ""txtFirstName""")
class = ""k-textbox""")
placeholder = """"")
value = ""#= fullname #"" > </input></td > </tr>")
<tr>")
<td>")
<!--MultiSelect Dropdown-->")
")
<select name=""groups"" id=""groups"" class=""k-item"" multiple=""multiple"" data-role=""dropdownlist"">")
<option value=""1"">HR</option > < option value = ""2"" > 1099 < /option>")
<option value=""3"">Insurance Form</option > < option value = ""4"" > Claim Form < /option>")
<option value=""4"">Timeoff Requests</option >")
")
</select>")
")
<!--MultiSelect Dropdown end--></td >")
")
</tr>")
<tr><td> ")
<input id=""txtMaxAdmins"" type=""number"" value=""#=administrator#"" min=""0"" max=""100"" />")
")
")
")
</td></tr >")
")
")
<tr> <td> <label")
for = ""upload"" > Document Types: </label>")
Choose a transparent .png for best results<br /> <input id = ""upload""")
type = ""file"" value=""#=url#"" />")
")
")
</td></tr> <tr > <td colspan = ""2"" > <button ID = ""btnSave""")
class = ""k-button""")
onclick = ""CallServer()"" > Save </button></td> </tr>")
</table> </div>")
</script>")
<script>")
function CallServer() {")
var userinput = ($(""#txtID"").val()) + '|' + ($(""#txtFirstName"").val()) + '|' + ($(""#groups"").val());")
document.getElementById(""txtAdvancedSearchString"").value = userinput;")
")
//alert(userinput);")
__doPostBack('__Page', 'e');")
}")
</script>")
</div>")
You need to tell KendoUI to use the html elements as kendo controls.
I have the response json string returned from the first FS(filteringSelect) with the contents of the second , but i can't make it load it. I've tried with store.clearOnClose , but it doesn't work , my javascript is valid. How do you do this ?
Here is the code from my form with the 2 filteringSelects:
$category=new Zend_Dojo_Form_Element_FilteringSelect("category");
$category->setLabel("Category");
$category->setAttrib("id","category")
->setAttrib("onChange","
var cat=dojo.query('#category ')[0].value;
dojo.xhrPost({
url: 'getsubcategories',
handleAs: 'text',
content: { category:cat } ,
load: function(data, ioArgs) {
var store=subCatStore.store;
store.data=data;
store.close()
},
error: function(data,ioArgs) {
if(typeof data== 'error'){
console.warn('error');
console.log(ioArgs);
}
}
});
"
);
$category->setOptions(array(
"autocomplete"=>false,
"storeId"=>"category",
"storeType"=>"dojo.data.ItemFileReadStore",
"storeParams"=>array("url"=>"getcategories"),
"dijitParams"=>array("searchAttr"=>"name")
)
)
->setRequired(true);
$subCategory=new Zend_Dojo_Form_Element_FilteringSelect("subCategory");
$subCategory->setLabel("Sub Category")
->setAttrib("id","subCategory");
$subCategory->setOptions(array(
"autocomplete"=>false,
"storeId"=>"subCatStore",
"jsId"=>"subCatStore",
"storeType"=>"dojo.data.ItemFileReadStore",
"storeParams"=>array("clearOnClose"=>true,"url"=>"getsubcategories"),
"dijitParams"=>array("searchAttr"=>"name")))
->setRequired(true);
I've red on the net that this is the way to do it , get the element of the 2nd dropdown and
passed it values when 1st changes. Am i Wrong ?
Tnx for your attention.
i dont know about zf, but this is how we do in js :
new dijit.form.FilteringSelect({
id: "country",
name: "country",
store: countryStore,
required: false,
onChange: function(country) {
dijit.byId('state').query.countryId = country ;
},
searchAttr: "name"
},"country");