In the Load on Demand example here (http://www.igniteui.com/tree-grid/load-on-demand) is it possible to create the grid using PHP and also have searching capabilities for the grid?
Thanks
Hello Nifty,
Yes. It is possible. The treegrid sends the remote request to load the data on demand in the following format : ? path = (primaryKey of root)/(primaryKey of parent)/… & depth=(depth of the currently bound level). So you’ll have that information on the server side and based on it you can return the json data which should be displayed on the related level.
For instance in the online sample at http://www.igniteui.com/tree-grid/load-on-demand when expanding the following request is send: ChildEmployeesOnDemand?path=381&depth=0&pk=ID&expand=true
Where 381 is the primary key of the row and the depth of the currently expanded row, which is 0 (since this is the root level).
On the server side based on those parameters sent as part of the query string, you can build the Json data for the particular child rows.
For details refer to the following article from our documentation:
http://www.igniteui.com/help/igtreegrid-load-on-demand
If you want to enable other remote operations like sorting, filtering or paging you would need to handle the remote operations in a similar way – by getting the related parameters from the request’s query string , applying the related operation manually on the data and returning that data in Json format to the client so the grid can bind to it.
There’s a similar example of how remote features can be handled here:
http://www.igniteui.com/tree-grid/remote-features
We plan on providing MVC wrappers for the TreeGrid that would handle remote operations out of the box, however at this time there are no plans on adding PHP wrappers.
So you'll need to handle the server side data manipulation manually.
Please let me know if you have any questions.
Best Regards,
Maya Kirova
Hi Maya,
Is it possible for you to upload a simple example for "Load On Demand" or "Remote Features" Tree grid with JSON data that is pure JS and JSON and not ASP.net? I just wanted to understand this in a basic fashion.
I have uploaded an example that I am working with and I am not able to get it working, using the documentation provided.. You can download the example here:
http://s000.tinyupload.com/index.php?file_id=14634908027888837944
The First AJAX request should go to level0.json and should load the name and description from there.
When the parent on the first level is clicked, it should make an AJAX request to level1.json.
When the parent on the third level is clicked, it should make an AJAX request to level2.json.
I really appreciate if you can make the required changes to this example to present it in a treegrid on demand.
Unfortunately I was not able to download the file from that source. It seems that it’s marked as unsafe and any downloads from there get blocked by our firewall.
Is there any chance you can upload it here?
Generally you can’t implement any remote feature without a server logic that manages which json gets returned based on the request’s query string.
There’s a single property – dataSource(http://help.infragistics.com/jQuery/2015.1/ui.iggrid#options:dataSource ) that determines the url from which the data will be retrieved.
So if you’ve setup something like this:
dataSource: "\jsonLevel0.json"
You’ll always be getting the same level.
There’s no way out of the box to implement remote load on demand or any other remote feature purely on the client-side. The purpose of the remote features is to have a remote service or other server side endpoint that handles the request and returns the appropriate data in JSON format. The technology that stands behind it doesn’t really matter (it could be Asp.net MVC controller, Java servlet or anything else that can return JSON).
Let me know if that's what you're aiming to achieve or if you want to manually implement something similar purely on the client-side.
I’m looking forward to your reply.
I can't seem to find a way to upload the file here... But here's the gist for you.. In the HTML file, even though I am trying to load only level0.json first, I am not seeing it load in the browser. I can easily tweak it to talk to a PHP file instead later on.
Here's the source of the HTML file:
<code>
<html><head> <title></title> <!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/infragistics.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/modules/infragistics.ui.treegrid.css" rel="stylesheet" /> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.lob.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/modules/infragistics.ui.treegrid.js"></script> <script type="text/javascript"> $(function () { $("#treegrid").igTreeGrid({ dataSourceUrl : "\level0.json", dataSourceType : "json", dataSourceSettings : { propertyExpanded: "isExpanded", propertyDataLevel: "dataLevel" }, width: "100%", primaryKey: "naturalId", autoGenerateColumns: false, columns: [ { headerText: "", key: "naturalId", width: "20%", dataType: "string" }, { headerText: "Name", key: "name", width: "30%", dataType: "string" }, { headerText: "Description", key: "description", width: "50%", dataType: "string" } ] }); }); </script></head><body> <div id="treegrid"></div></body></html>
</code>
The JSON file has the following:
{ "data": [ { "naturalId": "userid:john", "name": "John", "description": "1 Person reports to John", "childCount": 1 }, { "naturalId": "userid:susan", "name": "Susan", "description": "5 people report to Susan", "childCount": 5 } ]}
I'm checking to see whether you were able to resolve your issue. Let me know if you have further questions regarding this subject.
Best regards,Martin PavlovInfragistics, Inc.