Hi All,I have an requirement that i need to load data on demand for igHierarchicalGrid. I am not able to give configuration of datasource using either ODATA or REST settings. What i need is, when user clicks on expand button, then there should be one request made to my server which returns data only for that subchild.
The major issue I am facing is not able to give datasource or dataUrl from which, data will be loaded on the fly. Whatever examples i am getting is for ASP.NET MVC, which is of no help to me. I tried setting the dataSource in ColumnLayout as path to my request, but I am getting error as: Uncaught TypeError: Cannot read property '__deferred' of undefinedAnd also, i will need that while querying server, how can I send data or parameters in the request, the parameter should be set from the entries of the parent row which is getting expanded, NOT NECESSARY THE PRIMARY KEYI tried the approach at http://es.infragistics.com/community/forums/t/79652.aspx, but failedAny sort of help will be appreciatedRegards,
Hello Vardhan, Vivek,
I'm wondering which version of oData protocol you're using? Do you have a sample for replicating your issue so I can investigate it?
Thanks in advance,Martin PavlovInfragistics, Inc.
Hi,I got the hierarchical grid working without ODATA,I am able o send the GET request to the server on expand and fetch the customized data. But, I have another issue, HOW CAN I CUSTOMIZE THE REQUEST sent to server.My configs:
function getColumnConfigurationByLevels(configs,levels,businessDate){ var jsonData = new $.ig.JSONPDataSource({ dataSource: "myURL", type: "remoteUrl", requestType: 'post' }); var hierarchicalGridConfigs={ width: "100%", initialDataBindDepth: 0, dataSource: jsonData, oData:false, rest:false, autoGenerateLayouts: false, autoGenerateColumns:false, key:"myDate", primaryKey:"id", columns:getDefaultColumns(), columnLayouts: getColumnLayouts(0,configs,levels-1) }; return hierarchicalGridConfigs;}function getColumnLayouts(i,configs,levels){ var layouts=[]; var layout1={}; layout1["autoGenerateColumns"]= false; layout1["odata"]= false; layout1["primaryKey"]="id"; layout1["key"]=getKey(configs); layout1["columns"]=configs[i]; if(i<levels){ layout1["columnLayouts"]=getColumnLayouts(++i,configs,levels); } layouts.push(layout1); return layouts;}
I am able to hit server on that URL, with parameters appended by igNite UI, but i want to customize it because I will NOT necessary send only key or primary key to server. I can need more information. How can i customize it.When I click on expand button, URL generated is like myURL?id:value&layout:layout&pk=id&_=someNumber Layout: is the key that I provides in the child layoutsID: is Id of parentI am not able to customize itI want1) A POST REQUEST2) More customized parameters wher eI can send other information that primary key of parent grid
Try with handling the igGrid.dataBinding event and in the event handler set the requestType and dataSource options.
Here is an example code:
$(document).on("iggriddatabinding", function (evt, ui) { //skip the event for the igHierarchicalGrid itself and only handle the child grids if (!ui.owner.element.hasClass("ui-iggrid-root")) { //modify your data source here ui.owner.options.requestType = "POST"; ui.owner.options.dataSource = "my data source"; } });
$(document).on("iggriddatabinding", function (evt, ui) {
//skip the event for the igHierarchicalGrid itself and only handle the child grids
if (!ui.owner.element.hasClass("ui-iggrid-root")) {
//modify your data source here
ui.owner.options.requestType = "POST";
ui.owner.options.dataSource = "my data source";
}
});
Hope this helps,Martin PavlovInfragistics, Inc.
Hi,I am trying what you said. A few issues:1) ui.owner.options.requestType = "POST"; option is not there2) I need to pass some parameters in the request, the parameters will be from parent row, how can i get those parameters??I am able to change the datasource URL as told by you, it is working,but still facing issue in parameters (from parent grid row) and changing to POST
Sorry to revive an old thread, but this approach seems to be what I'm looking for. I am getting the following error when I try to set the .dataSource in the last line to a web API URL (which does work correctly when requested in Fiddler):
"There was an error parsing the JSON data and applying the defined data schema: Cannot read property 'Metadata' of null"
Can anyone help me with what I am doing wrong?
Hello Vivek Vardhan,
I'm glad that you find this information helpful.
Please let me know if you need further assistance with this matter.
Best regards,Martin Pavlov
The ui.owner.element.parents("tr[data-container='true']").prev() will return you all the parent rows up in the hierarchy. And the ui.owner.element.parents("table.ui-iggrid-table") will return you all the parent igGrid instances up in the hierarchy. You just need to iterate over them and extract the required information.
Hi,Thanks for your help. one last question in this context is:
var parentRowId = ui.owner.element.parents("tr[data-container='true']").prev().data("id"),
parentGrid = ui.owner.element.parents("table.ui-iggrid-table").data("igGrid"),
parentRowData = parentGrid.findRecordByKey(parentRowId);Above statements are helping me in getting the parent row data, but suppose there are multiple levels of grid in hierarchy. How can I get the data of all the ancestors?
For the "POST" problem what I can suggest is that you use $.ajaxPrefilter. Here is a sample code:
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) { options.type = "POST"; });
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
options.type = "POST";