Please see the relevant plunker
https://plnkr.co/edit/f0BxpinhuqVz8o6IIFaL?p=preview
stack overflow makes you put code if a plunker is linked
but it is too much code to copy paste here it would just
look messy so I a am putting this comment instead.
If you run this and then click the add button a new entry is added to the array, but the form view does not reflect the forms state, instead the first entry is duplicated and the last entry is gone.
If anyone has any ideas or guides as to what I am doing wrong I would be very grateful as I have been pretty stuck on a seemingly easy task.
I tried to follow the official Angular Reactive Forms guide as close as possible to build this example.
Seems like Angular has trouble tracking the index of your objects in your formArray. This can be solved by using trackBy. Add it to your iteration with function:
<div *ngFor="let detail of detailArray.controls; let i=index; trackBy:trackByFn" [formGroupName]="i">
and in component:
trackByFn(index: any, item: any) {
return index;
}
Your PLUNKER
Related
I am able to to implement drag and drop functionality using ng2-dragula but the problem I am facing that it drags the header row as well and also unable to get the dragged row values(its row data )and the row above and below from the dragged row.
Can anyone help me this ?
I also found the same issue on github
https://github.com/valor-software/ng2-dragula/issues/831
<mat-table [dataSource]="dataSource"
matSort matSortActive="categoryName" matSortDirection="asc" matSortDisableClear
[dragula]='"seventh-bag"'>
<ng-container matColumnDef="seqNo">
<mat-header-cell *matHeaderCellDef>S.No.</mat-header-cell>
<mat-cell *matCellDef="let row;let i=index;">
{{(paginator.pageSize * (paginator.pageIndex)) + i+1}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header (mouseenter)="nameIcon=false" (mouseleave)="nameIcon=true">
Category Name
<i *ngIf="nameIcon && sort.active=='join'" class="fa fa-sort"></i>
</mat-header-cell>
<mat-cell
*matCellDef="let catg;">
name
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow(row)" [ngClass]="{'highlight': selectedRowIndex == row._id}"
(mouseenter) ="dragRow = row" (mouseleave) ="mouseLeave('div A')"
>
{{row}}
</mat-row>
</mat-table>
When I use the above approach, then I am unable to fetch the dragged row data and its new position
2.) When I implement ng2-dragula
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow(row)" [dragula]='"seventh-bag"'
>
then the drag and drop functionality not works well
Please refer to the picture below
Image Source:- https://user-images.githubusercontent.com/6483007/36256531-4a34b638-124b-11e8-9b13-cd15391886ae.gif
This may not be an exact answer to your question regarding dragula but seeing no-one has had a go yet here is a possible solution that seems to be working for me: I tried getting drag and drop working with mat-table as well. I didn't use ng2-dragula (i used jquery ui-sortable in the past), but i did get somewhere with angulars new CDK drag and drop system. (now in 7.0.0).
https://material.angular.io/cdk/drag-drop/overview
The only issue i had with this is that if you are wanting to do sorting, the cdkDropList directive had to be a direct parent to the cdkDrag elements, not sure if there is a way around this and i couldn't find an option saying otherwise.
seeing that mat-tables don't seem to be constructed in a way that works nicely with d&d I've turned to lists or expansion-panels (if you want the drop down for extended forms on each row) as they seem to behave better when being nested and work well with the drag and drop tools by cdk. (you will probably need to do some custom styling to get it looking like a table)
I realise it wont come with the sorting, filtering features mat-table comes with but if you are prioritising the d&d you may have to find another way around it.
Hope that gives you something to work with!
I have a simple list component in Vue2 with the ability to add/delete items. My issue was that when I switched from a regular HTML element to material-ui (https://vuematerial.io/), my input-clearing functionality broke.
This is what it looked like:
With the regular HTML element, I was simply targeting the element by ID (from within the methods of my component script) and assigning it an empty string to clear it, as so:
if (input.value !== '') {
this.items.push({
text: input.value
})
input.value = ''
}
I found the solution, which I'll answer below, but again, my question was: How do I clear the field when using a material-ui element? And the bonus question, which I haven't fully answered for myself: Why did it break?
So, first the "how" to make it work:
I needed to set a "v-model" attribute on my element (I called it "inputField"), and then initialize it to empty within the component's data properties, and THEN in my component methods "addInput" function, I had to set "this.inputField = ''" instead of "input.value = ''".
To illustrate:
So, that works. Here's the result:
Now, that just leaves the question of exactly how this all works, and why the method which worked for a regular HTML failed on ? I'm not sure, and I'd welcome an explanation/education from anyone who can explain!
Vue DevTools for Chrome seems to give a hint:
"Mdclearable" seems intuitively to be related; this property is set to false. Is that something to do with it? I'm not sure.
Learning a bit more about Vue's "v-model" and reactivity was also helpful in solving this.
Again, additional comments welcome to help elucidate what is going on here! And I hope this Q&A will help someone else possibly avoid some frustrations in future.
I've been searching for quite a while but neither solution worked.
I have created a backend module which shall display orders in a table. I achieved creating a table containing the wanted information BUT I need some more functionality and I thought there would be an easy way.
The table should be sortable, filterable and searchable - functions that TYPO3 uses for displaying datasets in the backend already.
I have tried to make use of the DataTables which are already included by the core of TYPO3 and should be easily accessible according to the following links:
https://forum.typo3.org/index.php/t/210780/
https://typo3.com/blog/how-to-use-javascript-in-typo3s-backend/
TYPO3 backend modul DataTable is no function
I added a js-file according to the answer from Philipp Wrann in the first link:
/Resources/Public/JavaScript/OrderingTables.js:
define('TYPO3/CMS/GiPdShop', ['jquery', 'datatables'], function($) {
var OrderingTables = {};
// Initialize dataTables
OrderingTables.initializeDataTables = function() {
$('#orders-table').DataTable();
};
$(document).ready(function() {
// Initialize the view
OrderingTables.initializeDataTables();
});
});
As there are no errors and the file is included if I check in the dev-tools I believe this is not a bad approach. To use the file I added the following to the <f:be.container> in the template:
includeRequireJsModules="{0: 'TYPO3/CMS/GiPdShop/OrderingTables'}"
Yet it doesn't create a DataTable, no added classes to the rows or cells of the table and thus I assume that there is some kind of error, maybe a missing configuration, maybe another option I missed out somehow.
The only other solutions I found so far seem rather complicated and I would love to keep it as simple as possible (I am not a professional in TYPO3 (yet) and the module should already be functional).
Can someone see a mistake I haven't found? Is it even possible to add the wanted functionality in such an easy way?
Any help would be highly appreciated.
It's really a stupid little thing I was missing.
The path 'TYPO3/CMS/GiPdShop' in the definition was missing the module.
So the correct path would be 'TYPO3/CMS/GiPdShop/OrderingTables', the same I have added in the template.
Really stupid but maybe this helps someone someday who gets stuck as well...
#PaulBeck thanks again!
How can I change the positions of checkbox and label and how to implement a link into the label?
$acceptGTC = new Element\Checkbox('AGBs');
$acceptGTC->setLabel('I Accept the GTC (show it).');
$this->add($acceptGTC);
regards
n00n
meanwhile:
I tried to overwrite the view helper for checkboxes.
copied
*/vendor/zendframework/zend-form/src/View/Helper/FormCheckbox.php
to
*/module/Application/src/Application/View/Helper/FormCheckbox.php
added to module.config.php
'viewhelpers' => array('checkbox'=>'Application\View\Helper'),
But it still uses the original one...
Do I have to tell zend to use my FormCheckbox?
I don't exactly know the way you are rendering your Zend_Form_Element, but in order to enhance the rendering as you want you should build a custom decorator, and add it to this element.
You should read the Zend documentation on Zend_Form_Decorators, everything is quite well explained and should lead you to a fancy solution.
I have a list view containing basic info about a set of tasks and I want to bind a detail view to the model object for an item when an item from the list is selected ...
http://jsfiddle.net/g2wYX/
I've been trying to use the change event of the grid ...
change: function (arg) {
var grid = $("#taskGrid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
kendo.bind("#taskDetail", selectedItem);
}
For some reason I can't seem to figure out the model binding on the detail view.
Does anyone have any ideas on how I can do this?
The binding is just simple as binding to any of the View, the only difference is that you have to place the Detail template inside a < scripts /> tag with type set as text/x-kendo-template. I have updated your fiddle example to what I have understood you require.
<script id="javascriptTemplate" type="text/x-kendo-template">
and provide the detail template link to the Grid as below:
detailTemplate: kendo.template($("#javascriptTemplate").html()),
Let me know if the solution is not what you desired or you are confused in any code statement.
Question Fiddle Solution
EDIT:
Updated the fiddle Solution as per your requirement,have a look and let me if that is as per your requirement.
The only change that is required in your code is just change the data-bind from value to html
Updated Solution