angular - angular2 jquery UI sortable with model update -


created component having array of datas , doing sortable using jquery ui sortable. pfb component code.

import { component, afterviewinit  } '@angular/core'; declare var $:any;  @component({   selector: 'app-requirement-details',   templateurl: './requirement-details.component.html',   styleurls: ['./requirement-details.component.css'] }) export class requirementdetailscomponent implements afterviewinit  {      private tabledatas = [         {             name:'sameer',             age: '20'         }, {             name:'nithya',             age: '30'         }, {             name:'dinesh',             age: '25'         }, {             name:'ramesh',             age: '40'         }, {             name:'prabhu',             age: '32'         }, {             name:'gopal',             age: '35'         }, {             name:'irshad',             age: '36'         }, {             name:'puhal',             age: '33'         }, {             name:'rajagopal',             age: '38'         }, {             name:'sakthi',             age: '35'         }     ];      constructor() { }       ngafterviewinit () {         let component = this;         $(".rtablebody").sortable({             axis: "y",             cursor: "move",             handle: ".handle",             opacity: 0.6,             helper: function(e, item) {                 console.log("parent-helper: ", item);                 if (!item.hasclass("ui-selected")) {                     //item.addclass("ui-selected");                 }                 // clone selected elements                 var elements = $(".ui-selected").not('.ui-sortable-placeholder').clone();                 console.log("making helper: ", elements);                 // hide selected elements                 item.siblings(".ui-selected").addclass("hidden");                 var helper = $("<div class='rtable' ><div class='rtablebody'></div></div>");                 helper.append(elements);                 console.log("helper: ", helper);                 return helper;             },             start: function(e, ui) {                 var elements = ui.item.siblings(".ui-selected.hidden").not('.ui-sortable-placeholder');                 ui.item.data("items", elements);             },             update: function(e, ui) {                 console.log("receiving: ", ui.item.data("items"));                 $.each(ui.item.data("items"), function(k, v) {                     console.log("appending ", v, " before ", ui.item);                     ui.item.before(v);                 });             },             stop: function(e, ui) {                 ui.item.siblings(".ui-selected").removeclass("hidden");                 $(".ui-selected").removeclass("ui-selected");             }         })         .selectable({             filter: ".rtablerow",             cancel: ".handle"         })      }  }

and template code below

<div class="rtable">     <div class="rtablerow head">         <div class="rtablehead" style="width:5%;"><strong>si.no</strong></div>         <div class="rtablehead"><span style="font-weight: bold;">name</span></div>         <div class="rtablehead">age</div>     </div>     <div class="rtablebody">         <div class="rtablerow" *ngfor="let data of tabledatas; let = index;">             <div class="rtablecell"><div class="handle"></div>{{i+1}}</div>             <div class="rtablecell">{{data.name}}</div>             <div class="rtablecell">{{data.age}}</div>         </div>     </div> </div>

table sorting working fine, need along table sorting component model variable should sorted. tried multiple things helped yet.

please give me solution this.

thanks in advance.


Comments

Post a Comment

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

does autofac support specifying registration name in components' constructors? example: ninject's namedattribute . you need use autofac.extras.attributed package on top achieve this so let's have 1 interface , 2 classes: public interface ihello { string sayhello(); } public class englishhello : ihello { public string sayhello() { return "hello"; } } public class frenchhello : ihello { public string sayhello() { return "bonjour"; } } then have consumer class, in want select instance injected: public class helloconsumer { private readonly ihello helloservice; public helloconsumer([withkey("en")] ihello helloservice) { if (helloservice == null) { throw new argumentnullexception("helloservice"); } this.helloservice = helloservice; } public string sayhello() { return this.helloservice.sayhello()...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more

verilog - Systemverilog dynamic casting issues -

i've code snippet following in testbench function void write_to_port( my_data_type_base data ); my_data_type_extended data_ext; if(!$cast(data_ext, data)); `uvm_error(get_type_name(), "failed cast"); `uvm_info(get_name(), $psprintf("data_ext :\n%s", data_ext.sprint()), uvm_medium) // write data_ext out port.... endfunction when run it, i'm getting uvm_error "failed cast." i'm not quire sure why $cast not returning 1. can see, i'm printing out extended class data item after casting uvm_info. can see it's being cast properly. if don't use $cast if condition, don't runtime error. isn't coding practice use if dynamic cast check if $cast returning 1 ? what might reason behind cast not returning 1 in above case? i think semicolon on line 'if' not belong? i think consumes if statement, , uvm_error executes regardless of how if evaluates: if(!$cast(data_ext, data)); <- no semico...
Read more