Marking certain appointments as not selectable in Kendo Scheduler for ASP.NET MVC - kendo-asp.net-mvc

I have the Scheduler loading multiple appointments. Some of those appointments should be read-only and the user should not be able to select them. Some of the appointments they should be able to select and edit, though. The logic for this is determined on the server and passed as a field in the payload on load.
I've attempted to hook into several client side events, such as Edit, MoveStart, and ResizeStart and cancel the edit events. This does work, however I would like the user to not even be able to select the event.
I do not see any client side events for Selecting that I can cancel.
I did attempt to iterate through the appointments on DataBound, but was unsure of how to prevent selecting at that point.

I suggest using a custom event template with and edit button and setting editable and selectable properties as false for the scheduler.
<script id="event-template" type="text/x-kendo-template">
<div>
<label>Title: #: title #<label>
# if (allowEdit) { #
<button style="margin-left:50px;" onclick="editSchedulerEvent(#:id#)">Edit</button>
# } #
</div>
<div>
Attendees:
# for (var i = 0; i < resources.length; i++) { #
#: resources[i].text #
# } #
</div>
</script>
<div id="scheduler"></div>
<script>
function editSchedulerEvent(id){
var scheduler = $("#scheduler").data("kendoScheduler");
var event = scheduler.dataSource.get(id);
scheduler.editEvent(event);
}
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
eventTemplate: $("#event-template").html(),
editable: false,
selectable: false,
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
atendees: [1,2],
allowEdit: true
},
{
id: 2,
start: new Date("2013/6/6 10:00 AM"),
end: new Date("2013/6/6 11:00 AM"),
title: "Interview",
atendees: [3,4],
allowEdit: false
}
],
resources: [
{
field: "atendees",
dataSource: [
{ value: 1, text: "Alex" },
{ value: 2, text: "Bob" },
{ value: 3, text: "John" },
{ value: 4, text: "Jane" }
],
multiple: true
}
]
});
</script>
</body>
</html>

Related

Power BI embed with React Js

This is the first time I am trying to embed a Power BI report with React.
I used the following method and it is working fine. But the issue is that my access token failed after nearly one hour. When I run the project after one hour I have to generate a new access code and add it into the following code. What is the solution for this ?
my code -->
<PowerBIEmbed
embedConfig={{
type: 'report',
id: 'xxxxx',
embedUrl: "xxxxx",
accessToken: ' xxxxxxxxx',
tokenType: models.TokenType.Aad,
settings: {
panes: {
filters: {
expanded: false,
visible: false
}
},
background: models.BackgroundType.Transparent,
}
}}
eventHandlers={
new Map([
['loaded', function () { console.log('Report loaded'); }],
['rendered', function () { console.log('Report rendered'); }],
['error', function (event) { console.log(event.detail); }]
])
}
cssClassName={"Embed-container"}
getEmbeddedComponent={(embeddedReport) => {
window.report = embeddedReport;
}}
/>
Thank you
Jeewan
You have to purchase a premium licence.
https://learn.microsoft.com/en-us/power-bi/enterprise/service-premium-features

How to get value from an array based on the user selection?

