I have a kendo Treeview bound to a remote hierarchical datasource(JSON file).
I want to add sprites next to each one of the nodes according to what the node is.If the node doesn't have children then I want it to have the "file" sprite,if the node has children I want it to have the "folder" sprite.(The sprites are provided from kendo,the ones that are on the demos)
I'm a bit confused with the way templates work,can I alter the sprite for each of the nodes dynamically with the template?Any good example and a bit of explanation to get me going would help a lot.
Thx
In the following code what I do is define a template that checks if the node being rendered has items (subnodes) or not. If it has, it displays an icon from default sprite file (k-i-plus) otherwise it shows a different icon (k-i-refresh).
function loadMore() {
var uuid = $(this).data("uid");
var node = tree.findByUid(uuid);
tree.insertBefore(content, node);
tree.remove(node);
tree.expand(".k-item");
addLoadMore(".k-i-refresh");
}
function addLoadMore(clss) {
$(clss, tree.element).closest(".k-item").on("click", loadMore);
}
var content = [
{
text :"node1",
items:[
{ text:"node1.1" },
{ text:"node1.2" },
{ text :"node1.3",
items:[
{ text:"node1.3.1" },
{ text:"node1.3.2" },
{ text:"node1.3.3" },
{ text:"node1.3.4" }
] },
{ text:"node1.4" }
]
}
];
var tree = $("#tree").kendoTreeView({
dataSource:content,
template :"<span class='k-icon #= item.items ? 'k-i-plus' : 'k-i-refresh' #'></span>#= item.text #"
}).data("kendoTreeView");
tree.expand(".k-item");
addLoadMore(".k-i-refresh");
What you would need to do if replace k-i-plus by the CSS class name that defines the folder and change k-i-refresh by the CSS class name for the file.
If you need information on writing template there is a pretty good documentation in here.
I know I am 3+ years late for this. But in case anyone run into this same question. Here is how I achieved it:
schema: {
model: {
children: "folder",
hasChildren: function (node) {
var hasChildren = (node.folder && node.folder.length > 0);
if (hasChildren === true) {
node.spriteCssClass = "folder";
} else {
node.spriteCssClass = "html";
}
return hasChildren;
}
}
}
Related
I'm using react-native-render-html library to display data from Django Rest Framework stored in RichTextUploadingField from django-ckeditor. As basic styling is working properly I have a problem with the <ul> tag - text is not centered with circle/square/number as shown in the image. I tried using renderersProps like:
<RenderHTML renderersProps={{ ul: { markerBoxStyle:{ paddingRight: 3, top: 5 }, markerTextStyle: { color: "red" } } }} />
But it works for specific text size. If I change the text size in style in Django admin, the element and text aren't centered again. Is there any option on how to fix it or what causes the problem?
You could add a custom CSS class to unordered list items only. Then apply your styles to that CSS class.
// this function goes through every list item in <ul> only and adds your custom class ('ul-li' in my case)
const onElement = (el) => {
const { children, name } = el;
if (name === 'ul' && children && children.length) {
children.forEach(listItem => listItem.attribs = {class: 'ul-li'})
}
}
// define your styles for your custom class
const classesStyles = {
"ul-li": {
lineHeight: '21px', // for me adjusting lineHeight did the job
}
}
// in your JSX
<RenderHtml
source={source}
contentWidth={width}
tagsStyles={tagsStyles}
... // other props you may have
domVisitors={{onElement}} // first alter your html
classesStyles={classesStyles} // then apply styles
/>
Sources:
classesstyles
onElement
How do I prevent the next text block to inherit the same styles as the first one? If I add an heading and then press enter I would like it to be a paragraph on the next line, and not another heading.
You can use onKeyDown to detect when you press Enter, use Transforms or Editor API to insert new node with desired styling.
Refer:
https://docs.slatejs.org/api/transforms#transforms.insertnodes-editor-editor-nodes-node-or-node-options
https://docs.slatejs.org/api/nodes/editor#editor.insertnode-editor-editor-node-node-greater-than-void
You can have a custom plugin like this for the editor
const { insertBreak } = editor
editor.insertBreak = () => {
const { selection } = editor
if (selection) {
const [title] = Editor.nodes(editor, {
match: n =>
!Editor.isEditor(n) &&
Element.isElement(n) &&
(n.type === 'title')
})
if(title){
Transforms.insertNodes(editor, {
children: [{text: ""}],
type: 'paragraph'
})
return
}
}
insertBreak()
}
I'm trying to put a Control into an existing div but I don't really know where or how I can force the map.addControl method to show the control (it is a draw control by the way) within an already existing div on the map. I'm using the leaflet draw plugin by the way.
My html looks something like this:
<div class="tooldiv" ng-controller="ClientState">
...
</div>
tooldiv is where the control should be placed.
This is my leaflet config:
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
polyline: false,
polygon: {
title: 'Draw a sexy polygon!',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
circle: false,
rectangle: false,
marker: false
},
edit: false
});
// Add and remove DrawControl menu when layer is selected/unselected
this.toggle_layer_edit = function(edit_polygon) {
if (edit_polygon === true) {
if (draw_control_check === null) {
draw_control_check = map.addControl(drawControl);
}
} else {
if (draw_control_check !== null) {
map.removeControl(drawControl);
draw_control_check = null;
}
}
}
While searching for an answer I got the idea that it might not even be possible?
I think you should try overwriting the draw control's onAdd method.
Here's some untested pseudo code (I'm not sure if the assignment & call of the original onAdd method do work like this):
var drawControlOnAdd = drawControl.onAdd;
drawControl.onAdd = function (map) {
var $toolDiv = angular.element('.tooldiv');
var originalDiv = drawControlOnAdd(map);
$toolDiv.html(originalDiv);
return $toolDiv[0];
}
HTH
in order to get familiar with dojo I'm working on a test project which consists of the following components:
data grid (created declaratively), filled with JSON data; clicking on a line will open a dialog containing a form (works)
form (created from template), with several input fields, filled with data from the grid store (works)
FilteringSelect (part of form) (doesn't work, no content)
The FilteringSelect contains dynamic data. In order to keep data traffic low, I thought it wise to get this data when the whole page is loaded and to pass it into the template initialization function.
In fact, I don't really know how to assign the store to the FilteringSelect.
Any help would be greatly appreciated.
Here's my code. I shorten it to the what I consider relevant parts so that it's easier to understand.
Grid Part:
var data_list = fetchPaymentProposalList.fetch();
/*create a new grid*/
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout
});
// store for FilteringSelect
var beneficiaryList = FetchBeneficiaryList.fetch();
var beneficiaryListStore = new Memory({
identifier : "id",
data : beneficiaryList
});
return {
// function to create dialog with form
instantiate:
function(idAppendTo) {
/*append the new grid to the div*/
grid.placeAt(idAppendTo);
/*Call startup() to render the grid*/
grid.startup();
grid.resize();
dojo.connect(grid, "onRowClick", grid, function(evt) {
var rowItem = this.getItem(evt.rowIndex);
var itemID = rowItem.id[0];
var store = this.store;
var paymentProposalForm = new TmpPaymentProposalForm();
paymentProposalForm._init(store.getValue(rowItem, "..."), ..., beneficiaryListStore);
});
}
};
The beneficiarylist comes as something like this:
return { 12: { id : 1, name : "ABC" }};
The FilteringSelect in the template looks like this:
<input data-dojo-type="dijit/form/FilteringSelect" name="recipient" id="recipient" value="" data-dojo-props="" data-dojo-attach-point="recipientNode" />
Template Init Code looks like this:
_init: function(..., beneficiaryListStore) {
this.recipientNode.set("labelAttr", "name");
this.recipientNode.set("searchAttr", "name");
// here should come the store assignment, I guess???
var dia = new Dialog({
content: this,
title: "ER" + incoming_invoice,
style: "width: 600px; height: 400px;"
});
dia.connect(dia, "hide", function(e){
dijit.byId(dia.attr("id")).destroyRecursive();
});
dia.show();
}
For anyone who's interested, here's my solution:
var beneficiaryList = FetchBeneficiaryList.fetch();
var beneficiaryData = {
identifier : "id",
items : []
};
for(var key in beneficiaryList)
{
if(beneficiaryList.hasOwnProperty(key))
{
beneficiaryData.items.push(lang.mixin({ id: key }, beneficiaryList[key]));
}
}
var beneficiaryListStore = new Memory({
identifier : "id",
data : beneficiaryData
});
That did the trick
I want to refresh a dojo grid in my web page. I tried .refresh which is given in dojotoolkit.org without success. is there any other convenient way to do refreshing? Thanks in advance.
Maybe this helps. This is the way i refresh my Grid:
if(!registry.byId("GraphGrid")){
var grid = new EnhancedGrid({
id: 'GraphGrid',
store: GraphicStore,
query: { ident: "*" },
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {
headerSelector:true,
width:"40px",
styles:"text-align: center;"
}}
},"GridGraphicInMap");
/*Call startup() to render the grid*/
grid.startup();
dojo.connect(grid, "onRowClick", grid, function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get a value out of the item
var value = this.store.getValue(item, "geom");
highlightGeometry(value,true);
// do something with the value.
});
}
else {
registry.byId("GraphGrid").setStore(GraphicStore);
}
When i first call my function the grid is generated. Evrytime i call the function later only the store is refreshed.
Regards, Miriam