Qlik Community

New to Qlik Sense

Discussion board where members can get started with Qlik Sense.

humesh_sindpure
New Contributor II

Developing Extension - Custom Property for Table

Hello Sir, I am developing a extension for table.I have little problem in custom properties with the table. I have given a custom property to my table but it is not working. please give me solution for this problem.Here is my code

Here is my Template.html file

<div qv-extension style="height: 100%; position: relative; overflow: auto;">

  <table>

  <thead>

  <tr>

  <th ng-repeat="head in table.headers track by $index" qva-activate="head.orderBy()">{{head.qFallbackTitle}}</th>

  </tr>

  </thead>

  <tbody>

  <tr ng-repeat="row in table.rows track by $index">

  <td id="data" ng-repeat="cell in row.cells track by $index" class="selectable" ng-class="{'selected':cell.selected,'numeric':cell.qNum}" qva-activate="cell.select($event)">{{cell.qText}}{{layout.myColor}}</td>

  </tr>

  </tbody>

  </table>

  <button ng-if="table.rowCount>table.rows.length" qva-activate="table.getMoreData()" class="lui-button more">More...</button>

</div>

Below is my table.js file

define( ["qlik","jquery", "text!./style.css", "text!./template.html"], function (qlik, $, cssContent, template ) {'use strict';

    $("<style>").html(cssContent).appendTo("head");

  var palette = [

        "#b0afae",

        "#7b7a78",

        "#545352",

        "#4477aa",

        "#7db8da",

        "#b6d7ea",

        "#46c646",

        "#f93f17",

        "#ffcf02",

        "#276e27",

        "#ffffff",

        "#000000"

    ];

  return {

       template: template,

       initialProperties : {

  qHyperCubeDef : {

  qDimensions : [],

  qMeasures : [],

  qInitialDataFetch : [{

  qWidth : 10,

  qHeight : 50

  }]

  }

  },

  definition : {

  type : "items",

  component : "accordion",

  items : {

  dimensions : {

  uses : "dimensions",

  min : 1

  },

  measures : {

  uses : "measures",

  min : 0

  },

  sorting : {

  uses : "sorting"

  },

  settings : {

  uses : "settings",

  items : {

  initFetchRows : {

  ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",

  label : "Initial fetch rows",

  type : "number",

  defaultValue : 50

  }

  }

  },

  settings: {

  uses: "settings",

  items: {

  MyColorPicker: {

  label:"My color-picker",

  component: "color-picker",

  ref: "myColor",

  type: "integer",

  defaultValue: 3

  },

  }

  },

   customstylingtable: {

                        label: 'Table Styling & Settings',

                  

                        items: {

                     

                            tableoddcolor: {

                                type: "string",

                                label: "Total Odd color",

                                ref: "tableoddcolor",

                                defaultValue: "#ff",

                                expression: "optional"

                            },

                            tableevencolor: {

                                type: "string",

                                label: "Total Even color",

                                ref: "tableevencolor",

                                defaultValue: "#f2f2f2",

                                expression: "optional"

                            },

                        }

                    },

  }

  },

  support : {

  snapshot: true,

  export: true,

  exportData : true

  },

  paint: function () {

  if ( !this.$scope.table ) {

  this.$scope.table = qlik.table( this );

  }

  return qlik.Promise.resolve();

  },

  };

} );

And here is my style.css file

.qv-object-table div.qv-object-content-container {

  overflow: auto;

}

.qv-object-table td,

.qv-object-table th {

  border-top: 0px solid #fff;

  border-bottom: 1px solid #ddd;

  border-right: 1px solid #ddd;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  vertical-align: middle;

  cursor: default;

  font-size: 12px;

}

.qv-object-table td.numeric {

  text-align: right;

}

.qv-object-table button {

  width: 100%;

}

Community Browser