I've follow the ember-paper guide and defined the options data as below. The user is able to select any country from the options.
timeZoneOptions: Object.freeze([
{ groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
{ groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
])
Here is the code for the select option. It will display the options groupby the groupName.
{{#paper-select options=this.timeZoneOptions
selected=this.timeZone
onChange=(action (mut this.timeZone)) as |timeZon| }}
{{timeZon}}
{{/paper-select}}
I can't get the data using {{this.timeZone.groupName}}.
How can I do if i want to get the groupName based on the option user selected?
What you have there seems correct. Maybe the error lies in the mut usage, maybe it's somewhere else.
The mut helper is quite vague. It is gonna be deprecated when the Ember team figures out how to do it gracefully.
You can avoid the mut helper by creating a distinct action on your controller/component.
This will let you debug: simply put a debugger statement into your action and proceed from there.
Classic Ember style:
import Component from '#ember/component';
export default Component.extend({
timeZoneOptions: Object.freeze([
{ groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
{ groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
]),
currentTimeZoneOption: null,
actions: {
selectTimeZoneOption(timeZoneOption) {
this.set('currentTimeZoneOption', timeZoneOption');
}
}
});
{{#paper-select
options=this.timeZoneOptions
selected=this.currentTimeZoneOption
onChange=(action 'selectTimeZoneOption')
as |timeZoneOption|
}}
{{timeZoneOption}}
{{/paper-select}}
<p>
Current timezone option:
{{this.currentTimeZoneOption.groupName}}
</p>
Ember Octane style:
import Component from '#glimmer/component';
import { tracked } from '#glimmer/tracking';
import { action } from '#ember/object';
export default class MyComponent extends Component {
timeZoneOptions = Object.freeze([
{ groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
{ groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
]);
#tracked
currentTimeZoneOption = null;
#action
selectTimeZoneOption(timeZoneOption) {
this.currentTimeZoneOption = timeZoneOption;
}
}
<div class="my-component">
<PaperSelect
#options={{this.timeZoneOptions}}
#selected={{this.currentTimeZoneOption}}
#onChange={{this.selectTimeZoneOption}}
as |timeZoneOption|
>
{{timeZoneOption}}
</PaperSelect>
<p>
Current timezone option:
{{this.currentTimeZoneOption.groupName}}
</p>
</div>

Ember observe nested array property

I want to observe a nested property. I have the following Ember Array:
specifications: [
{
title: "specification name",
filters: [
{
title: "example"
checked: false
},
{
title: "example 2",
checked: true
}
]
},
...
]
I want to create a computed property:
activeFilters: (->
Ember.computed.filterBy('specifications.#each.filters', 'checked', true),
).property('specifications.#each.filters')
The active filters property is not working, I tried several combinations of property methods, but none worked.
Is the property I am trying to create actually possible?
Yes, it is possible. The thing is that for it to work you can't use a JavaScript array, you need an Ember.ArrayProxy and then you can access its special properties: http://emberjs.com/api/classes/Ember.ArrayProxy.html
specifications: Ember.ArrayProxy.create({
content: [
{
title: "specification name",
},
]
});
So, you'll have something like:
oneSpecChangedCheck: function() {
// don't know which, but someone changed
var s = this.get('specs');
// loop and process
return s;
}.property('specs.#each.checked'),
http://emberjs.jsbin.com/zohuzo/2/edit?html,js,console,output

igGrid column Edit Template

Does igGrid support column edit/new templates?
I have a grid defined as below. But the template won't work when editing/adding a new row.
The "ChooseEmployee" function displays a popup dialog for users to choose employee's from.
$(function() {
var employees = [{
Id: 1,
"Name": "John, Smith",
"DirectReports": "Mary, Ann;David,Lowe"
}, {
Id: 2,
"Name": "Mary, Ann",
"DirectReports": "Kelly,Walsh;Kevin, Edwards;Terri, Gibson"
}];
$('#grid1').igGrid({
dataSource: employees,
primaryKey: "Id",
autGenerateColumns: false,
width: "100%",
columns[{
headerText: "Id",
key: "Id",
dataType: "number",
width: 100
}, {
headerText: "Name",
key: "Name",
dataType: "string",
width: 120
}, {
headerText: "Reports",
key: "DirectReports",
dataType: "object",
width: 300,
template: "<div style='clear:both'><div style='overflow:hidden;white-space:wrap;max-width:320px;width:320px;float:left;'>${DirectReports}</div><input type='button' onclick='chooseEmployees(${Id});' value='...' style='float:left;' /></div>"
}],
features: [ {name: "Updating", enableAddRow: true, editMode: "row" } ]
});
});
<table id="grid1"></table>
Basically you would have to cancel the original row editing that the igGrid is performing and you would have to invoke row updating and row adding programmatically. Also this template will work for rows that already exist, but would not be applied when adding a new row. You can try the Row Edit Template feature of the igGrid as it provides in the box editing dialog. If you want to choose from a list of values for this specific column, then you can use a combo editor provider for this column.
Option for configuring editor provider for the column.
updateRow API method.
addRow API method.
Setting up a row edit template.

Ember button not staying disabled

I have an ember form where the button is supposed to be disabled for the creation of the object. The first two forms I did this on worked fine, this one is giving me issues. The button is disabled but then renables before the controller action is done.
Goal: Prevent double click on the Create button from creating a duplicate object
I attempted to do this by disabling the button after the first click
View (just the button piece)
<button type="submit" class="btn btn-primary" type="submit" id="submit-attribute"{{action 'submit' newAttribute}} {{bind-attr disabled="isProcessing"}}>Create</button>
Controller (in CoffeeScript)
App.SpecificationNewAttributeController = Ember.ObjectController.extend
isProcessing: false
newAttribute: Ember.Object.create({
name: ""
datatype: ""
group: ""
})
datatypes: ['number', 'range', 'list', 'boolean', 'date']
actions:
submit: (content) ->
#set "isProcessing", true
specification = controller.get('content')
specId = specification.get('identifier')
revision = specification.get('revision')
specificationAttribute = #store.createRecord "SpecificationAttribute",
name: content.name
group: content.group
datatype: content.datatype
specification: specification
specificationIdentifier: specId
revision: revision
specificationAttribute.save().then ((specificationAttribute) =>
attributeId = specificationAttribute.get("id")
specification.get('specificationAttributes').addObject specificationAttribute
specification.save().then ((specification) =>
specification.reload()
groups = specification.get('specificationGroups')
group = groups.where(display_name: content.group)[0]
controller.transitionToRoute('specification', specification).then ->
$.growl.notice title: "Specification", message: "New Attribute Added"
)
#set "isProcessing", false
)
Answering this myself. It is a lame mistake but maybe it will help someone. I needed to move the #set "isProcessing", false into the inner save().then block:
actions:
submit: (content) ->
#set "isProcessing", true
controller = #controllerFor('specification')
specification = controller.get('content')
specId = specification.get('identifier')
revision = specification.get('revision')
specificationAttribute = #store.createRecord "SpecificationAttribute",
name: content.name
group: content.group
datatype: content.datatype
specification: specification
specificationIdentifier: specId
revision: revision
specificationAttribute.save().then ((specificationAttribute) =>
attributeId = specificationAttribute.get("id")
specification.get('specificationAttributes').addObject specificationAttribute
specification.save().then ((specification) =>
specification.reload()
groups = specification.get('specificationGroups')
group = groups.where(display_name: content.group)[0]
#set "isProcessing", false
controller.transitionToRoute('specification', specification).then ->
$.growl.notice title: "Specification", message: "New Attribute Added"
)
)