set kendo template condtion when id is null
<div id="grid">
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td> #= id #</td>
<td> #= FirstName # </td>
<td> #= LastName # </td>
</tr>
</script>
<script id="detailTemplate" type="text/x-kendo-tmpl">
<p>detail stuff</p>
</script>
</div>
data source :
dataSource: {
data: [
{
id:"",
FirstName: "Joe",
LastName: "Smith"
},
{
id:"1",
FirstName: "Jane",
LastName: "Smith"
}]
},
here is first id is null
i want to set there some text like TEST
how can i do this.
thanks.
here is jsfiddle
Define a template for the id as:
<script id="idTemplate" type="text/x-kendo-tmpl">
# if (id) { #
#= id #
# } else { #
TEST
# } #
</script>
and then in the columns definition do:
columns:[
{
field: "id",
title: "id",
template: $("#idTemplate").html()
},
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}
],
Your JSFiddle modified using this idea: http://jsfiddle.net/OnaBai/yzKqV/184/
NOTE: Defining a rowTemplate when using details is not that easy since you template has to deal with drawing the handle for opening details.
Related
On my route I have a list of customers, and a form to add new ones.
I create an empty record in the setupController hook. This record is bound to the form. My idea was: on saving the record I make a (deep) copy of it, save the copy, then reset the record to empty state via http://emberjs.com/api/data/classes/DS.Model.html#method_rollbackAttributes.
Looks like it wont work, because
If the model isNew it will be removed from the store.
How should I handle this scenario? What is the best practice?
I made a JsBin to demonstrate the problem. http://jsbin.com/weqotoxiwe/3/edit?html,js,output.
Try to type something, then save it. (It should empty the record) then type again. It produce the following error in console:
Uncaught Error: Attempted to handle event didSetProperty on while in state root.deleted.saved. Called with {name: name, oldValue: sds, originalValue: undefined, value: sdsd}.
Here is the snippet:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ApplicationAdapter = DS.RESTAdapter;
App.Customer = DS.Model.extend({
name: DS.attr('string'),
city: DS.attr('string')
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('customer');
},
setupController: function(controller, model) {
this._super(controller, model);
var empty = this.store.createRecord('customer');
controller.set('empty', empty);
},
actions: {
save: function(record) {
/*
record.copy().then(function(copy){
copy.save();
})*/
record.rollbackAttributes();
}
}
});
/*---------------Data------------------*/
var customers = {
"customers": [{
"id": 1,
"name": "Terry Bogard",
city: 'Delaware'
}, {
"id": 2,
"name": "Joe Higashi",
city: 'Tokyo'
}, {
"id": 3,
"name": "Richard Meyer",
city: 'Albuquerque'
}, {
"id": 4,
"name": "Kim Kaphwan",
city: 'Seoul'
}, {
"id": 5,
"name": "Ryo Sakazaki ",
city: 'Tokyo'
}, {
"id": 6,
"name": "Takuma Sakazaki ",
city: 'Tokyo'
}, ]
};
$.mockjax({
url: '/customers',
dataType: 'json',
responseText: customers
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/beta/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/beta/ember.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<h2>Table example</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{input value=empty.name}}
<button {{action 'save' empty}}>Save</button>
{{#each model as |record|}}
<div>{{record.name}}</div>
{{/each}}
</script>
</body>
</html>
Update
In my application I handle the all saves in one central place, in application route. Usually I use http://emberjs.jsbin.com/jipani/edit?html,js,output to send the action up to the route.
I would save the record bound to the form (not a deep copy of it), and then create a new record and attach it to the form. No need to mess with deep copying or rolling back.
You should do this all on the Controller (coffeescript) -
newEmpty: (->
empty = #store.createRecord('customer')
#set('empty', empty)
).on('init')
actions:
saveEmpty: ->
#get('empty').save().then =>
#newEmpty()
Note that on('init') is needed to run newEmpty when the controller is initialized.
I have the following partial:
<ul class="navbar">
{#nav_links}
<li class="navbar__link {?sub_menu}more{/sub_menu}">
{label}
{?sub_menu}
<ul class="navbar__link--sub">
{#sub_menu}
<li class="navbar__link--sub {?sub_menu}more{/sub_menu}">
{label}
</li>
{/sub_menu}
</ul>
{/sub_menu}
</li>
{/nav_links}
</ul>
With JSON:
{
title: "page title",
nav_links: [
{
link: "home",
label:"Home"
},
{
link: "products",
label:"Products",
sub_menu: [
{link: "link1", label: "Product A"},
{link: "link2", label: "Product B"},
{link: "link3", label: "Products C", sub_menu: [
{link: "link3-1", label: "Sub Product A"},
{link: "link3-2", label: "Sub Product B"}
]},
]
}
]
}
The issue I've run into is the nested sub_menu property, all sub menu items add the more class regardless if they have a nested sub_menu or not. I thought the context would have shifted like it does with link and label, however it seems to still refer to the initial sub_menu like the first conditional and section tags do. I've renamed the nested sub_menu property in the JSON and partial tag, context works correctly then. Is there a way to still use the sub_menu property name? Or reference the child property such as sub_menu.sub_menu?
By default, Dust will walk up the context if it doesn't find a key at a certain level. However, you're wanting to explicitly check only the current level of the context. To do this in Dust, prefix the key with a dot:
<li class="navbar__link--sub {?.sub_menu}more{/sub_menu}">
I'm creating a dynamic table component (one row per model), that will include components dynamically (one column for each object in config, each object relates to a key in a model).
I'm trying to bind the model key to the dynamic model.
Any ideas on how to do that given the following?
Config object:
deployment.js (controller)
EDConfig: {
controller: this,
modelType: 'EscalationDetailModelGroup',
table: {
cols: [{
header: 'Escalation Time',
cname: 'form-input-text',
content: {
value: model.escalationTime //obviously this wont work
}
},{
header: 'Most Complex Alarm Level',
field: 'mostComplexAlarmLevelDispatched',
cname: 'form-input-text',
content: {
value: model.escalationTime //obviously this wont work
}
}]
}
};
Router Model:
deployment.js (router)
modelRange: [{
id: 1,
escalationTime: '3 hours',
mostComplexAlarmLevelDispatched: 'N/A'
}, {
id: 2,
escalationTime: '45 minutes',
mostComplexAlarmLevelDispatched: 'Level 3'
}]
Templates:
deployment.hbs
<h2>Deployments</h2>
{{table-list
config=EDConfig
data=model.escalationDetailModelGroups
}}
table-list.hbs
<table>
<thead>
<tr>
{{#each col in config.table.cols}}
<th>{{col.header}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each record in modelRange}}
<tr>
{{#each col in config.table.cols}}
<td>
{{component col.cname content=col.content}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
I'm still not sure how are you trying to merge/link the data, but I doesn't seem to be really important.
I don't think its necessary to pass two data sources to your table-list, the relationships between config and model are not something that you should be doing in the templates. Its more of a data-decoration process and that type of thing should be done at the controller level.
How about something like:
// controller
tableRows: function() {
var config = this.get('config');
var model = this.get('model');
config.forEach(function(col) {
// give each col a model reference
});
return config;
}.property('config', 'model')
// template
{{table-list data=tableRows}}
I just typed that off the top of my head, tweaks would be needed most likely, but the idea should be clear.
I am trying to use the ember-data to build a model from a my own REST service. I have formatted my data according to how I understand the data should be returned from the service, but still stuck.
The issue is that I get no results showing in my view after initial page load. I dont think the model is being populated correctly.
What am I missing?
App = Ember.Application.create();
App.Account = DS.Model.extend({
first: DS.attr( 'string' ),
last: DS.attr( 'string' )
});
App.AccountAdapter = DS.RESTAdapter.extend({
namespace: 'api',
host: 'http://127.0.0.1:3000'
});
App.Router.map(function() {
this.route('home');
});
App.HomeRoute = Ember.Route.extend({
model: function() {
return this.store.find( 'account' );
}
});
App.HomeController = Ember.Controller.extend({
controllerTest : true
});
My data looks like the following:
{
"accounts": {
"id": 1,
"first": "John",
"last": "Doe"
}
}
from url:
http://127.0.0.1:3000/api/accounts
My view template is:
<script type="text/x-handlebars" data-template-name="home">
Home Template {{controllerTest}}
{{#each item in model}}
<br />
{{item.first}}
{{item.last}}
{{/each}}
</script>
Thanks.
I think your JSON format is slightly incorrect. It is my understanding you return a list of accounts, even if there's only one. Try this:
{
"accounts": [
{
"id": 1,
"first": "John",
"last": "Doe"
}
]
}
Try
{{#each }}
<br />
{{first}}
{{last}}
{{/each}}
or
{{log this}}
or use Ember-inspector to see what data do you have and whats going on there.
I can't seem to find a simple way to set the title on a popup add and edit form launched from the kendoui grid, when it is created using a custom template. When I tried the following example, both Add and Edit operations had "Edit" in the title bar of the popup:
Markup:
<script id="popup-editor" type="text/x-kendo-template">
<p>
<label>Name:<input name="name" /></label>
</p>
<p>
<label>Age: <input data-role="numerictextbox" name="age" /></label>
</p>
</script>
<div id="grid"></div>
JavaScript:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: { id: "id" }
}
},
editable: {
mode: "popup",
template: kendo.template($("#popup-editor").html())
},
toolbar: [{ name: 'create', text: 'Add' }]
});
Fiddle demonstrating the issue: http://jsfiddle.net/codeowl/XN5rM/1/
The issue is that when you press the Add or Edit buttons, the title bar in the popup says: "Edit". I want it to say Add when you press the Add button and Edit when you press the Edit button.
Thank you for your time,
Regards,
Scott
If you want a simple solution, add code to the edit event of the grid to check to see if the model being created when edit is called is a new one or an existing one and set the text accordingly:
...
edit: function (e) {
//add a title
if (e.model.isNew()) {
$(".k-window-title").text("Add");
} else {
$(".k-window-title").text("Edit");
}
}
...
Hope this helps...
If the only thing that you need to do is add a title, you should use:
editable : {
mode : "popup",
window : {
title: "Edición",
}
},
You don't need to define a template unless you need to define something else.
Your modified Fiddle here : http://jsfiddle.net/OnaBai/XN5rM/2/