[SRKParticipant]

Hi Dimitar,

Thanks for the reply, for the above method tool tip would be displaying for the Text mentioned in the Grid Column like

columns: [
{ text: ‘Year’, …..}

Then Grid Column is diplaying Tool tip as “Year”

But requirement is default display text should be short and on mouse over it should display abbrevation of the text

Ex : Grid Column Name : “US”
And on Mouse over of the “US” column it should display “United States”

is that possible in Jqxgrid?

Regards,
/SRK

[SRKParticipant]

Thanks for the Reply Peter

In the previous post you have suggested to add one extra DIV tag to display the 2nd grid in the same level.

My scenario is when the first level of the grid is expanded , it should display two individual grids with different columns in the second level .
and on further expanding of Individual grids it should display next level of hierarchy data. could you provide me some inputs how to achieve this…

Regards,
/Srinivas

[SRKParticipant]

Hi Peter,

For the above query , i found the solution to maintain the state of the column header click event. but still i couldn’t found any property in the grid to set jqxCheckbox get ‘checked’ or ‘unchecked’ on ColumnHeaderClick event.

Regards,
/Srinivas

[SRKParticipant]

Hi Peter,

For the second query :

1. I have tried adding Image in the column header instead of jqxCheckbox, and for the rows i am using jqxCheckboxes, it do worked.
2. On ColumnClick event ,it is selecting all the rows but the issue was how to make the rows Jqxcheckboxes state to be changed from UnCheck to Check or vice versa on the column header click.
3. And how to Deselect(and Uncheck JqxCheckboxes) in all the rows on the ColumnClick event as we are not maintaining any state for the columnHeader click event.

Regards,
/Srk

[SRKParticipant]

Thanks for the reply peter

I have few more questions

For the Jqxgrid:
1. Could we able to set Column Name Text dynamically.
2. Adding Checkbox Column to the grid with (select all option) Checkbox Header.

Regards,
/Srinivas

[SRKParticipant]

Yes Peter, Visual Studio 2010 is giving default jQuery 1.4.2 but we have referred which was mentioned in the Demo code i.e, jQuery 1.7.2 version.
Online Demo and .htm file is working fine in IE browser

Regards,
/Srinivas

[SRKParticipant]

Copy the online demo paging code to new asp.net application(4.0 framework) and add the reference (script/css) files to the solution and map to the solution directory and build and execute it, In IE will get the issue. (or else please find the below code).

This example shows how to enable the paging feature of the Grid.

<%-- --%>

$(document).ready(function () {
var theme = getTheme();
var url = "../sampledata/orders.xml";
var parentsLength = $("#jqxWidget").parents().length;
if (parentsLength > 3) {
url = '../sampledata/orders.xml';
}
// prepare the data
var source =
{
datatype: "xml",
datafields: [
{ name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
{ name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
{ name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
{ name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
{ name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
{ name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
],
root: "entry",
record: "content",
id: 'm\\:properties>d\\:OrderID',
url: url,
sortcolumn: 'ShipName',
sortdirection: 'asc'
};
$("#jqxgrid").jqxGrid(
{
width: 670,
height: 450,
source: source,
theme: theme,
sortable: true,
pageable: true,
altrows: true,
autoheight: true,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250 },
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
{ text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
]
});
$('#events').jqxPanel({ width: 300, height: 300, theme: theme });
$("#jqxgrid").bind("pagechanged", function (event) {
$("#eventslog").css('display', 'block');
if ($("#events").find('.logged').length >= 5) {
$("#events").jqxPanel('clearcontent');
}
var args = event.args;
var eventData = "pagechanged

Page:" + args.pagenum + ", Page Size: " + args.pagesize + "

";
$('#events').jqxPanel('prepend', '

' + eventData + '

');
// get page information.
var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
$('#paginginfo').html("

Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
});
$("#jqxgrid").bind("pagesizechanged", function (event) {
$("#eventslog").css('display', 'block');
$("#events").jqxPanel('clearcontent');
var args = event.args;
var eventData = "pagesizechanged

Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "

";
$('#events').jqxPanel('prepend', '

' + eventData + '

');
// get page information.
var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
$('#paginginfo').html("

Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
});

// $("#jqxgrid").bind('rowselect', function (event) {
// $("#selectrowindex").html(event.args.rowindex);
// var data = $('#jqxgrid').jqxGrid('getrowdata', event.args.rowindex);
// alert(data.ShipAddress);
// data.Sel = (data.Sel == 0) ? 1 : 0;
// if (data.Sel == 1) {
// tabSelection.push(data.Id);
//

// } else {
// var idx = tabSelection.indexOf(data.Id); // Find the index
// if (idx != -1) tabSelection.splice(idx, 1);
// }

// alert(data.Id); // NO WORK WHEN PAGER IS > 4

// //alert(tabSelection.length);
// $('#jqxgrid').jqxGrid('updaterow', event.args.rowindex, data);
// });

$("#jqxgrid").bind("sort", function (event) {
$("#events").jqxPanel('clearcontent');
var sortinformation = event.args.sortinformation;
var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
sortdirection = "null";
}
var eventData = "Triggered 'sort' event

Column:" + sortinformation.sortcolumn + ", Direction: " + sortdirection + "

";
$('#events').jqxPanel('prepend', '

' + eventData + '

');
});
$('#clearsortingbutton').jqxButton({ height: 25, theme: theme });
$('#sortbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
// clear the sorting.
$('#clearsortingbutton').click(function () {
$("#jqxgrid").jqxGrid('removesort');
});
// show/hide sort background
$('#sortbackground').bind('change', function (event) {
$("#jqxgrid").jqxGrid({ showsortcolumnbackground: event.args.checked });
});

});

Event Log:

Paging Details:

New Issue: Now i tried adding Sorting Code to the existing one which i got from demo code, if i add reference of “jqwidgets/jqxgrid.sort.js” file same error in the IE8, but working in Firefox/chrome. Might be some ieframe.dll is giving some exception with our js files.

Regards,
/Srinivas

[SRKParticipant]

javascript Reference line (jqwidgets/jqxgrid.selection.js)

[SRKParticipant]

Peter,

I have taken the sample demo code which was present in website:

please find the below code:

This example shows how to enable the paging feature of the Grid.

 
        $(document).ready(function () {
            var theme = getTheme();
            var url = "../sampledata/orders.xml";
            var parentsLength = $("#jqxWidget").parents().length;
            if (parentsLength > 3) {
                url = 'demos/sampledata/orders.xml';
            }
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                sortable: true,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
                  { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
                ]
            });
            $('#events').jqxPanel({ width: 300, height: 300, theme: theme });
            $("#jqxgrid").bind("pagechanged", function (event) {
                $("#eventslog").css('display', 'block');
                if ($("#events").find('.logged').length >= 5)
                {
                    $("#events").jqxPanel('clearcontent');
                }
                var args = event.args;
                var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px">' + eventData + '</div>');
                // get page information.
                var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                $('#paginginfo').html("<div style='margin-top: 5px'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
            });
            $("#jqxgrid").bind("pagesizechanged", function (event) {
                $("#eventslog").css('display', 'block');
                $("#events").jqxPanel('clearcontent');
                var args = event.args;
                var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px">' + eventData + '</div>');
                // get page information.          
                var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                $('#paginginfo').html("<div style='margin-top: 5px'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
            });
        });
    
    <div style="font-size: 13px;font-family: Verdana;float: left">
        <div>
        </div>
        <div style="margin-top: 30px">
            <div style="float: left">
                Event Log:
                <div style="border: none">
                </div>
            </div>
            <div style="float: left">
                Paging Details:
                <div>
                </div>
            </div>
        </div>
    </div>

i am getting following error:

res://ieframe.dll/acr_depnx_error.htm#,

Complete Error with Application name is:

res://ieframe.dll/acr_depnx_error.htm#,http://localhost:18454/Paging.aspx

This is causing only when i add this line

if i comment this line , IE is working fine , but i can’t select any row in the grid.

Regards,
/Srinivas

[SRKParticipant]

Hi Peter,

After Fix , i took latest code for the above issue. it is working fine in Firefox and chrome but it is breaking IE.could you please let me know if there is any alternative which will support cross browsers.

[Author]

Posts