[sushanth009Member]

Thanks for the Input.. That seems to be working now..

I tried setting the margin-left for the title to move it a bit left//

The part of the text that moves seems to be moving under the container. Any way to fix this..

Thanks
Sushanth

[sushanth009Member]

Hello Peter,

It was the same problem here. I do not have a form on the page and I was trying to hide those validators.. Fixing this made the code work.

Thanks
Sushanth

[sushanth009Member]

Hi,

I think there was something wrong with the way I wrote up the code.. I want using separate validator’s instead of using a form.. I did some changes and it seems to be working now..

Thanks
Sushanth

[sushanth009Member]

Hey Peter,

I have downloaded the latest version and the tracking is working as expected. thanks for your feedback.

Thanks
Sushanth

[sushanth009Member]

Hello Dimitar,

The json object used for this method is

 var result = [
   {
      "Cos":"5163.81",
      "Mon":"9/2011"
   },
   {
      "Cos":"3854.58",
      "Mon":"10/2011"
   },
   {
      "Cos":"3794.45",
      "Mon":"11/2011"
   },
   {
      "Cos":"3892.87",
      "Mon":"12/2011"
   },
   {
      "Cos":"3759.38",
      "Mon":"1/2012"
   },
   {
      "Cos":"3842.94",
      "Mon":"2/2012"
   },
   {
      "Cos":"3462.44",
      "Mon":"3/2012"
   },
   {
      "Cos":"3564.41",
      "Mon":"4/2012"
   },
   {
      "Cos":"3593.97",
      "Mon":"5/2012"
   },
   {
      "Cos":"4752.73",
      "Mon":"6/2012"
   },
   {
      "Cos":"4484.10",
      "Mon":"7/2012"
   },
   {
      "Cos":"4984.44",
      "Mon":"8/2012"
   }
]

And the Code that is used to populate the Graph is..

drawCharts = function(result) {
    try {
        var source = {
            datafields: [{ name: 'Mon' }, { name: 'Cos' }, { name: 'Usg'}],
            localdata: result,
            datatype: 'array'
        };
        var cMaxValue = 0;
        var cMinValue = 0;
        var uMinValue = 0
        for (var i = 0; i < result.length; i++) {
            if (parseFloat(result[i].Cos) > cMaxValue) {
                cMaxValue = parseFloat(result[i].Cos);
            }
            if (parseFloat(result[i].Cos) < cMinValue) {
                cMinValue = parseFloat(result[i].Cos);
            }
        }
        if (cMaxValue != 0) {
            cGraphInterval = Math.round((cMaxValue + 1) / 10);
        }
        else {
            cGraphInterval = 1000;
        }
        $('#cost').jqxChart(chartSettings(source, 'Cost', 'Cos', cGraphInterval, cMinValue, cMaxValue));
        
    }
    catch (e) {
        alert('drawCharts !! ' + e);
    }
};
chartSettings = function(source, txt, dtField, graphInterval, minValue, maxValue) {
    var dataAdapter = new $.jqx.dataAdapter(source);
    var settings = {};
    settings = {
        title: txt + " - Last 12 months",
        showLegend: true,
        source: dataAdapter,
        enableAnimations: true,
        padding: { left: 30, top: 20, right: 15, bottom: 30 },
        titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
        categoryAxis: {
            text: 'Category Axis',
            dataField: 'Mon',
            showGridLines: true,
            textRotationAngle: -87,
            axisSize: 'auto',
            textInsideIntervals: true
        },
        colorScheme: 'scheme01',
        seriesGroups:
                [
                    {
                        type: 'line',
                        valueAxis:
                            {
                                unitInterval: graphInterval,
                                minValue: minValue,
                                maxValue: maxValue + 1,
                                displayValueAxis: true,
                                description: txt
                            },
                        series: [
                                    { dataField: dtField, displayText: txt }
                                ]
                    }
                ]
    };
    return settings;
}

The graph is being populated but not able to track with the mouse

[sushanth009Member]

POST SOLVED…

[sushanth009Member]

Hello Peter,

I just realized that when trying different possibilities.. Thank you for your quick feedback..

[sushanth009Member]

It tried doing it but was not able to pin point the exact boundaries of it.
Also once I made the iconscontainer class display:none , the click event seems to work.. I could handle the issue in that event itself.. Thanks for the input Peter.

Sushanth

[sushanth009Member]

Hello Peter ,

I am doing that currently but was not sure that it would work correctly.. I will try again and see where I am doing a mistake. maybe I am not changing the value of the Json result properly.

Thanks
Sushanth

[sushanth009Member]

Hello Peter ,

I tried using the event.target property but no matter where I click inside the div , the same functions were being called irrespective of where it was clicked.. Can you give me a small snippet of how this has to be done..

There are two divs inside this column.. One div with class – pdf-image and second div with class checkbox-image.

I want to call two different functions when clicked on each div…

 $('#grid').on("columnclick", function(event) {
                if (event.args.column.text == "dummyCheck") {  // This makes sure columnClick works for only this column
                       
                }
});

Doing this I saw that the event.target’s class was always being jqx-grid and other wrapper classes. To access the div in which the divs were I did this

 $tar = $(event.target.childNodes[1].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[0]);

This gave me the div with pdf-image class div.

I tried doing this but was of no use..

$('#grid').on("columnclick", function(event) {
                if (event.args.column.text == "dummyCheck") {
                    $tar = $(event.target.childNodes[1].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[0]);
                    $tar1 = $(event.target.childNodes[1].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[1]);
                    if ($tar.is('div.pdf-image')) {
                        alert('pdf Clicked');
                    }
                    if ($tar1.is('div.checkbox-image')) {
                        alert('Checkbox Clicked');
                    }
       }
});

But both functions are being called no matter where I clicked , because the condition what I wrote is always true..
Can you help with out with this.

Thanks
Sushanth

[sushanth009Member]

Setting the columnsheight seemed to help. I was trying to set that in the ‘bindingcomplete’ event. Maybe that is the reason the height was not changing.

Also regarding the Image tooltip , I was not able to see it because the the div with iconscontainer class was overlapping it..
When I made the display : none .. hola… I could see the tool tip.. Maybe it was because of the z-Index.

[sushanth009Member]

I tried using columnsheight property but it was of no use.. The header height was showing the default value.

[sushanth009Member]

I will try that right away. i tried testing on chrome and firefox.
jQuery version – 1.7.2
jQWidgets version – v2.0.0 (2012-April-06)

Thanks
Sushanth

[sushanth009Member]

I increased the size of the header column by overriding the default height of 20px.
So I modified

.jqx-grid-header-energyblue /* jqx Grid Header */
{
    height: 40px !important;
    
}

After doing this I am using the same renderer function but removed the second image from it so as to provide more space for the image..
The height of the header increased but I am still not able to see the title of the pdf image..

Thanks
Sushanth

[sushanth009Member]

Hey Peter,

This is my renderer function . I am displaying the two image in the header . After the grid is rendered I see the Images but do not see the titles on it.. This is my function.

var headercheckboxRenderer = function(value) {
    return '<div style="margin:2px 4px 2px 4px;position:absolute"  ><div style="margin-bottom:2px"><img id="pdfSelectAll"  src="../../Images/bill-image.png" title="Click to Merge selected Bill Images." alt="PDF" ></img></div><div><img id="chkboxSelectAll" class="image-unchecked"  src="../../Images/checkbox_off.png" title="Select All"/></div></div>';
}

[Author]

Posts