Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content

Announcements
Join us in Bucharest on Sept 18th for Qlik's AI Reality Tour! Register Now
cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

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();

6 Replies
Nicole-Smith

Can you upload the javascript files that you're loading in (and the CSS file)?

Not applicable
Author

Hi Nicole,

here are the files.

Thanks.

Karim.

Nicole-Smith

I changed a few things in your script.js file, and I moved all of the files into one folder that hangs off of the Extensions/Objects folder (I have attached the files).  Once I did this, I was at least able to get some alerts to work throughout the script file.

There are two alerts that I left in your file to figure out what is going wrong.  The problem is here:

Event.observe(document, 'dom:loaded', function () {

                    alert('In Event.observe');

                    tableGrid = new MY.TableGrid(tableModel);

                    tableGrid.show('mytable');

});

The extension never goes into that function, which is what you need to render the chart.  I don't know enough about the libraries that you're using in order to fix this issue.

I hope this information is helpful to you!

Not applicable
Author

Hi Nicole, thanks for your help, I will studying the function. !!!

I will let you know any news.

Thanks again.

Karim

Not applicable
Author

Hi Nicole,
I found the way to show te grid view. Thanks for your comments.
I am attaching the code , maybe someone else can use and extend it.

Do you knwo Where I can find out the help for definition.xml file ?

Can you help me to find out, why the the qv.document.data only has a few records of the DataTable!?

Thanks in advance.
Karim

Not applicable
Author

Hi Karim,

You can refer to http://community.qlik.com/message/171123 for documentation on definition.xml file.

You can refer to http://community.qlik.com/thread/46390 for limited number of records displayed.

Regards,

Xue Bin