I am trying to render multiple kendo ui pie charts contained within a foreach loop. When rendered, all the tracking items (in Model.TrackingItems) are displayed correctly(which are between the span), however, only the first chart is rendered. There are three items in the Tracking Items in the list, three pie charts should be rendered. Any ideas what could be the problem?
Thanks in advance.
#foreach (var item in Model.TrackingItems)
{
#* THIS PART IS RENDERED FOR EACH ITEM *#
<span>Not Done - </span>#Html.Encode(item.NotDone)<br />
<span>Not Required - </span>#Html.Encode(item.NotRequired)<br />
<span>Completed - </span>#Html.Encode(item.Completed)<br />
<span>Cancelled - </span>#Html.Encode(item.Cancelled)<br />
#* ONLY THE FIRST PIE CHART IS RENDERED *#
<div id="#Html.Encode(item.Id)" class="chart-wrapper">
#(Html.Kendo().Chart()
.Name("chart")
.Title(title => title
.Text("Tracking Info")
.Position(ChartTitlePosition.Top))
.Legend(legend => legend
.Visible(false)
)
.Series(series =>
{
series.Pie(new dynamic[] {
new {category="Not Done",value=#item.NotDone,color="#9de219"},
new {category="Not Required",value=#item.NotRequired,color="#90cc38"},
new {category="Completed",value=#item.Completed,color="#068c35"},
new {category="Cancelled",value=#item.Cancelled,color="#006634"},
})
.Labels(labels => labels
.Template("#= category #: \n #= value#%")
.Background("transparent")
.Visible(true)
)
.StartAngle(150);
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
))
</div>
}
It turned out the .Name attribute needs to be unique not the div id.
Changed
.Name("chart")
To
.Name(#Html.Encode(item.Id))
Related
I am using in my component but by default, it's displaying a group of buttons in one row. I want to display the grouped buttons in one column. How is this possible?
Thanks.
.columnCss {
display: contents !important;
}
<lightning-button-group class="columnCss">
<lightning-button label="Refresh"></lightning-button><br/>
<lightning-button label="Edit"></lightning-button><br/>
<lightning-button label="Save"></lightning-button>
</lightning-button-group>
I'm attempting to add search functionality to a data grid component. In order to achieve this, I'm adding an input element to the table using the components.header prop as follows (I've omitted irrelevant code):
const Table = () => {
const filterRows = (rows) => {
return rows;
};
const [searchTerm, setSearchTerm] = useState("");
const Header = () => (
<input
value={searchTerm}
onChange={(event) => setSearchTerm(event.target.value)}
/>
);
return (
<div style={{ height: 500 }}>
<DataGrid
rows={searchTerm ? filterRows(orders) : orders}
columns={orderColumns}
components={{
header: () => <Header />
}}
/>
</div>
);
};
The issue I'm having is that the input element loses focus each time a character is entered into the input in the header. Presumably, this is because it updates state, which triggers a re-render. This makes it impossible to share and access state of anything contained inside the Data Grid's components because it requires a React.FC argument and won't accept a ReactElement so the input is always re-rendered.
Am I missing something or is this actually not possible with Material UI's Data Grid? It seems like a pretty expected use-case to have something stateful in the header that we'd want to access like a controlled input component in order to use it as a kind of "Tool bar" as mentioned in the Material UI docs.
I've created a code sandbox to replicate the issue here: https://codesandbox.io/s/compassionate-keldysh-z995k?file=/src/App.js:246-726.
Cheers.
Suppose, I want to render 3 buttons which are mapped from Array
export const homePage = soruces => {
const array$ = xs.fromArray([1,2,3])
return {
DOM: array$.map(e => {
return <button id={e}>click</button>
})
};
};
but I only get the lastest button which has id of 3
<div id="app">
<button id="3">click</button>
</div>
how do i get all the buttons rendered like this using xstream or rxjs
<div id="app">
<button id="1">click</button>
<button id="2">click</button>
<button id="3">click</button>
</div>
That depends a bit on what you want to achieve. The code you have there basically says: "I get three pieces of data, each at some arbitrary point of time" (because fromArray basically takes the data from the array one by one and puts it into the stream.
If you now what to collect the data over time, you can add fold((buttons, newButton) => buttons.concat(newButton), []).
If however you just happen to have three poeces of data, that always should be three buttons, do not use fromArray but the normal Array.map. You can then use xs.of to emit the three buttons at once (compared to one by one in the first part)
Once i select a dropdown value from a dropdown field i want a section in another div to be loaded
ngif would help me do this, but how could i add this as a condition for the display of that section
Any dropdown selected should open that section
Later would customise it to different other sections in a div to load based on selection of the different dropdowns values accordingly
This can be solve by using selectionchange event emmiter function, whenever you select a value from the dropdown you can call an eventemmiter function. See the code below:
Html Code:
<div>
<mat-select placeholder="Options"
(selectionChange)="onSelecetionChange($event.value)">
<mat-option value="individual ">Individual </mat-option>
<mat-option value="business">Business</mat-option>
</mat-select>
</div>
<div *ngIf="individual">
Individual Div
</div>
<div *ngIf="business">
Business Div
</div>
My ts code:
individual: boolean;
business: boolean;
onSelecetionChange( value: string ) {
if( value === 'individual') {
// You can add some service call or customize your data from here
this.individual = true;
}
if( value === 'business') {
// You can add some service call or customize your data from here
this.business = true;
}
}
I'm trying to create a dual date object in Angular2 and I have no idea how it can be accomplished.
What I mean by a dual date object is basically creating a single instance of a date picker using Kendo UI (screenshot of a date picker from Kendo UI). Once it's clicked, two instances of the date object appears. The first is for 'Start date' and the second is for 'End Date'. The date object uses Kendo UI.
Basically it's for users to select a date range. I would really appreciate any help on this. Thank you.
The Kendo UI DatePicker can work with one date only. For selecting a date range, use two widget instances.
http://demos.telerik.com/kendo-ui/datepicker/rangeselection
It is theoretically possible to use a Kendo UI Popup with two Calendar instances inside, and store the two date values somewhere, according to your preferences.
<style>
#popup > div {display: inline-block; }
#textbox { width: 300px; }
</style>
<p>Focus the textbox:</p>
<input id="textbox" class="k-textbox" />
<div id="popup">
<div id="calendar1"></div>
<div id="calendar2"></div>
</div>
<script>
var textbox = $("#textbox");
$("#popup").kendoPopup({
anchor: textbox
});
$("#calendar1").kendoCalendar({
change: updateTextBox
});
$("#calendar2").kendoCalendar({
change: updateTextBox
});
textbox.focus(function(){
$("#popup").data("kendoPopup").open();
});
function updateTextBox() {
textbox.val("use the Calendars' value method here");
}
</script>