0 Replies Latest reply: Mar 19, 2018 1:40 PM by Humeshkumar Sindpure RSS

    Developing Extension - Custom Property for Table

    Humeshkumar Sindpure

      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%;

      }