How can I use component when source is not array of string, but rather array of objects?
All examples just show how to sort array of strings. But I want to sort rows from database, so I have at least 2 columns id and title.
<kendo-sortable [navigatable]="true" [data]="tasks"></kendo-sortable>
private tasks: Task[] = [{id: 1, title: "Test 1"}, {id: 2, title: "Test 2"}];
I am complete beginner in Angular so accept my apologise, if this is a dumb question.
You need to add a template to your sortable:
<kendo-sortable [data]="palettes" >
<template let-palette="item">
{{palette.name}}
</template>
</kendo-sortable>
Kendo documentation provides an example for this case :
http://www.telerik.com/kendo-angular-ui/components/sortable/api/SortableComponent/#toc-data
And the related plunker:
http://plnkr.co/edit/3gSg2FnBqiZ7hy2cRzke?p=preview
Related
Using Tabulator, if you have a 'select' editor and want it to link to values 'Male' and 'Female' but underneath male and female are values from another physical database table with id values of 1 and 2 (which are different than the 'row' id), whats the best way to do something like this?
The 'select' editor has ways to specify the display of items in the drop down and a literal display of the selected value, but no place for a hidden (not displayed) underlying ID of the selected value to pass when saving the data.
We could wrap the select data values in divs with a data attribute for the selects values ids and then pass that when updating, but are not sure this is the best option considering how Tabulator works. We could also just pass the raw selected value and then look it up on the server to get the associated ID, but that seems like a lot of overhead and tightly couples the server to the client, which wouldn't work for something like a 3rd party API where we have no server control.
Any thoughts on how best to handle something like this are appreciated!
The select editor allows for values to be passed in a number of ways, including specifying both the items value and its user visible label
If you want to show a different lable to the value you want to store, you can pass in an object, where the key of each property is the value that will be stored if it is selected, and the value of each property will be the lable displayed for it in the list.
{title:"Name", field:"name", editor:"select", editorParams:{
values:{
"steve":"Steve Boberson",
"bob":"Bob Jimmerson",
"jim":"Jim Stevenson",
}
}}
For more complex option lists you can use an array of objects, that allows you to define option groups, and disabled options.
{title:"Name", field:"name", editor:"select", editorParams:{
values:[
{ //option group
label:"Men",
options:[ //options in option group
{
label:"Steve Boberson",
value:"steve",
},
{
label:"Bob Jimmerson",
value:"bob",
},
]
},
{ //option group
label:"Women",
options:[ //options in option group
{
label:"Jenny Jillerson",
value:"jenny",
},
{
label:"Jill Betterson",
value:"jill",
},
]
},
{//ungrouped option
label:"Other",
value:"other",
},
]
}}
For full details on how to use this editor, checkout the Editor Documentation
Finally figured this out. You need to use the lookup formatter to display the text value using the same params as the select editor. This is not obvious since none of the select editor examples in the docs show use of it. Anyway, here is a simple example showing it in both directions. Of course you would want to abstract the data out instead of literally duplicating it, but here to help show the literal use, it is duplicated:
{
title:"Example",
field:"example",
editor: "select",
editorParams:{
"1": "Cute",
"2": "Fine",
"3": "Scary",
},
formatter:"lookup", // display option, but store value
formatterParams:{
"1": "Cute",
"2": "Fine",
"3": "Scary",
}
}
I'm new to the tabulator and am having trouble getting it to display droplist data in the correct format.
I have defined the column details thus:
{
title: "Status",
field: "Status",
width: 150,
headerFilter: "input",
editor: "select",
editorParams: {
listFormatter: populateStatusList
}
},
As you can see, the listFormatter calls function populateStatusList. This function builds an array of strings from an already-populated structure and returns the array.tostring() from the function.
The tabulator droplist does show the strings but horizontally on one long line and not vertically as I'd expect (i.e. it doesn't actually drop).
Can anyone help me?
Kind regards
The listFormatter should only be used to layout list items passed into the editor, the values for each of the items in the list should be passed into the values property
{title:"Gentlemen", field:"names", editor:"select", editorParams:{
listFormatter:function(value, title){ //prefix all titles with the work "Mr"
return "Mr " + title;
},
values:{
"steve":"Steve Boberson",
"bob":"Bob Jimmerson",
"jim":"Jim Stevenson",
}
}}
In the example above the list formatter will create a list of the titles passed into the values property, prepending each with the string "Mr"
Is it possible to iterate through an array to generate the values that populate a select box, rather than hard-coding them in the template?
I'm passing an array of values to the template that I would like available in the select box, but I'm not sure how to go about iterating through it.
Here's how I currently have it:
{{ form_select('profile_status', {
'created' : 'Candidate Created',
'mailed': 'Questionnaire Mailed',
'personal_info': 'Personal Data Filled Out',
'survey': 'Survey Completed',
'primary': 'Waiting for Post-Primary Updates',
'endorsements': 'Endorsements Completed',
'essay': 'Essay Completed',
}, candidate.profile_status, {'class': 'form-control', 'id': 'profile-status'})|raw }}
What I'm not sure how to do is implement a for-loop within an already existing twig tag to replace the hard-coded list of values.
Can someone point me in the right direction?
Thanks!
I am trying to list items according to how 'important' their tags are.
Here is an example of an item:
{
name: 'item1',
tags: [1, 2, 3]
}
And here is an example of a tag
{
_id: 1,
name: red,
weight: 0.7
}
I am trying to find out the best way to sort a list of items where a lot of calculations must be made.
I imagine that sorting in real time might not be the best way and resorting to something like redis might be necessary.
By doing so I would store all the data relevant to calculate the sorting positions in redis right ?
Any input will be greatly appreciated!
How to update the text of second comment to "new content"
{
name: 'Me',
comments: [{
"author": "Joe S.",
"text": "I'm Thirsty"
},
{
"author": "Adder K.",
"text": "old content"
}]
}
Updating the embedded array basically involves two steps:
1.
You create a modified version of the whole array. There are multiple operations that you can use to modify an array, and they are listed here: http://www.rethinkdb.com/api/#js:document_manipulation-insert_at
In your example, if you know that the document that you want to update is the second element of the array, you would write something like
oldArray.changeAt(1, oldArray.nth(1).merge({text: "new content"}))
to generate the new array. 1 here is the index of the second element, as indexes start with 0. If you do not know the index, you can use the indexesOf function to search for a specific entry in the array. Multiple things are happening here: changeAt replaces an element of the array. Here, the element at index 1 is replaced by the result of oldArray.nth(1).merge({text: "new content"}). In that value, we first pick the element that we want to base our new element from, by using oldArray.nth(1). This gives us the JSON object
{
"author": "Adder K.",
"text": "old content"
}
By using merge, we can replace the text field of this object by the new value.
2.
Now that we can construct the new object, we still have to actually store it in the original row. For this, we use update and just set the "comments" field to the new array. We can access the value of the old array in the row through the ReQL r.row variable. Overall, the query will look as follows:
r.table(...).get(...).update({
comments: r.row('comments').changeAt(1,
r.row('comments').nth(1).merge({text: "new content"}))
}).run(conn, callback)
Daniel's solution is correct. However, there are several open issues on Github for planned enhancements, including:
generic object and array modification (https://github.com/rethinkdb/rethinkdb/issues/895)
being able to specify optional arguments for merge and update (https://github.com/rethinkdb/rethinkdb/issues/872)
being able to specify a conflict resolution function for merge (https://github.com/rethinkdb/rethinkdb/issues/873)
...among other related issues. Until those are introduced into ReQL (particularly #895), Daniel's approach is the correct one.