val gridCatalog = new GridCatalogs()

val onChoiceItem = SinkObserver.create[ ( String, String ) ]{ case ( id, description ) =>
    grid.hdlRowActive.foreach { idx =>
      store.store.onNext (
        store.UpdateIdx(idx, Tenderer (id_comparative = "100-2019-ADQ2",key_provider = id, business_name = Some(description)))
        )
    }
    hdlCatalog.onNext(Seq.empty)
    Continue
  }

 val gridCatalogSearchResult = grid.hdlPositionCursor.combineLatest ( hdlCatalog ).map { case ( pos, catalog ) =>
    val cata = catalog.map ( i => i._1 -> i._2 ).toMap
    if (!catalog.isEmpty)
      Some(gridCatalog.render(cata, pos, cata.isEmpty, onChoiceItem))
    else
      None
  }

  def mainGrid ( items: Map [ Int, Map [ String,String ] ] ) =
    div ( clear.both, marginTop := "40px",
        grid.render ( items ),
        gridCatalogSearchResult
    )

  def render =  store.store.switchMap { case (a, s) =>        // concatMap or switchMap { s =>       // for { s <- store.store } yield {
    val dataGrid = s.tenderers.items.zipWithIndex.map { case ( prov, i ) =>
        i -> Seq ( "rfc" -> prov.key_provider, "proveedor" -> prov.business_name.getOrElse ( "" ) ).toMap
    }.toMap
    Observable ( mainGrid(dataGrid) )
    )
  }

///*****
class GridCatalogs {
  def render ( values: Map[String, String], pos: (Int, Int), hid: Boolean, onClickItem: SinkObserver[(String, String)]) =
      table ( key := "gridCatalog", cls := "gridCatalog", width := "500px", height := "20px", position.absolute, zIndex := 1000002,
                top := pos._1.toString + "px", left := pos._2.toString + "px", //hidden := (if(hid) true else false),
        thead( tr( td( "Id", textAlign := "Center" ), td ( "Descripción", textAlign := "Center" ) ) ),
        tbody (
          values.map { case ( k, v ) =>
                tr ( onClick.use( ( k, v ) ) --> onClickItem,
                  td(k, textAlign := "Justify", width :="30px"),
                  td(v, textAlign := "Justify", width :="100px")
                )}.toList
        )
      )
}