gridview with javascript

Mon, 26 Jan 2026 16:26:21 GMT

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

Re: gridview with javascript

Nicole-Smith — Thu, 26 Jul 2012 19:41:52 GMT

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

Re: gridview with javascript

Thu, 26 Jul 2012 20:34:03 GMT

Hi Nicole,

here are the files.

Thanks.

Karim.

Re: gridview with javascript

Nicole-Smith — Fri, 27 Jul 2012 13:07:54 GMT

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!

Re: gridview with javascript

Fri, 27 Jul 2012 21:16:10 GMT

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

I will let you know any news.

Thanks again.

Karim

Re: gridview with javascript

Thu, 02 Aug 2012 04:21:44 GMT

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

Re: gridview with javascript

Thu, 02 Aug 2012 09:07:09 GMT

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

topic Re: gridview with javascript in QlikView

gridview with javascript

Re: gridview with javascript

Re: gridview with javascript

Re: gridview with javascript

Re: gridview with javascript

Re: gridview with javascript

Re: gridview with javascript