jquery - fxDataGrid doesn't render -

i have issue rendering fxdatagrid using knockout. i've asked know , searched web, didn't find solution. here's problem.

i have html file rendering ui. code follows:

<div id="biab-power-user"> <div data-bind="if: ispoweruser">     <header>         <h2>boxes in use</h2>     </header>     <div id="tenant-power-user-box-grid"></div>     <div data-bind="if: boxremovevisible">         <button class="btn btn-primary" data-bind="click: removebox">decommision <span data-bind="text: selectedboxname"></span></button>         <div data-bind="if: showdecommissioningwarning">             <p>                 sure want decommision <span data-bind="text: selectedboxname"></span> box?                 <input type="button" class="btn btn-primary" value="yes" data-bind="click: handledecommissionbox" /> <input type="button" class="btn btn-default" value="no" data-bind="click: cancelremovebox" />             </p>         </div>     </div>     <section class="validation">         <span style="color: red" data-bind="visible: !!actionerror, text: actionerror"></span>     </section> </div> <div data-bind="ifnot: ispoweruser">     <section class="validation">         <span style="color: red">you not allowed view content of page.</span>     </section> </div> 

then have underlying js controller code, has several functions should bind data:

... var fxgridselector = "#tenant-power-user-box-grid"; var isgriddrawn = false; ... function loadboxes() {     controller.gettenantboxes().then(function (success) {                             setgriddata(success);             clearboxactions();         }, function (error) {             console.log(error);         }); }  function drawgrid(griddata) {     $(fxgridselector).fxdatagrid({         coulmns: [             { name: "name", field: "name" },             { name: "project", field: "projectname" },             { name: "team", field: "team" },             { name: "owner", field: "owner" },             { name: "gi version", field: "goldenimageversionname" }         ],         selectable: true,         multiselect: false,         rowselect: onrowselect,         data: griddata,         norows: "there no boxes in use."     });      isgriddrawn = true; }  function setgriddata(griddata) {     if (!isgriddrawn) {         drawgrid(griddata);         return;     }      $(fxgridselector).fxdatagrid({         data: griddata     }); } ... 

the rest of js isn't relevant problem. i've checked, , json returned rest call. according documentation , found, code should work. moreover, have identical code in different sections of ui (it differs in data rendered) , works. however, in particular html data doesn't want render.

can me this? i'd grateful. :)