igGrid column Edit Template - infragistics

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.

Related

How to disable checkbox in certain column Ember js?

May I know how can I disable the rest of the checkbox except for step 2,3 and 4? Those checkbox are link from the checkbox component. And i link the checkbox component into route at columns propertyName:"active". Below is a part of the route code.
export default Route.extend({
model() {
let results = {
workflow: {
columns: [
{
"propertyName": "step",
"title": "Step",
editable: false
},
{
"propertyName": "workflowName",
"title": "Workflow Name",
},
{
"propertyName": "preferredName",
"title": "Your Company Preferred Name",
},
{
"propertyName": "active",
"title": "Active",
component: "adk-workflow-select-row",
editable: false
},
{
title: "Edit",
component: "edit-row",
editable: false
}],
rows: [
{
step: '0',
workflowName: 'New',
preferredName: '新',
},
{
step: '1',
workflowName: 'Budget Approval',
preferredName: '预算批准',
},
{
step: '2',
workflowName: 'Creative',
preferredName: '创作的',
},
{
step: '3',
workflowName: 'Visualize',
preferredName: '想象',
},
{
step: '4',
workflowName: 'Implementation',
preferredName: '履行',
},
{
step: '5',
workflowName: 'In Play',
preferredName: '活性',
},
{
step: '6',
workflowName: 'Completed',
preferredName: '已完成',
},
{
step: '7',
workflowName: 'Canceled',
preferredName: '取消',
},
]
},
This is the adk-workflow-select-row which is the checkbox component. The code below is how i render the checkbox at. This enable all the checkbox. But i only need step 2,3 and 4 checkbox to be enable.
{{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}
Your questions is a bit hard to answer because you dont show the relevant template code.
Generally you somehow call your your checkbox in your template, and you can just wrap this in an {{#if. Your code is very generic, but I just guess this could be in your edit-row component. So like this:
{{#if some condition}}
{{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}
{{/if}}
Now the important question is what condition to use. And this kind of depends on what exactly you want. How do you want to configure it? Do you want to keep a global array somehow saying which steps have the checkbox in your rows like this?
{
step: '2',
workflowName: 'Creative',
preferredName: '创作的',
showCheckbox: true,
},
Depending on this what you want could be something like this:
{{#if record.showCheckbox}}
{{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}
{{/if}}
generally if you're new to ember I can just strongly recommend you to first try to learn how things work in a less generic situation. A generic solution like you have can be awesome, but soon become very complex.

Marking certain appointments as not selectable in Kendo Scheduler for 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>

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

CRUD operations using Ember-Model

Here,I am trying to implement CRUD operations using ember-model.
I am totally new to ember environment,actually i don't have much understanding of ember-model.
Here,i am trying to add new product and delete existing one.I am using inner node of fixture
i.e. cart_items.My this fixture contains two node i.e. logged_in and cart_items and this what my fixture structure :
Astcart.Application.adapter = Ember.FixtureAdapter.create();
Astcart.Application.FIXTURES = [
{
"logged_in": {
"logged": true,
"username": "sachin",
"account_id": "4214"
},
"cart_items": [
{
"id": "1",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
},
{
"id": "2",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
},
{
"id": "3",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
}
]
}
];
I want to this fixture struture only to get data in one service call from server.
Now,here is my code which i am using to add and delete product from cart_items
Astcart.IndexRoute = Ember.Route.extend({
model: function() {
return Astcart.Application.find();
}
});
Astcart.IndexController = Ember.ArrayController.extend({
save: function(){
this.get('model').map(function(application) {
var new_cart_item = application.get('cart_items').create({name: this.get('newProductDesc'),qty: this.get('newProductQty'),price: this.get('newProductPrice'),subtotal: this.get('newProductSubtotal')});
new_cart_item.save();
});
},
deleteproduct: function(product){
if (window.confirm("Are you sure you want to delete this record?")) {
this.get('model').map(function(application) {
application.get('cart_items').deleteRecord(product);
});
}
}
});
But when i am trying to save product i am getting an exception
Uncaught TypeError: Object [object global] has no method 'get'
And when i am trying to delete product i am getting an exception
Uncaught TypeError: Object [object Object] has no method 'deleteRecord'
Here,i also want to implement one functionality i.e. on every save i need to check if that product is already present or not.
If product is not present then only save new product other wise update existing product.
But i don't have any idea how to do this?
I have posted my complete code here.
Can anyone help me to make this jsfiddle work?
Update
I have updated my code here with debugs.
Here, i am not getting any exception but record is also not getting delete.
I am not getting what is happening here?
Can anyone help me to make this jsfiddle work?
'this' context changes within your save method. You need to use the 'this' of the controller and not the map functions. Try this:
save: function(){
var self = this;
self.get('model').map(function(application) {
var new_cart_item = application.get('cart_items').create({
name: self.get('newProductDesc'),
qty: self.get('newProductQty'),
price: self.get('newProductPrice'),
subtotal: self.get('newProductSubtotal')
});
new_cart_item.save();
});
}

Switch views inside a tab of a tabpanel -sencha 2 mvc

I am new to sencha , and I am using sencha 2 mvc.I am having a Tabpanel and the first tab contains a list.When clicking on the button in the list i want to load/switch view of its details with a form..I am unable to find the answer.Please help me asap..
{
xtype: 'tabpanel',
baseCls:'tabheader',
cls:'tab_container',
scrollable:true,
tabBarPosition: 'top',
flex:1,
items: [
{
xtype:'container',
title:'Sample',
id:'Sample',
layout:'card',
cardSwitchAnimation: 'slide',
tabBarPosition: 'top',
items:[
{
title: 'Sample',
xtype: 'list',
flex:1,
store: 'SampleWithoutAgentOffers',
itemTpl: '{name}' ,
onItemDisclosure: function(record, btn, index) {
Ext.Viewport.setActiveItem(1);
}
}
]
},
{
xtype:'panel',
html:'hiiii'
}
]
}
On itemdisclosure i want to load view..Please help me..
Please see my edits to your original question, I'm not sure if that configuration you posted would even run in JavaScript.
I fixed your configuration object so it should technically work. However, I don't have visibility into your Viewport object. If what you are trying to do onItemDisclosure is show the panel with html of 'hiii', then you should be doing:
onItemDisclosure: function(record, btn, index) {
this.parent.setActiveItem(1);
}