jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by parascus 10 years, 11 months ago.

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

Author

Handling of disabled and of value Posts

May 25, 2014 at 5:39 pm Handling of disabled and of value #54874

Participant

Hello jqWidget-Team,

I tried to create a menu as you have in your examples and to expand it with a value (url to call on click) as well as to disable an item. The script is as following:

$(document).ready(
	function () {
		var data = [
			{ "id": "A" , "text": "A" } , 
			{ "id": "B" , "text": "B" , "disabled": "true" } , 
			{ "id": "C" , "text": "C" , "value": "url.htm" } , 
			{ "id": "A.1" , "parentid": "A" , "text": "A.1" } 
		];
		
		var source = {
			datatype: "json",
			datafields: [ 
				{ name: "id" }, 
				{ name: "parentid" }, 
				{ name: "text" }, 
				{ name: "subMenuWidth" }, 
				{ name: "value" }, 
				{ name: "disabled" } 
			],
			id: "id",
			localdata: data
		};
		
		var dataAdapter = new $.jqx.dataAdapter(source);
		dataAdapter.dataBind();
		var records = dataAdapter.getRecordsHierarchy(
			"id", 
			"parentid", 
			"items", 
			[
				{ name: "text", map: "label"}
			]
		);
		
		$("#jqxWidget").jqxMenu( { 
			source: records, 
			height: 30, 
			width: "400px" 
		});
		
		$("#jqxWidget").on(
			"itemclick", function (event) {
				console.debug( $("#" + event.args.id).jqxMenu("value"));
				$("#eventLog").text("Id: " + event.args.id + ", Text: " + $(event.args).text());
			}
		);
	}
);

Unfortunately the menu B is not disabled and clicking on C there’s no output of the value. Can you give me a hint or a scribble how I can do this?

Best regards

Stephan

June 2, 2014 at 8:18 pm Handling of disabled and of value #55217

parascus

Participant

Hello jqWidget-Team,

I tried some other approaches but none of them worked. Do you have a solution for my problem?

Kind regards

Stephan

June 3, 2014 at 3:26 pm Handling of disabled and of value #55283

Peter Stoev

Keymaster

Hi Stephan,

I’ve prepared a small sample which shows how to handle this.

1. To disable a Menu item, I used the jqxMenu’s disable method.
2. To find the item’s url, I used the data variable and the item’s ID in the “itemclick” event handler.

<!DOCTYPE html>
<html lang="en">
<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/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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 data = [
                { "id": "A", "text": "A" },
                { "id": "B", "text": "B", "disabled": "true" },
                { "id": "C", "text": "C", "value": "url.htm" },
                { "id": "A.1", "parentid": "A", "text": "A.1" }
                ];

                var source = {
                    datatype: "json",
                    datafields: [
                        { name: "id" },
                        { name: "parentid" },
                        { name: "text" },
                        { name: "subMenuWidth" },
                        { name: "value" },
                        { name: "disabled", type: 'bool' }
                    ],
                    id: "id",
                    localdata: data
                };

                var dataAdapter = new $.jqx.dataAdapter(source);
                dataAdapter.dataBind();
                var records = dataAdapter.getRecordsHierarchy(
                    "id",
                    "parentid",
                    "items",
                    [
                        { name: "text", map: "label" }
                    ]
                );

                $("#jqxWidget").jqxMenu({
                    source: records,
                    height: 30,
                    width: "400px"
                });

                $("#jqxWidget").jqxMenu('disable', 'B', true);
                $("#jqxWidget").on(
                    "itemclick", function (event) {
                        var id = event.args.id;
                        var value = null;
                        $.each(data, function () {
                            if (this["text"] == id) {
                                value = this["value"];
                                return false;
                            }
                        });
                        if (value) {
                            alert(value);
                        }
                    }
                );
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" id="eventLog"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

June 7, 2014 at 7:11 am Handling of disabled and of value #55542

parascus

Participant

Hi Peter,

Thank you for the solution. As expected it works fine. If I might suggest a little improvement on this? It would be good if the “disabled” property could be transfered to the menu widget via the data source as it is in many other occasions you have in other widgets.

Also the item handling could be improved if the items are handled like in the treeview or listbox where you can get it directly from the widget like var item = (‘#jqWidget’).jgxMenu(‘getItemById’, event.args.id).

Best Regards and have a nice day.

Stephan

Author

Posts

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

You must be logged in to reply to this topic.