Knockout binding - visible binding showing weird display

645

Mike Davis posted over 11 years ago

I am having an issue with the display of a combo drop down when changing the "visible" knockout binding. It looks like the display is getting set to block instead of inline-blokc.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Index</title>
	<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
	<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>

	<link href="/Content/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="/Content/structure/infragistics.css" rel="stylesheet" />
	<link href="/Content/site.css" rel="stylesheet"/>

	<script src="/Scripts/modernizr-2.6.2.js"></script>

	</head>
	<body>


	<form id="testForm">
	<input id="EditModeCheckbox" type="checkbox" value="In Edit Mode" data-bind="checked: InEditMode"/><label for="EditModeCheckbox">In Edit Mode</label><br/>
	<p>
	Current Actor: <input type="text" data-bind="value: ActorName, visible: InEditMode"/>
	</p>
	<p>
	<span id="comboText" data-bind="igCombo: { text: ActorName, dataSource: Actors, textKey: 'name', valueKey: 'id', enableSelectionChangedUpdate: true, mode: 'dropdown', width: 200, validatorOptions: { required: true } }, visible: InEditMode"></span>
	</p>
	</form>



	<script src="/Scripts/jquery-1.8.2.js"></script>

	<script src="/Scripts/jquery-ui-1.8.24.js"></script>


	<script src="/Scripts/knockout-2.2.1.js"></script>
	<script src="/Scripts/knockout.mapping-latest.js"></script>
	<script src="/Scripts/infragistics/infragistics.loader.js" type="text/javascript"></script>

	<script type="text/javascript">
	$(function () {
	var actors = [
	{ name: "Adam Sandler", id: "nm0001191" },
	{ name: "Brooke Shields", id: "nm0000222" },
	{ name: "Charles Chaplin", id: "nm0000122" },
	{ name: "Charlize Theron", id: "nm0000234" },
	{ name: "Dustin Hoffman", id: "nm0000163" },
	{ name: "Hristo Shopov", id: "nm0794885" },
	{ name: "Jeremy Irons", id: "nm0000460" },
	{ name: "Noomi Rapace", id: "nm0636426" },
	{ name: "Nicole Kidman ", id: "nm0000173" },
	{ name: "Robert De Niro", id: "nm0000134" },
	{ name: "Tom Cruise", id: "nm0000129" },
	{ name: "Tom Hanks", id: "nm0000158" }
	];

	function viewModel() {
	var self = this;

	self.Actors = ko.observableArray(actors);
	self.ActorName = ko.observable(self.Actors()[0].name);

	InEditMode = ko.observable(false);
	}

	$.ig.loader(
	{
	scriptPath: '/Scripts/infragistics/',
	cssPath: '/Content/',
	resources: "igShared,igEditors,igCombo,igValidator,extensions/infragistics.ui.editors.knockout-extensions.js,extensions/infragistics.ui.combo.knockout-extensions.js",
	theme: "metro",
	ready: function () {

	$.ui.igValidator.defaults.showAllErrorsOnSubmit = true;
	$.ui.igValidator.defaults.formsubmit = false;
	$.ui.igValidator.defaults.onblur = false;
	$.ui.igValidator.defaults.onchange = false;
	$.ui.igValidator.defaults.onsubmit = false;
	$.ui.igValidator.defaults.alignment = 'right';

	ko.applyBindings(new viewModel());


	}
	}
	);

	});
	</script>

	</body>
	</html>

Parents

No Data

Reply

835

Bob M. posted over 11 years ago

I'm seeing a lot of question on this forum, but few answers. Where is everyone ???

Bob
Cancel
Reply

Cancel

Children

4315

Offline Nikolay Alipiev posted over 11 years ago in reply to Bob M.

Hi, Bob.

Thanks for the patience and I hope that I can help you.

You are right that "visible" binding change the display from "none" to "block", but the display of the igCombo needs to be "inline-block". This means that for the combo we need to override the default behavior of the knockoutJS "visible" binding. Let me investigate this further and will provide you with either a bug or feature request, or if this is out of our scope it will be added as a known issue. As a workaround, for the moment, you can set explicitely the display to "inline-block" after the "visible" bidning had set it to "block".

Just for your information I saw that in your view model the last line of code you should have the "self" prefix: self.InEditMode = ko.observable(false); This of course doesn't fix the main problem.

Thank you again and I will wait for your feedback.

Best regards,

Nikolay Alipiev
Cancel
Reply

Cancel