This project is read-only.

ReadOnly GridView Control Example

This example explains how to create a window with a read-only GridView control, bind to the data and show on the screen.
GridView is read-only because we use gridviewstatictextcolumn column types.

See interactive example on http://www.redui.net

UI Model

{
    "windows": [
        {
            "name": "ReadOnlyGridViewExample",
            "title": "Read-Only GridView Example",
            "left": 500,
            "top": 100,
            "width": 500,
            "height": 300,
            "controls": [
                {
                    "name": "managersGrid",
                    "type": "gridview",
                    "bindsTo": "list",
                    "canUserAddRows": false,
                    "columns": [
                        {
                            "type": "gridviewstatictextcolumn",
                            "name": "title",
                            "label": "Title",
                            "width": 150,
                            "bindsTo": "title"
                        },
                        {
                            "type": "gridviewstatictextcolumn",
                            "name": "name",
                            "label": "Name",
                            "width": 250,
                            "bindsTo": "name"
                        }
                    ]
                },
                {
                    "name": "OKButton",
                    "type": "button",
                    "text": "OK",
                    "isDialogButton": true,
                    "dialogResult": "OK"
                },
                {
                    "name": "CancelButton",
                    "type": "button",
                    "text": "Cancel",
                    "isDialogButton": true,
                    "dialogResult": "Cancel"
                }
            ]
        }
    ]
}

Data Model

var teamManagement = {
	list: [
		{
			id: 7,
			title: "Manager",
			name: "Fiorello Lombardi",
		},
		{
			id: 8,
			title: "Goalkeeping Coach",
			name: "Armando Arcuri",
		},
		{
			id: 9,
			title: "Assistant Manager",
			name: "Alessio Ferri",
		},
		{
			id: 10,
			title: "First-team Coach",
			name: "Giuseppe Milani",
		}
	]
};

Code

var managersWindow = redui.createNewWindow("ReadOnlyGridViewExample");
managersWindow.bind(teamManagement);

managersWindow.closed(function (target, dialogResult) {
	if (dialogResult === "OK") {
		var currentRow = managersWindow.managersGrid.currentRow;
		if (currentRow) {
			var object = currentRow.bindingContext;
			alert("Selected row: " + JSON.stringify(object));
		} else {
			alert("Row was not selected.");
		}
	}
});

managersWindow.show();


.

Last edited Nov 21, 2013 at 10:43 AM by artemkv, version 6

Comments

No comments yet.