I'm using a stacked bar chart in v2013.2.726 of kendo-ui. I would like to base a grand total calculation off of the enabled items in the chart's legend. So far I have not found a consistent way to tell which legend items are enabled.
I tried the following but it does not work because kendoChart._sourceSeries[i].visible does not consistently match the visual state after multiple clicks on legend items.
function onLegendItemClick(clickEventArgs) {
var total = 0;
for (var i = 0; i < self.kendoChart._sourceSeries.length; ++i) {
if ((clickEventArgs.text === self.kendoChart._sourceSeries[i].name &&
!self.kendoChart._sourceSeries[i].visible) ||
(clickEventArgs.text !== self.kendoChart._sourceSeries[i].name &&
self.kendoChart._sourceSeries[i].visible)) {
total += chartModel.Series[i].Total;
}
}
...
};
So is it even possible to determine which legend items are enabled?
So I started looking into implementing something to track the item state outside of kendo. It was only then I noticed the property kendoChart.options.series[i].visible which does indicate the state.
My apologies for answering my own question but there was not much traffic to it or the question I posted on the kendo-ui forum. So I figured I should share what I found.
I assume you can to loop through the visible (active) elements that are being displayed in the Kendo chart and then display that Total.
Instead of searching which items are active you can directly get them through the dataSource.view() method.
Related
I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'
The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.
However, when I click on the Next Category (Production Area), I need to the page to scroll back up to the first question in the Category, or maybe even just display the selected category at the top of the page.
Is this possible?
Currently, the user has to continually scroll back if when they select the next Category.
You can achieve it using scrollToElement()
var oPage = sap.ui.getCore().byId("pageId"); // you page ID
var oList = sap.ui.getCore().byId("ListId"); // element ID to which it has to scroll
if (oPage && oList) oPage.scrollToElement(oList, 1000);
Execute the above code inside the panel event expand.
you can try to use this control instead which suits your needs
https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout
After trying everything, this is what worked for me.
onExpand: function (oEvent) {
if (oEvent.getParameters().expand) {
var focusID = oEvent.getParameter("id");
var elmnt = sap.ui.getCore().byId(focusID);
elmnt.getDomRef().scrollIntoView(true);
I have j-Query data-table with many records and I have builtin search-box. What I am trying is to sum all values in all the tds which have class="amount". It's happening succesfully. Now, the problem is search box. I want to sum the values of tds with class name amount which are only visible. I tried many ways but nothing worked Following is my code:
var salaryTable = $('#tblSalary').DataTable();
salaryTable.on('search', function () {
var sum = 0;
$(".amount").each(function() {
var value = $(this).text();
if(!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
alert(sum);
});
This logic is not working as expected. How can I solve this or What am I doing wrong? Is there any better approach?
Update: The problem is when I search something it gives me total of visible and invisible records. When I clear the search box with backspace, it gives me total of all records where were visible before.
If you only want visible elements with class amount you could use the jQuery :visible selector
$(".amount:visible").each(...)
jQuery docs https://api.jquery.com/visible-selector/
I am using a dropDownList to show some values in order to filter results on a grid.
I have use the 'change' event to see when the grid must be updated
$('#view-mode-selector').kendoDropDownList({
change: onMChange
});
in the method onMChange I am trying to show the progress bar with
kendo.ui.progress($("#grid), true);
and at the end of the method when all is done I have
kendo.ui.progress($("#grid), false);
But the data loads and I do not see the progress bar.
If I remove the last statement (the 'false' one) I can see the progress bar, but it never disappears.
If I debug, It appears and disappears when the data is ready.
It is not an issue of the data loading too fast, sometimes the data takes 5 seconds to be ready.
The data is already in the browser, I am just showing or hiding columns.
Kendo version v2016.2.714
Thanks
EDIT
on onMChange I have some ifs where I populate an array (columnsToShow) with the name of the columns I want to show (everything else will be hidden) then I call a function with this code:
showHideColumn: function(columnsToShow) {
var grid = $(this.gridId).data("kendoGrid");
var show = false;
for (var i = 0; i < grid.columns.length; i++) {
show = false;
if (columnsToShow.length > 0) {
for (var j = 0; j < columnsToShow.length; j++) {
if (columnsToShow[j] == grid.columns[i].field) {
grid.showColumn(i);
columnsToShow.splice(j, 1);
show = true;
break;
}
}
}
if (!show) {
grid.hideColumn(i);
}
}
}
That code seems to be very inefficient at hiding/showing columns, all activity stops for few seconds when I want to show all columns (after having hidden some), I have around 30 columns and 30 rows.
Your question is a little misleading. Is the #grid element you are having difficulty displaying the loading icon for a grid control (as per the name of the element) or a drop down control (as per the title of the question)?
If grid
In order to show the loading icon I used:
kendo.ui.progress($("#grid").data("kendoGrid").element, true);
And to hide:
kendo.ui.progress($("#grid").data("kendoGrid").element, false);
If drop down
I haven't had to force display loading icons for dropdowns however there is an example here, noting the comment specifying:
The element must have a position:relative style applied
Additionally further down, it is noted that the element cannot have child elements.
I have 6 textboxes at the top of the screen that update an entire column(one textbox per column) based on any changes. I was selecting the columns based on their class (.l#). Here is the code (issues to follow):
function UpdateField() {
var ctrl = this;
var id = parseInt(ctrl.id.replace("item", ""), 10) - 1;
var bound = [".l1", ".l7", ".l8", ".l9"];
var fields = $(bound[id]);
for (var i = 0; i < fields.length; i++)
{
fields[i].innerHTML = $(ctrl).val();
}
};
which is bound to the keyup event for the text areas. Issues are:
1) initially fields.length was -1 as I didn't want to put data in the "add new
row" section at the bottom. However, when running it, I noticed the
final "real" record wasn't being populated. Also, when stepping through, I
noticed that the "new row" field was before the "last row" field.
2) when doing it this way, it is purely superficial: if I double click the field,
the real data hasn't been changed.
so in the grand scheme of things, I know that I was doing it wrong. I'm assuming it involves updating the data and then forcing a render, but I'm not certain.
Figured out how to do it. Modified the original code this way:
function UpdateField() {
var ctrl = this;
var id = parseInt(ctrl.id.replace("item", ""), 10) - 1;
var bound = ['title1', 'title2', 'title3', 'title4'];
var field = bound[id];
for (var i = 0; i < dataView.getLength(); i++)
{
var item = dataView.getItem(i);
item[field] = $(ctrl).val();
dataView.updateItem(i, item);
}
grid.invalidate();
};
I have 6 textboxes (item1-item6) that "bind" to fields in the sense that if I change data in a textbox, it updates all of the rows and any new rows added also have this data.
Parts where the two issues can be explained this way:
1) to work around that, though still it would be a presentational fix and not a real updating of the underlying data, one could force it to ignore if it had the active class attached. Extra work, and not in the "real" direction one is going for (masking the field).
2) It was pretty obvious with the original implementation (though it was all I could figure out via Chrome Dev Tools that I could modify at the time) that it was merely updating a div's content and not actually interacting with the data underneath. Would look nice, and perhaps one could just pull data from the item1-item6 boxes in place of the column if it is submitted, but if someone attempts to modify the cell, they'll be looking at the real data again.
I'm now facing the most common problem faced my many while working with listboxes. Though I found many answers the the forum, nothing seems to work for me or else i have got it wrong. .
I have created a listbox through code. Every listbox item has a stackpanel and within it two textblocks. the stackpanel has vertical orientation.The foreground of the textblocks have been set to specific colors. When an item has been selected or clicked it moves to another page and on the close of the new page it returns to the old page.
My problem is that, when a listbox item has been clicked, it does not show the selection color which is by default the phones accent color before moving to the next page. Is it because the color of the textblocks have already set while creating the listbox?
So i tried to set it the foreground of the selected item through the SelectionChanged() like this
ListBoxItem selItem = (ListBoxItem)(listboxNotes.ItemContainerGenerator.ContainerFromIndex(listboxNotes.SelectedIndex));
selItem .Foreground = (SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"];
But this does not work, and i assume its cuz there is a stackpanel inside the item.
How exactly this needs to be done? Do i need to retrieve the textblocks inside the stackpanel and set the foreground?? I have not used binding here. Visual Tree Helper???
Thanks
Alfah
In general, the selected color doesn't change on lists where you're navigating.
From my experience with android, there's no 'selector' background on WP7. If you're looking for a cool UI effect that shows some action is happening, the TiltEffect is definitely recommended, and very easy to implement.
http://www.windowsphonegeek.com/articles/Silverlight-for-WP7-Toolkit-TiltEffect-in-depth
However - if you're creating an app that doesn't have immediate navigation, it is possible that you might want a 'selected' cell color / etc. I've attached an image:
https://skydrive.live.com/redir.aspx?cid=ef08824b672fb5d8&resid=EF08824B672FB5D8!366&parid=EF08824B672FB5D8!343
If you note here, the buttons are related to the selected item on the list - I.e. the user can perform 4 different actions based on the selected item, (but they must select an item first!).
internal void SelectionChanged()
{
var item = (((ListBoxItem) _view.servers.SelectedItem).Content) as StackPanel;
if (item != null)
{
for (int i = 0; i < _view.servers.Items.Count; i++)
{
var val = (((ListBoxItem) _view.servers.Items[i]).Content) as StackPanel;
var tb = val.Children[0] as TextBlock;
var tb2 = val.Children[1] as TextBlock;
if (i == _view.servers.SelectedIndex)
{
tb.Foreground = tb2.Foreground = (SolidColorBrush) App.Current.Resources["PhoneAccentBrush"];
}
else
{
tb.Foreground = tb2.Foreground = (SolidColorBrush) //regular color here, b/c all these should no longer be selected
}
}
}
}
The ListItemContainer will have it's Foreground changed automatically. To inherit this, simply don't specify a colour (or style) on your TextBlock.