6 Replies Latest reply: Aug 2, 2012 5:07 AM by Bin Xue RSS

    gridview with javascript

      Hi, community.

       

      I read the beginners guide to qlikview extension, and I have the concernt to extend a javascript grid view.

       

      I've been searchingh in internet tutorials, qlikview questions and answers, without full success.

      I can't integrate the scripts into my extension object.

       

      I am attaching my code, may be I am doing something wrong.

       

      The basic goal for this stuff, is get a gridview with full navigation in the cells.

       

      I will appreciate any kind of help to get this working.

       

      Thanks in advance.

      Karim.

       

      function BasicTable_Init()
      {
       Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/ksb/BasicTable/scripts/prototype/1.6.1/prototype.js", function(){
        Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/ksb/BasicTable/scripts/scriptaculous/scriptaculous.js", function(){
         Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/ksb/BasicTable/scripts/myui/myui.js",BasicTable_Done);
        });
       });
      }
      function BasicTable_Done()
      {
       Qva.AddExtension('ksb/BasicTable',
       function() { 
         Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/ksb/BasicTable/scripts/css/main.css");
         // Local variable to hold the reference to QlikView 
         var _this = this; 
         var iFrameWidth = _this.GetWidth();
         var iFrameHeight = _this.GetHeight();
         // function to handle users clicking on a row 
         window.oncvlrowclick = function(rowIx) 
         { 
          _this.Data.SelectRow(rowIx); 
         }
         var main = '<div id="mytable" style="position:relative; width: '+iFrameWidth+'px; height: '+iFrameHeight+'px;">lets see</div>';
         this.Element.innerHTML = main;
         var tableModel = {
          options : {
           title: 'INBOX: john',
           pager: {
            total: 200,
            pages: 0,
            currentPage: 1,
            from: 1,
            to: 100
           },
           rowClass : function(rowIdx) {
            var className = '';
            if (rowIdx % 2 == 0) {
             className = 'hightlight';
            }
            return className;
           }    },
          columnModel : [
           {
            id : 'id',
            title : '#',
            width : 30,
            sortable : false
           },
           {
            id : 'from_name',
            title : 'From',
            width : 140
           },
           {
            id : 'subject',
            title : 'Subject',
            width : 205
           },
           {
            id : 'received_date',
            title : 'Date',
            width : 100
           },
           {
            id: 'comments',
            title: 'Comments',
            width: 100
           },
           {
            id: 'assigned_to',
            title: 'Assigned To',
            width: 100
           }
          ],
          rows : [
           [1,'jim@theshadestore.com', '8990280', '11/05/09', 'test of how long an edit box can be...i hope really long.',''],
           [2,'jim@theshadestore.com', 'Re: Order # 8881804', '11/06/11', 'test of how long an edit box can be...i hope really long.','zach'],
           [3,'jim@theshadestore.com', 'RE: 8951062/ 4372288', '11/06/11', 'test of how long an edit box can be...i hope really long.',''],
           [4,'jim@theshadestore.com', 'RE: 7920610 / 4297576', '11/06/11', 'test of how long an edit box can be...i hope really long.',''],
           [5,'jim@theshadestore.com', 'Re: segal GBR shade', '11/06/11', 'test of how long an edit box can be...i hope really long.',''],
           [6,'jim@theshadestore.com', 'RE: 6654030', '11/06/11', 'test of how long an edit box can be...i hope really long.',''],
           [7,'jim@theshadestore.com', 'Re: Fwd: Faulty Shade', '11/06/11', 'test of how long an edit box can be...i hope really long.',''],
           [8,'ann@theshadestore.com', 'Re: IN BIN 11/5', '11/06/11', 'test of how long an edit box can be...i hope really long.',''],
           [9,'support@theshadestore.com', 'Re: Frances Herrera -- 9152309', '11/06/11', 'test of how long an edit box can be...i hope really long.',''],
           [10,'jim@theshadestore.com', 'RE: Order # 2987393', '11/06/11', 'test of how long an edit box can be...i hope really long.','']
          ]
         }; fd
         var tableGrid = null;
         Event.observe(document, 'dom:loaded', function() {
          tableGrid = new MY.TableGrid(tableModel);
          tableGrid.show('mytable');
       });
        },true);
      }
      BasicTable_Init();