Hi,
I have copy and pasted the code provided by Infragistics to Load data On Demand using Odata in IgTree.
Now, I wanted to modify the template that is been dispalyed. I wanted to add images to the tree nodes based on the category type.
//*********************** Start Code **********************************************
$(document).ready(function () {
var url = 'http://services.odata.org/OData/OData.svc/Categories?$format=json&$callback=?';
//creates new JSONP data source for OData
var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d" });
//Load on demand happens automatically using OData, the loadOnDemand option,
//and properly configured bindings
$("#tree1").igTree({
dataSource: jsonp,
dataSourceType: 'jsonp',
responseDataKey: 'd',
loadOnDemand: true,
bindings: {
textKey: 'Name',
valueKey: 'ID',
primaryKey: 'ID',
nodeContentTemplate:
"{{if $data.__metadata.type== 'ODataDemo.Category'}}<div class='category'><img src='../../Content/images/folder.png' style='height:20px;width:20px;border:none;' /><label>${Name}</label></div>" +
"{{/if}}",
childDataProperty: 'Products',
childDataProperty: 'Supplier',
valueKey: 'ID'
}
});
//***************************************End Code ************************
After using the custom template, whenever I hover over the Parent Node an extra image/style is getting displayed . The css styles responsible for this are ui-state-hover, ui-state-focus ...
I am not able to suppress/override these classes. Could you let me know where am I going wrong ? Any help is greatly appreciated.
I have checked that I have jquery.tmpl.min.js, ig.ui.min.js in correct order.
Thanks,
Anirban
Hi there,
The data does not need to be of oData type in order to use load on demand with the igTree. Please refer to the following sample for load on demand: http://samples.infragistics.com/jquery/tree/load-on-demand
Also I would suggest using absolutely or relatively positioned span. I believe right now your span is showing, but it's offset is 400/400 pixels below and to the left of your last element on the page. Try setting the position to absolute at 0/0 and see whether it is going to show up.
Thank you for using the Infragistics forums!
Here s what I have done to show the bubble up pop up. Doesn't work though:
@{
ViewBag.Title = "TreeView";
<h2>TreeView</h2>
<script type="text/javascript">
var offsetX = 20,
offsetY = 20;
$(".desc_hover").live('mouseenter', function (evt) {
var par = $(this).parent();
// if text is Tokyo Traders add image after node
//if ($(this).text() == "Tokyo Traders")
// if there is alredy added image do not add image again
if (par.find(">img").length < 2) {
var html = "<img class='favsport' src='../../Content/images/Football.png' title='Folder' style='border:none;width=20px;height=20px' id='imgdiv'></img>";
par.append(html);
var o = {
left: evt.pageX,
top: evt.pageY
};
$("#test").show(2000).offset({left: 400, top: 400 });
$(".desc_hover").live('mouseleave', function (evt, ui) {
par.find($('#imgdiv')).remove();
//and properly configured bindings ><img class='favsport' src='../../Content/images/folder.png' alt='football' style='display: none;'></img>
nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
nodeContentTemplate: "<span data-tag><img class='favsport' src='../../Content/images/file.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"
</script>
<div class="content clearfix">
<!-- side nav begins here -->
<div id = "test1" class="side-nav">
<div id="tree1">
<p>Anirban</p>
</div>
<!-- side nav ends here -->
<section class="main-box">
<hgroup>
<h1>
Infragistics TreeView Control</h1>
<h2>
Load on demand </h2>
<p>
The other grid will go here</p>
</hgroup>
<div class="sampleContainer">
<!--igTree target element-->
<div id="sampleContent">
</section>
<span id="test" style="display:none;">This is a test</span>
Thanks Nadia for your help.
I have 2 questions in this regard :
1) I am using the Infragistics servicce as of now. The actual service will return JSON and not ODATA. In that case will LoadOnDemand work ?
2) The mouseover does not open up a popup. Could you please take a look on the dummy files that I have attached in my previous post. Cant upload the entire solution because the file size exceeds 200KB .
Hi Anirban,
When you are setting nodeContentTemplate it is appled for a current level and you don't need the "if" in the nodeContentTemplate.
Also you can try to cahnge image src from "../../Content/images/folder.png" to "/Content/images/folder.png", if the image src is not correct this image won't be previewed in the node
You can try with this:
if ($(this).text() == "Tokyo Traders")
if (par.find(">img").length < 2)
par.append("<img class='favsport' src='images/book.png' title='Folder' style='border:none;width=20px;height=20px'></img>");
alert("Mouse Leave");
nodeContentTemplate: "<img class='favsport' src='/Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
nodeContentTemplate: "<img class='favsport' src='/Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
nodeContentTemplate: "<span data-tag><img class='favsport' src='/Content/images/folder.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"
I am uploading the only the files which are required for this requirement.