@@ -9,6 +9,7 @@ import type {
99import {
1010 addToArrayWhenNotExists ,
1111 castObservableToPromise ,
12+ createDomElement ,
1213 SlickEventData ,
1314 SlickRowSelectionModel ,
1415 unsubscribeAll ,
@@ -119,15 +120,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
119120 // when those are Angular View/ViewModel, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
120121 if ( ! this . gridOptions . rowDetailView . preTemplate ) {
121122 this . _preloadComponent = this . gridOptions ?. rowDetailView ?. preloadComponent ;
122- this . addonOptions . preTemplate = ( ) =>
123- this . _grid . sanitizeHtmlString ( `<div class="${ PRELOAD_CONTAINER_PREFIX } ) as string ;
123+ this . addonOptions . preTemplate = ( ) => createDomElement ( 'div' , { className : `${ PRELOAD_CONTAINER_PREFIX } } ) ;
124124 }
125125 if ( ! this . gridOptions . rowDetailView . postTemplate ) {
126126 this . _viewComponent = this . gridOptions ?. rowDetailView ?. viewComponent ;
127127 this . addonOptions . postTemplate = ( itemDetail : any ) =>
128- this . _grid . sanitizeHtmlString (
129- `<div class="${ ROW_DETAIL_CONTAINER_PREFIX } ${ itemDetail [ this . datasetIdPropName ] }
130- ) as string ;
128+ createDomElement ( 'div' , { className : `${ ROW_DETAIL_CONTAINER_PREFIX } ${ itemDetail [ this . datasetIdPropName ] } } ) ;
131129 }
132130
133131 // this also requires the Row Selection Model to be registered as well
@@ -247,21 +245,19 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
247245
248246 /** Redraw the necessary View Component */
249247 redrawViewComponent ( createdView : CreatedView ) {
250- const containerElements = this . gridContainerElement . getElementsByClassName ( ` ${ ROW_DETAIL_CONTAINER_PREFIX } ${ createdView . id } ) ;
251- if ( containerElements ?. length >= 0 ) {
248+ const containerElement = this . gridContainerElement . querySelector ( `. ${ ROW_DETAIL_CONTAINER_PREFIX } ${ createdView . id } ) ;
249+ if ( containerElement ) {
252250 this . renderViewModel ( createdView . dataContext ) ;
253251 }
254252 }
255253
256254 /** Render (or re-render) the View Component (Row Detail) */
257255 renderPreloadView ( ) {
258- const containerElements = this . gridContainerElement . getElementsByClassName (
259- `${ PRELOAD_CONTAINER_PREFIX }
260- ) as HTMLCollectionOf < HTMLElement > ;
261- if ( this . _preloadComponent && containerElements ?. length >= 0 ) {
256+ const containerElement = this . gridContainerElement . querySelector ( `.${ PRELOAD_CONTAINER_PREFIX } ) ;
257+ if ( this . _preloadComponent && containerElement ) {
262258 const preloadComp = this . angularUtilService . createAngularComponentAppendToDom (
263259 this . _preloadComponent ,
264- containerElements [ containerElements . length - 1 ] ,
260+ containerElement ,
265261 { } ,
266262 { sanitizer : this . _grid . sanitizeHtmlString }
267263 ) ;
@@ -271,15 +267,14 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
271267
272268 /** Render (or re-render) the View Component (Row Detail) */
273269 renderViewModel ( item : any ) : CreatedView | undefined {
274- const containerElements = this . gridContainerElement . getElementsByClassName (
275- `${ ROW_DETAIL_CONTAINER_PREFIX } ${ item [ this . datasetIdPropName ] }
276- ) as HTMLCollectionOf < HTMLElement > ;
277-
278- if ( this . _viewComponent && containerElements ?. length > 0 ) {
270+ const containerElement = this . gridContainerElement . querySelector (
271+ `.${ ROW_DETAIL_CONTAINER_PREFIX } ${ item [ this . datasetIdPropName ] }
272+ ) ;
273+ if ( this . _viewComponent && containerElement ) {
279274 // render row detail
280275 const componentOutput = this . angularUtilService . createAngularComponentAppendToDom (
281276 this . _viewComponent ,
282- containerElements [ containerElements . length - 1 ] ,
277+ containerElement ,
283278 {
284279 model : item ,
285280 addon : this ,
@@ -291,6 +286,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
291286 sanitizer : this . _grid . sanitizeHtmlString ,
292287 }
293288 ) ;
289+
294290 if ( componentOutput ?. componentRef ) {
295291 const viewObj = this . _views . find ( ( obj ) => obj . id === item [ this . datasetIdPropName ] ) ;
296292 if ( viewObj ) {
@@ -309,22 +305,21 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
309305
310306 protected disposeViewByItem ( item : any , removeFromArray = false ) : void {
311307 const foundViewIndex = this . _views . findIndex ( ( view : CreatedView ) => view . id === item [ this . datasetIdPropName ] ) ;
312- if ( foundViewIndex >= 0 && foundViewIndex in this . _views ) {
313- const expandedView = this . _views [ foundViewIndex ] ;
314- this . disposeView ( expandedView ) ;
308+ if ( foundViewIndex >= 0 ) {
309+ this . disposeView ( this . _views [ foundViewIndex ] ) ;
315310 if ( removeFromArray ) {
316311 this . _views . splice ( foundViewIndex , 1 ) ;
317312 }
318313 }
319314 }
320315
321316 protected disposeView ( expandedView : CreatedView ) : CreatedView | void {
317+ expandedView . rendered = false ;
322318 const compRef = expandedView ?. componentRef ;
323319 if ( compRef ) {
324320 this . appRef . detachView ( compRef . hostView ) ;
325321 if ( typeof compRef ?. destroy === 'function' ) {
326322 compRef . destroy ( ) ;
327- expandedView . rendered = false ;
328323 }
329324 return expandedView ;
330325 }
@@ -358,8 +353,10 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
358353 }
359354
360355 if ( ! awaitedItemDetail || ! ( this . datasetIdPropName in awaitedItemDetail ) ) {
361- throw new Error ( `[Angular-Slickgrid] could not process the Row Detail, you must make sure that your "process" callback
362- (a Promise or an HttpClient call returning an Observable) returns an item object that has an "${ this . datasetIdPropName } ) ;
356+ throw new Error (
357+ '[Angular-Slickgrid] could not process the Row Detail, you must make sure that your "process" callback ' +
358+ `returns an item object that has an "${ this . datasetIdPropName }
359+ ) ;
363360 }
364361
365362 // notify the plugin with the new item details
@@ -382,8 +379,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
382379 dataContext : args . item ,
383380 rendered : false ,
384381 } ;
385- const idPropName = this . gridOptions . datasetIdPropertyName || 'id' ;
386- addToArrayWhenNotExists ( this . _views , viewInfo , idPropName ) ;
382+ addToArrayWhenNotExists ( this . _views , viewInfo , this . datasetIdPropName ) ;
387383 } else {
388384 // collapsing, so dispose of the View/Component
389385 this . disposeViewByItem ( args . item , true ) ;
@@ -392,7 +388,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
392388
393389 /** When Row comes back to Viewport Range, we need to redraw the View */
394390 protected handleOnRowBackToViewportRange ( _e : SlickEventData < OnRowBackToViewportRangeArgs > , args : OnRowBackToViewportRangeArgs ) {
395- const viewModel = Array . from ( this . _views ) . find ( ( x ) => x . id === args . rowId ) ;
391+ const viewModel = this . _views . find ( ( x ) => x . id === args . rowId ) ;
396392 if ( viewModel && ! viewModel . rendered ) {
397393 this . redrawViewComponent ( viewModel ) ;
398394 }
0 commit comments