jQWidgets Forums

This topic contains 0 replies, has 1 voice, and was last updated by kcq 11 years, 2 months ago.

Viewing 1 post (of 1 total)

Author

Refreshing grid data via ko.mapping Posts

March 4, 2014 at 3:07 pm Refreshing grid data via ko.mapping #50476

kcq

Participant

Hello,

I’m trying to update the grid’s data via the dropdownlist selected event using ko.mapping. I initially setup the source using jqxadapter via the ko.mapping.fromJS. I would like to update the grid’s data via ko.mapping.fromJS(data, vm). However, the grid is not updating. Below is the code. Thanks for your help. Regards,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Application Settings</title>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="./scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/json2.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/knockout-2.2.1.js"></script>
	<script type="text/javascript" src="./scripts/knockout.mapping-latest.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
	<script type="text/javascript">
		var appSettings =
			[
				{
					ApplicationName: 'Application #1',
					Settings:
						[
							{ SettingName: 'Keep me logged in', SettingValue: 'true' },
							{ SettingName: 'Idle Timeout', SettingValue: '5 min' },
						]
				},
				{
					ApplicationName: 'Application #2',
					Settings:
						[
							{ SettingName: 'Skip test', SettingValue: 'true' },
							{ SettingName: 'Run Self Test', SettingValue: 'true' },
						]
				}
			];
		var appVM;		
		(function ()
		{
			var AppSettingsViewModel = function ()
			{
				var self = this;
				self.applications = ko.observable(
					[
						'Application #1', 'Application #2', 'Application #3'
					]);
				self.selectedItem = ko.observable(0);
				self.settings = ko.mapping.fromJS(appSettings[0].Settings);
			};
			appVM = new AppSettingsViewModel();
		})();

		AppSettingGrid = function ()
		{
			var myGrid = {};
			var _gridId = undefined;
			var _theme = undefined;
			var _appSettingNames =
				{
					SettingAppNameField: 'ApplicationName',
					SettingNameHeader: 'Setting Name',
					SettingValueHeader: 'Setting Value',
					SettingNameField: 'SettingName',
					SettingValueField: 'SettingValue'
				};

			myGrid.Initialize = function (id, theme, source)
			{
				_gridId = id;
				_theme = theme;

				var source =
				{
					localdata: source,
					datatype: "observablearray",
					datafield:
						[
							{ name: _appSettingNames.SettingNameField, type: 'string' },
							{ name: _appSettingNames.SettingValueField, type: 'string' }
						]
				};
				var dataAdapter = new $.jqx.dataAdapter(source);
				var columns =
					[
						{ text: _appSettingNames.SettingNameHeader, datafield: _appSettingNames.SettingNameField, editable: false },
						{ text: _appSettingNames.SettingValueHeader, datafield: _appSettingNames.SettingValueField }
					];
				$(_gridId).jqxGrid({
					width: '99%',
					autoheight: true,
					altrows: true,
					editable: true,
					source: dataAdapter,
					theme: _theme,
					selectionmode: 'checkbox',
					columns: columns,
				});
				$(_gridId).jqxGrid({ editable: true, editmode: 'selectedcell', selectionmode: 'singlecell' });
				$(_gridId).width('auto');
			};

			return myGrid;

		};
		$(document).ready(function ()
		{
			$('#appSelectedId').on('select', function (event)
			{
				var args = event.args;
				if (args)
				{
					var index = args.index;
					if (index < appSettings.length)
					{
						var settings = appSettings[index].Settings;
						ko.mapping.fromJS(settings, appVM.settings);
					}
				}
			});

			var appSettingsGrid = new AppSettingGrid();
			appSettingsGrid.Initialize("#appSettingGridId", "", appVM.settings);
			ko.applyBindings(appVM);
		});
	</script>
</head>
<body>
	<div>
		<div>
			<div id="appSelectedId" data-bind="jqxDropDownList: { source: applications, selectedIndex: selectedItem, width: '200', height: '25', dropDownHeight: 150, autoDropDownHeight: 'auto' }"></div>
		</div>
		<div>
			<div id="appSettingGridId" style="margin-top:5px"></div>
 		</div>
        <table style="margin-top: 20px;">
            <tbody data-bind="foreach: settings">
                <tr>
                    <td data-bind="text: SettingName"></td>
                    <td data-bind="text: SettingValue"></td>
                </tr>
            </tbody>
        </table>
	</div>
</body>
</html>

Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.