i am using select2 multi select dropdown, and it works perfectly but my problem is, i want to categorise the drop down list of the same. Here is my code
<script src="/static/select2.js"></script>
<input type="hidden" id="test" value=""/>
and js
$(test).select2({
data:data,
multiple: true,
width: "100%",
placeholder:"None Selected",
closeOnSelect:false,
});
This should work:
$(test).select2({
data:
[
{
text: 'GREETINGS',
children:
[
{ 'id': 1, text: 'hai' },
{ 'id': 2, text: 'hellow'},
]
},
{
text: 'QUESTIONS',
children:
[
{ 'id': 3, 'text': 'yes' },
{ 'id': 4, 'text': 'no' }
]
}
],
multiple: true,
width: "100%",
placeholder: "None Selected",
closeOnSelect: false,
});
Related
I have a react material-ui DataGrid.
One of the cells shows text data representing status, which I want to show in a graphical way - specifically bootstrap badge.
The DataGrid code is:
const ProcessesColumns: ColDef[] = [
{ field: 'id', headerName: 'ID' },
{ field: 'name', headerName: 'Name', width: 300 },
{ field: 'status', headerName: 'Status', width: 130 },
];
const processes = [
{
id: 1,
name: 'aaa',
status: 'Sucess',
},
{
id: 2,
name: 'bbb',
status: 'Fail',
},
{
id: 3,
name: 'ccc',
status: 'Sucess',
},
{
id: 4,
name: 'ddd',
status: 'Success',
},
{
id: 5,
name: 'eee',
status: 'Sucess',
},
{
id: 6,
name: 'fff',
status: 'Fail',
},
]
<DataGrid rows={processes} columns={ProcessesColumns} pageSize={10} />
I think you should check this
You can add a renderCell attribute on your status column definition
I think you can do it with renderCell. Here's an example of something similar, and I hope it helps.
I have a column which cells I want to format to have an icon and a value, and I created that in a format function:
const priorityFormater = (cell) => {
return (
<span>
<GrStatusGoodSmall className={taskPriorityColor(cell)} />
<span className="priority-span">{cell}</span>
</span>
);
};
Column definition:
{
field: "priority",
headerName: "Priority",
flex: 0,
minWidth: 140,
renderCell: (params) => {
return priorityFormater(params.value);
},
},
Result:
I am trying to plot a line chart and a column chart on separate y-axes in highstock using react. However, the line chart is hidden behind the column chart. Could I have the line chart on the column chart as shown in their example dual chart - https://www.highcharts.com/demo/combo-dual-axes?
I've added a link to my chart to clarify my problem.
const chart_options= {
chart: {
zoomType: 'x'
},
title: {
text: ""
},
tooltip:{
split: false,
shared:true,
valueDecimals: 2
},
legend: {
enabled: true,
layout: 'horizontal'
},
series: [
{
name: 'ABC',
type: 'line',
data: this.props.data1,
yAxis:1,
color:'grey',
lineWidth: 3
},
{
name: 'DEF',
type: 'line',
data: this.props.data2,
yAxis:0,
},
{
name: 'GHI',
type: 'column',
data: this.props.data3,
yAxis:0,
color: '#ffd699',
dataGrouping:{
enabled: false
},
pointWidth: 1
},
],
xAxis: {
type: 'datetime',
gridLineWidth:1,
title: {
text: 'Time'
},
tickPixelInterval: 5
},
yAxis: [
{
labels: {
format: '{value:.0f}%',
},
opposite: false,
tickPixelInterval: 20
},
{
title: {
labels: {
format: '{value:.2f}',
},
tickPixelInterval: 20
},
],
}
Could someone please help?
Thanks.
You can set zIndex propert for the series:
series: [{
zIndex: 1,
...
}, {
zIndex: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/x5aefpLv/
API Reference: https://api.highcharts.com/highstock/series.column.zIndex
I have a requirement to toggle between the view in kendo UI scheduler, my view will be week but on checkbox click i want to change week view type between week and workWeek; how to do this?
Here is html
<label><input type="checkbox" ng-model="hideWeekend" ng-change="hideWeekends(hideWeekend);" value="true" />Hide Weekend</label>
<div id="team-schedule">
<div kendo-tooltip k-content="tooltipContent" k-filter="'.k-event'" class="k-group">
<div id="target"></div>
<div kendo-scheduler="weeklyScheduler" k-options="weeklySchedulerOptions" id="scheduler"></div>
</div>
</div>
JS code
$scope.schedulerDS = new kendo.data.SchedulerDataSource({
batch: true,
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
});
var weekOrWorkWeek = 'workWeek';
$scope.loadWeeklySchedule = function (value) {
$scope.weeklySchedulerOptions = {
autoBind: false,
date: new Date(),
height: 600,
views: [{ type: value, selected: true, majorTick: 15, footer: false, allDaySlot: false }],
timezone: "Etc/UTC",
dataSource: $scope.schedulerDS,
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
};
$scope.hideWeekends = function (value) {
if (value == true) {
weekOrWorkWeek = 'workWeek';
$scope.loadWeeklySchedule(weekOrWorkWeek);
$scope.weeklySchedulerOptions.dataSource.read();
} else {
weekOrWorkWeek = 'week';
$scope.loadWeeklySchedule(weekOrWorkWeek);
$scope.weeklySchedulerOptions.dataSource.read();
}
};
$scope.loadWeeklySchedule(weekOrWorkWeek);
You can enable this view by adding the view type "workWeek" to the views array of the scheduler options object from the get go.
This will also show a view selection on the scheduler top toolbar but you can remove it by adding a CSS rule:
.k-scheduler-views {
display: none;
}
Switching between views can be done using the scheduler's view method:
$("#scheduler").data("kendoScheduler").view("ViewName")
Here's a Plunker with a demo.
Here is what I want to achieve - display state code when selecting a state full name. https://dojotoolkit.org/documentation/tutorials/1.10/selects_using_stores/demos/ProgFilteringSelect.html
But why I couldn't make it work? Here are the dojo codes and the state.json file.
dojo.xhrGet({url: datapath,
handleAs: dataformat,
load: function (result) {
require([
'dojo/store/Memory',
'dijit/form/ComboBox',
'dojo/domReady!'
], function (Memory, ComboBox) {
stateStore = new Memory({
idProperty: "code",
data: result.states.sort(function(a,b) {
var x = a.name.toLowerCase();
var y = b.name.toLowerCase();
return x < y ? -1 : x > y ? 1 : 0;
})
});
var cboState = new ComboBox({
id: 'usastate',
name: 'usastate',
style:{width: '100%', height: '35px', fontSize: '30px'},
placeholder: 'Select a State',
store: stateStore,
searchAttr: 'name',
autocomplete: true,
onChange: function(value) {
dom.byId('statecode').innerHTML = value;
}
});
cboState.placeAt(dom.byId('state')).startup();
});
}
});
"states": [
{
"name": "Alabama",
"abbreviation": "AL",
"code": "01"
},
{
"name": "Alaska",
"abbreviation": "AK",
"code": "02"
},
{
"name": "Arizona",
"abbreviation": "AZ",
"code": "03"
},
{
"name": "Arkansas",
"abbreviation": "AR",
"code": "04"
}
FilteringSelect worked. Not sure why Combo Box doesn't support it.
var cboState = new FilteringSelect({
id: 'usastate',
name: 'usastate',
style:{width: '100%', height: '35px', fontSize: '30px'},
placeholder: 'Select a State',
store: stateStore,
searchAttr: 'name',
autocomplete: true,
onChange: function(value) {
dom.byId("statecode").innerHTML = value;
dom.byId("statename").innerHTML = this.get("displayedValue");
}
});
You are setting the value of the HTML input element which should not be done here. Set the displayedValue attribute of the ComboBox in your onChange function.
var cboState = new ComboBox({
id: 'usastate',
name: 'usastate',
style:{width: '100%', height: '35px', fontSize: '30px'},
placeholder: 'Select a State',
store: stateStore,
searchAttr: 'name',
autocomplete: true,
onChange: function(value) {
this.set('displayedValue', value);
}
});
I am having a hierarchical nested Kendo grid. The parent grid is displaying a list of currency and each currency has a list of allocation. Both grid have a inline editor. Currency has a property 'currencyName' and allocation has a property 'allocationName'. Both these property need to have a kendo dropdownlist editor.
In my solution, I am able to get the drop down for the currencyName, but for allocationName I am getting a textbox. Below is the code:
HTML :
<div kendo-grid="ctrl.currencyKendoGrid" style="margin-top: 2em" k-options="ctrl.currencyGridOptions"></div>
Currency Grid DataSource:
This is being assigned by another parent funds grid. The funds grid has an editable pop-up window, and assigns the currencyKendoGrid it's data source on the edit event as follows.
edit: function (e) {
if (e.model.currencies)
ctrl.currencyKendoGrid.dataSource.data(e.model.currencies);
}
Currency DropDown DataSource:
ctrl.currencyDataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: function (e) {
DataSvc.getCurrencyData().then(function (response) {
e.success(response.data);
});
}
}
});
Allocation DropDown DataSource:
ctrl.allocationsList = [{ allocName: "Cash", allocId: 1 }, { allocName: "Money Market", allocId: 2 }, { allocName: "TBill", allocId: 3 }, { allocName: "FX-Forward", allocId: 4 }];
ctrl.allocationDataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: function (e) {
e.success(ctrl.allocationsList);
}
}
});
Currency Grid Options:
ctrl.currencyGridOptions = {
dataSource: {
schema: {
model: {
fields: {
currency: { type: "string", editable: true }
}
}
}
},
editable: "inline",
toolbar: [{
name: 'create',
text: 'Add Currency',
}],
columns: [
{
field: "currencyName", title: "Currency",
editor: function (container, options) {
$('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.currencyDataSource" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
},
{ command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: " ", width: "250px" }
],
detailInit: detailInitCurrency,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
}
Allocation Grid Options:
function detailInitCurrency(e) {
if (e.data.allocations)
ctrl.selectedCurrencyAllocations = e.data.allocations;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (e) {
e.success(ctrl.selectedCurrencyAllocations);
},
},
filter: { field: "currencyId", operator: "eq", value: e.data.currencyId },
schema: {
model: {
id: "allocationId",
fields: {
allocationId: { type: "number", editable: false },
allocationName: { type: "string", editable: true },
}
}
}
},
editable: "inline",
toolbar: [{
name: 'create',
text: 'Add Allocation',
}],
columns: [
{
field: "allocationName", title: "Allocation",
editor: function (container, options) {
$('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.allocationDataSource" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
},
{ command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: "", width: "250px" }
]
});
}
Output :
Please feel free to point me out on any code that I may have missed since I have removed a lot of unnecessary code for keeping the problem simple.