Hi ,
I am developing a SPA application using JavaScript and I am facing issues binding data to a ig grid.
Please help me with the following . I am attaching a sample project
1) On index.html I had to comment infragistics.datasource.knockoutjs.js and infragistics.ui.grid.knockout-extensions.js . when I uncomment those files I get an error on IE11 like
“Unhandled exception at line 1, column 1 in http://localhost:52306/js/extensions/infragistics.datasource.knockoutjs.js
0x800a1391 - JavaScript runtime error: 'define' is undefined”
IE11 is our default browser and we need the ig grid to be working on IE11.
2) On Search results page which is the loaded as the default .
I have defined a template and a js-hook to display results
var template = '\n\t\t<section class="search" js-hook="search">\n\t\t\t<h1><span js-hook="total"></span>' +
'Search Results for ‘<span js-hook="term"></span>’\n\t\t</section>\n\t\t'+
'<section class="results" js-hook="results">\n\t\t\t'+
'<header>\n\t\t\t\t<div class="category bpid-header"><img src="/assets/updown.svg" /><span>BPID</span></div>\n\t\t\t\t' +
'<div class="category name-header"><img src="/assets/updown.svg" /><span>Name</span></div>\n\t\t\t\t' +
'<div class="category status-header"><img src="/assets/updown.svg" /><span>Status</span></div>\n\t\t\t\t' +
'<div class="category date-header"><img src="/assets/updown.svg" /><span>In-Service Date</span></div>\n\t\t\t</header>\n\t\t\t' +
'<div class="results-list" js-hook="results-list">\n\t\t\t</div>\n\n\t\t\t' +
'<div class="pagination">\n\t\t\t\t<img class="arrow-left" src="/assets/down_grey.svg" />\n\t\t\t\t' +
'<div class="page">1</div>\n\t\t\t\t<div class="page selected">2</div>\n\t\t\t\t<div class="page">3</div>\n\t\t\t\t' +
'<div class="page">...</div>\n\t\t\t\t<div class="page">10</div>\n\t\t\t\t '+
'<img class="arrow-right" src="/assets/down_grey.svg" />\n\t\t\t</div>\n\t\t</section>\n\t\t\t\t' +
'<div class="results-ig-list" js-hook="results-ig-list">\n\t\t\t</div>\n\n\t\t\t' ;
3) I also defined JSON data to bind
var jsonSearchResults = JSON.parse("[{\"LOOKUPID\":1043700.0,\"EPMBPID\":\"A13007135\",\"EPMBPIDNAME\":\"A13007135 CARRIZO SPRINGS REGULATOR REPL\",\"PCPLMPPROJECTSTATUSID\":\"Constr b\/w Gates 4-5\",\"P6PROJECTEDINSERVICEDATE\":\"2014-06-30T00:00:00\"}]");
When I bind this JSON Data to a div results-list like
$("[js-hook='searchresults-element'] [js-hook='results-list']").html(results);
I am able to display the results.
Below the div results-list I am trying to display the same data on div results-ig-list where I am trying to inject a iggrid
Basically I want to use ig grid to display data
I have declared a grid
var grid = '<table id="gridMain_1" style="font-size:10px" data-bind="igGrid: { '+
'height: "100%", '+
'width: "100%", '+
'dataSource: data, '+
'primaryKey: "LOOKUPID",'+
'autoGenerateColumns: false, '+
'virtualization: true, '+
'virtualizationMode:"continuous", '+
'enableAddNewRow: false, '+
'columns: [ '+
'{ key: "LOOKUPID", dataType: "number", hidden: true,headerText: "Look Up Id"}, ' +
'{ key: "EPMBPID", dataType: "string", headerText: "BP ID" }, '+
'{ key: "EPMBPIDNAME", dataType: "string", headerText: "Project Name"}, '+
'{ key: "PCPLMPPROJECTSTATUSID", dataType: "string", headerText: "Status" }, '+
'{ key: "P6PROJECTEDINSERVICEDATE", dataType: "string", headerText: "In Service Date" }, '+
'], '+
'features: [ '+
'{name:"Paging",' +
'type:"local", '+
'pageSize:10 '+
'}, '+
'{name: "Resizing"}, '+
'{name: "Updating", '+
'enableAddRow: false, '+
'enableDeleteRow: false, '+
'showDoneCancelButtons: false, '+
'editRowStarting: function(evt, ui) { return false } } ] }"></table>';
Then I try to inject the grid
$("[js-hook='searchresults-element'] [js-hook='results-ig-list']").html(grid);
But nothing appears . Also how do I bind data to this injected grid ?
self.data(jsonSearchResults);
$('#gridMain_1').igGridPaging('pageIndex', 0)
Self.data(jsonSearchResults) returns a error
My questions?
1) Why am i getting those reference
2) How do I inject the grid to my DOM?
3) How do I bind data? Can you show me in the example above?
I have attached my sample project.
Hello,
Technically, it is possible but I cannot advise to take the route demonstrated in the sample provided as this is following bad practices and will be problematic to develop and maintain regardless of application size. Also, this is not an issue specific to our controls, therefore, I will not be providing a sample on this specific scenario.
I recommend taking a look at this site for a sample on how to create a SPA utilizing knockout:
https://knockout-spa.mybluemix.net/
We have a very simple read only application with a search page and a results page. We don't anticipate it to grow. Can we use ig grid to display results by dynamically injecting this into the page ? If yes can you please show us a sample?
Thanks
Kiran
The approach you are taking in this scenario is very different and not a very practical approach as your application continues to grow larger and require more routes. The recommended approach to creating a SPA is to componetize your UI elements and dynamically add them into the page based off the current router state or a user's interaction with the page. The router's function is to take a user to a different "page" although underneath the hood the page did not change and the contents of the page have been "swapped" out.
Here is an open source solution that you can look into for setting up a SPA using knockout:
https://github.com/onlyurei/knockout-spa
I recommend rethinking your approach as having your templates as strings and dynamically injecting this into the page using jQuery's html function is not a great idea.
Let me know if you have any questions.