jQWidgets Forums

Forum Replies Created

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts

November 8, 2012 at 12:33 pm in reply to: How to trace the parent id and parent label based on the sub menu item How to trace the parent id and parent label based on the sub menu item #10716

SushmaSriram

Member

Hi,

Sorry for the previous post.

Could you please let me know how to retrieve parent id and label based on below example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxMenu is built from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var data = [
                {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "subMenuWidth": '250px'
                }, {
                    "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1",
                    "subMenuWidth": '200px'
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6"
                }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1",
                    "subMenuWidth": '250px'
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13"
                }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12"
                }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'subMenuWidth' }
                    ],
                    id: 'id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                $('#jqxWidget').jqxMenu({ source: records, height: 30, theme: theme, width: '400px' });
                $("#jqxWidget").bind('itemclick', function (event) {
                    $("#eventLog").html("Id: " + event.args.id + ", Text: " + $(event.args).text());
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" id="eventLog"></div>
    </div>
</body>
</html>

November 8, 2012 at 12:29 pm in reply to: How to trace the parent id and parent label based on the sub menu item How to trace the parent id and parent label based on the sub menu item #10713

SushmaSriram

Member

Hi,

Could you please let me know how to retrieve parent id and label based on below example:

In this demo the jqxMenu is built from JSON data.

$(document).ready(function () {
var theme = getTheme();
var data = [
{
“text”: “Chocolate Beverage”,
“id”: “1”,
“parentid”: “-1”,
“subMenuWidth”: ‘250px’
}, {
“id”: “2”,
“parentid”: “1”,
“text”: “Hot Chocolate”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Peppermint Hot Chocolate”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Salted Caramel Hot Chocolate”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “White Hot Chocolate”
}, {
“id”: “6”,
“text”: “Espresso Beverage”,
“parentid”: “-1”,
“subMenuWidth”: ‘200px’
}, {
“id”: “7”,
“parentid”: “6”,
“text”: “Caffe Americano”
}, {
“id”: “8”,
“text”: “Caffe Latte”,
“parentid”: “6”
}, {
“id”: “9”,
“text”: “Caffe Mocha”,
“parentid”: “6”
}, {
“id”: “10”,
“text”: “Cappuccino”,
“parentid”: “6”
}, {
“id”: “11”,
“text”: “Pumpkin Spice Latte”,
“parentid”: “6”
}, {
“id”: “12”,
“text”: “Frappuccino”,
“parentid”: “-1”,
“subMenuWidth”: ‘250px’
}, {
“id”: “13”,
“text”: “Caffe Vanilla Frappuccino”,
“parentid”: “12”
}, {
“id”: “15”,
“text”: “450 calories”,
“parentid”: “13”
}, {
“id”: “16”,
“text”: “16g fat”,
“parentid”: “13”
}, {
“id”: “17”,
“text”: “13g protein”,
“parentid”: “13”
}, {
“id”: “14”,
“text”: “Caffe Vanilla Frappuccino Light”,
“parentid”: “12”
}]
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ },
{ name: ‘subMenuWidth’ }
],
id: ‘id’,
localdata: data
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
// get the menu items. The first parameter is the item’s id. The second parameter is the parent item’s id. The ‘items’ parameter represents
// the sub items collection name. Each jqxTree item has a ‘label’ property, but in the JSON data, we have a ‘text’ field. The last parameter
// specifies the mapping between the ‘text’ and ‘label’ fields.
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);
$(‘#jqxWidget’).jqxMenu({ source: records, height: 30, theme: theme, width: ‘400px’ });
$(“#jqxWidget”).bind(‘itemclick’, function (event) {
$(“#eventLog”).html(“Id: ” + event.args.id + “, Text: ” + $(event.args).text());
});
});

October 5, 2012 at 10:56 am in reply to: How to find a tab based in the tab title? How to find a tab based in the tab title? #8976

SushmaSriram

Member

Hi Dimitar,

This looks fine.. But I may have 10 to 15 tabs.. so could you please let me know if I can get the position of the tab based on the tab title.

Thanks,
Sushma

September 4, 2012 at 7:51 am in reply to: Possibility to make a set of rows non editable in an editable grid Possibility to make a set of rows non editable in an editable grid #7388

SushmaSriram

Member

Hi Team,

The given example helps me a lot.. Can you please give an example based on this where I can make the entire row greyed out so that it stays stand out in the grid to let the user that it is not editable.

Thanks in advance,
Sushma

August 30, 2012 at 1:24 pm in reply to: Possibility to make a set of rows non editable in an editable grid Possibility to make a set of rows non editable in an editable grid #7294

SushmaSriram

Member

It works. Thanks a lot!!!!!!!!!

August 29, 2012 at 11:48 am in reply to: Possibility to make a set of rows non editable in an editable grid Possibility to make a set of rows non editable in an editable grid #7248

SushmaSriram

Member

Hi Dimitar,

This looks fine, but I have the settings for the grid as sortable. so the rows might be changing their positions. In that case, the above Solution fails. Could you please suggest me the way forward.

Thanks in advance,
Sushma.

June 27, 2012 at 12:51 pm in reply to: How to highlight a single row in grid How to highlight a single row in grid #5381

SushmaSriram

Member

Hi Peter,

The suggestion for disabling a row looks fine. But in my case I may have 100 rows wherein each row has an attribute value,say enable : true or false obtained from arraylist or json, based on which the row has to be disabled. So this needs to be dynamic. Could you please suggest me with an example.

Regards,
Sushma

June 18, 2012 at 6:25 pm in reply to: Lock some rows in an editable grid Lock some rows in an editable grid #5070

SushmaSriram

Member

Hi Peter,

Your example gives perfect thought when the row numbers are exactly known.

But in my case i have hundreds of rows and the locking of the rows differ based on the data. So i need to lock the rows dynamically. Could you please suggest me.

Regards,
Sushma

June 12, 2012 at 3:16 pm in reply to: Tabs UI does not seem work in IE8 Tabs UI does not seem work in IE8 #4853

SushmaSriram

Member

Hi,

Sorry for getting back.. but i have done these settings and it works fine in mozila firefox but not in IE8. Could you please suggest if there are some changes pertaining to browser?

BR
Sushma

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)