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://ko.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
About point 1. What do you mean that the option is not there? I tested it in my sample and setting it this way works.
About point 2. You can take the parent row data with the following code:
$(document).on("iggriddatabinding", function (evt, ui) { if (!ui.owner.element.hasClass("ui-iggrid-root")) { 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); //modify your data source here ui.owner.options.requestType = "POST"; ui.owner.options.dataSource = "my data source"; } });
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);
Hi,What I meant from my statement is, despite writing it to be a post request, it is sending GET request only. New URL is getting hit, but its still a GET request.ui.owner.options.requestType = "POST";And, what i need in second option is ability to move up in the hierarchy i.e. suppose 2 levsls are there. When i expand grid at 0th level, i got another hierarchical grid, when I expand any row of this grid, I should be able to pass data from parent as well as parent's parent.The auto generated URL pass all the data up to root grid by concatenating them, but it pass data only of ID. A workaround i am using is, creating the ID which contains data from more than one column which I required and keeping the column hidden in display. That's how, i am able to send the desired data to server.
Got the point, ui.owner.options.requestType = "POST";
This option is not available in 2013.1 which i am using.
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:
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";