I have a kendo grid and I declare this column for it:
{
width: 30,
sortable: true,
title: 'Title',
field: "status",
template: "#if(data.status=='false'){#= window.oooo #}else{#<span />#}#"
},
As you may probably guess, I want to access a variable (that is not on the row-model), say global variable window.oooo in order to display it in the cell.
But this doesn't work (it displays the code as is).
Is there a way to achieve this?
Looks like you need to properly close off the initial if statement before inserting your window.oooo like:
template: "#if(data.status=='false'){# #=window.oooo # #}else{#<span />#}#"
Live sample: http://jsfiddle.net/rniemeyer/Z6rjw/
Related
I have a CustomScrollView with several children. One children should always be displayed but the other ones should be displayed depending on a condition:
CustomScrollView(
controller: articleState.scrollController,
slivers: [
ArticleDetailPageHeader(widget.articleShort), // <- should always be displayed
...condition
? _buildShimmerWidgets() // returns List<Widget>
: _buildArticleWidgets(context, articleState), // ยดยด
],
)
This is working. But I would like to use a AnimatedSwitcher so the UI looks a bit smoother.
I look into AnimatedSwitcher and it takes a child of the type Widget. Now that is the Problem! I have a List<Widget. Is there any workaround for this?
I hope my problem is clear, let me know if you need any more info!
Try to use a Column as the child for the AnimatedSwitcher and then pass the List<Widget> as children for the Column.
I'm new to Webix and trying to create a list or dataview where users can add and remove itens. (font files this time)
For such i defined one "add" button and one list where previously added items are displayed.
My plan was to put an label and a exclude button into each item of the list with the components Webix already provides but to my surprize the template property of data components aparentily can't be definied with ui objects itself.
There is some way to do it?
Somethink like it:
webix.ui({ id:'stage', rows:[
{ view:"button", type:"icon", icon:"plus", label:"Add Font", autowidth:true, click:AddFont },
{ view:"dataview", id:"fnt_list", data:fonts(), width:300,
type:{ width:300, height:150, template:function(fnt)
{
return webix.ui({cols:[
{view:"label", align:"left", label:fnt.fileName },
{view:"button", type:"icon", icon:"trash", label:"Exclude", align:"right", autowidth:true }
]});
}}
}]});
I know it can be made with the layout component alone but i really would like to do it with one of the data components because of the paging feature they have.
While it possible to create a separate instance of webix UI for each row, it is overkill for your task, just use HTML markup in the template. Something like next
{ view:"dataview", css:"fonts", id:"fnt_list", data:fonts, width:300,
type:{
width:300, height:150,
template:"#fileName# <i class='fa fa-trash-o'></i>"
},
working snippet - https://snippet.webix.com/dvbdt6st
If you still want to have real UI widgets inside of dataview items, check
https://docs.webix.com/desktop__data_layout.html
and
https://docs.webix.com/desktop__active_content.html
I'm having a chart build with ChartJS. I'm including datasets.label in multipleTooltipLabel template and facing an update issue. When changing a datasets.label and running chart.update() the tooltip is not updated. I created a JSFiddle demonstrating the issue.
The code I use to include datasets label in tooltip:
var options = {
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>"
};
Beside that option I followed ChartJS usage example for Line charts.
Change label and update chart:
myNewChart.datasets[0].label = 'updated label';
myNewChart.update();
Label shown in tooltip is not updated...
I had a look in ChartJS source code and figured out that showTooltip function is called with a ChartElements array which was not updated.
Update: I might cached the issue. label of dataset is set on each point element and not updated if it changes. showTooltip used this "cached" dataset label when drawing a tooltip. Perhaps this should not be a question on StackOverflow but a bug report for ChartJS.
I found a solution:
myNewChart.datasets[0].points.forEach(function(point) {
point.datasetLabel = 'updated label';
});
This might also be the way it should be done. Chart.js documentation of update method says you should set myLineChart.datasets[0].points[2].value = 50; to change the value. That's confusing cause on creation dataset expects the values in data property. points is generated by Chart.Line Class on init. Naming may be different for other chart types (eg. it's bars for a bar chart).
I'm not quite sure if myLineChart.datasets[0].label value is used somewhere or if could be unchanged.
I could solve your problem by changing the original data object (data.datasets[0].label='updated label') then running myNewChart.initialize(data).
var option = {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
//console.log(context);
label = 'new string ' + context.label + ', ' + context.dataIndex;
return label;
}
}
}
}
};
myChart.options = option;
ToolTips / Points Events are configurable with chartJS options...
Find more here: https://www.chartjs.org/docs/latest/configuration/tooltip.html
I am working in speak UI . I have list of items to display in list . But before that i have to check one column value and need to manipulate this value with a Icon to display . How can I implement this change in SpeakUI . Please help
Simple option:
If the data you receive is directly relateable to the icon you want to display:
Set your DataSource on your ListControl to a ListControl Parameters item with your ColumnField items underneath (as outlined in Sitecore doco or other blogs). In the HTMLTemplate field for your column, you can use the value as the source of an image or CSS class with background image style.
<img src="{{YourField}}" />
or
<span class="{{YourField}}"></span>
where your span class styles your icon.
More complex but customisable:
I'm not sure which datasource you are using, but I am a fan of the JsonDataSource by Anders Laub as it's very simple to use and customise (you only need to add 2 small files).
To your SPEAK renderings you add your JsonDataSource, and ListControl with Items property: {Binding JsonDataSource.Json} (and DataSource as required)
Then in the javascript for your page (defined in your PageCode rendering) you can add items to this datasource and customise as required:
jQuery.ajax({
type: "GET",
dataType: "json",
url: "/yourApiCall" + params,
cache: false,
success: function (data) {
var total = 0;
for (var i = 0; i < data.YourItems.length; i++) {
app.JsonDataSource.add({
Col1: data.YourItems[i][0],
Col2: data.YourItems[i][1],
Col3: data.YourItems[i][2]
});
}
},
Where Col1, Col2, and Col3 are the names of your columns, and YourItems is the array of items you are receiving from your ajax call.
I am having two problems with KOgrid.
1) I could not get scroll bars in the kogrid .It is very difficult to do data entry without scroll bars.
2) I also could not get kogrid to working wihout specifying hard coded height and width.In my application I can not have a fixed height and width.
Did anybody else had the same issue ?
I tried a workaround suggestion from this thread ( using jQuery fix as last line in my viewmodel).
KO Grid Display Isseues, On resize Gird shows one row. Images also included
that just increased that size of the grid but it did not display any data . However, when I resize the page data shows up.
Below are my HTML and kogrid options ( I tried with and without paging options, Ideally I do not want to use paging )
<div data-bind="koGrid: gridOptions"
style="height: 800px; background-color: none;width: 1850px;">
</div>
self.gridOptions = {
data: self.mydatarray,
footerVisible: true,
displaySelectionCheckbox: true,
afterSelectionChange: self.RowSelectionChange,
rowHeight: 50,
selectWithCheckboxOnly: true,
enableSorting: false,
multiSelect: true,
selectedItems: self.SelectedRows,
enableColumnResize: true,
showFilter: false,
canSelectRows: true,
enablePaging: true,
pagingOptions: {
currentPage: ko.observable(1),
pageSize: ko.observable(3),
pageSizes: ko.observableArray([3, 6, 9])
},
rowTemplate: errrowtmpl,
columnDefs: [
{ field: 'Customer', displayName: 'Customer', cellTemplate: Customersddedittmpl, headerCellTemplate: headercelltmpl },
...
...
{ field: 'GenNotes', displayName: 'GenNotes', cellTemplate: simpleedittmpl, headerCellTemplate: headercelltmpl }
]
}
Please let me know if you need any more information
Thanks
Kenner Dev
I found a solution to the problems I am facing.
1) I used Jquery to add scroll bar. I added code line below as last line of my data loading function. I am not sure id this breaks any other KOGrid functionality.In my application I did some basic testing and it seems to be working fine.
$("div.kgViewport").css("overflow", "scroll");
2) I still dont know how to solve this problem 100%. It still does not work unless fixed width and height are mentioned in style. In my app I used vw and vh as opposed fixed width and height to solve the problem of making it work on all screen sizes.
<div data-bind="koGrid: gridOptions"
style="height: 73vh;overflow:scroll;width: 96vw;"></div>