PageSelector selected item is not persisted
Hi,
Not sure if I'm doing this right, but for some reason my PageSelector (client component) is not persisting the selected value to the database, so it seems. When re-opening the designer, the value is cleared.
This is my code:
MVC/Views/Register/DesignerView.Default.cshtml
<
div
class
=
"form-group"
>
<
label
>Select a page</
label
>
<
p
class
=
"description-note"
></
p
>
<
sf-list-selector
sf-page-selector
sf-selected-item
=
"selectedPage"
sf-selected-item-id
=
"selectedPageId"
/>
</
div
>
MVC/Views/Register/DesignerView.Default.json
"priority"
: 1,
"components"
: [
"sf-page-selector"
]
MVC/Scripts/Register/DesignerView-Default.js
(
function
()
var
designerModule = angular.module(
'designer'
);
angular.module(
'designer'
).requires.push(
'sfSelectors'
);
)();
For what I understand I would not need to add an AngularJS controller. (as I was told this is created automatically when you don't create one yourself).
Is there something I forget to do?
Best,
Daniel
Hi Daniel,
I experienced the same problem and changing the attributes on the sf-page-selector directive to the following resolved the persistence problem.
<
sf-list-selector
sf-page-selector
sf-selected-item-id
=
"properties.SelectedPageId.PropertyValue"
></
sf-list-selector
>
binding to the property values instead definitely worked, but only for the simple guid Id type. when I try to bind to the NewsItem property SelectedItem it fails with the error:
There was an error deserializing the object of type Telerik.Sitefinity.Modules.Pages.Web.Services.Model.WcfControlProperty
Documentation says the type should be string but later it says it should be object, but both fail. They suggest that you need to add serialization in a custom controller for the widget designer, but I'm not using one.
So am I correct in assuming that if I want to bind to the SelectedItem object, I am REQUIRED to use a custom controller for the designer? if not, how do I properly serialize the selected value and persist it to the widget property?
Hi,
I tested this on my side and managed to add a page selector to an MVC widget designer.
I used the following markup for the selector in my DesignerView.DefaultDesignerView.cshtml file:
<
sf-list-selector
sf-page-selector
sf-selected-item
=
"selectedPage"
sf-selected-item-id
=
"selectedPageId"
/>
$scope.$watch(
'properties.SelectedPage.PropertyValue'
,
function
(newValue, oldValue)
if
(newValue)
$scope.selectedPage = JSON.parse(newValue);
);
$scope.$watch(
'selectedPage'
,
function
(newValue, oldValue)
if
(newValue)
$scope.properties.SelectedPage.PropertyValue = JSON.stringify(newValue);
);
$scope.$watch(
'properties.SelectedPageId.PropertyValue'
,
function
(newValue, oldValue)
if
(newValue)
$scope.selectedPageId = JSON.parse(newValue);
);
$scope.$watch(
'selectedPageId'
,
function
(newValue, oldValue)
if
(newValue)
$scope.properties.SelectedPageId.PropertyValue = JSON.stringify(newValue);
);
Hi Sabrie,
When I use "properties.SelectedPage.PropertyValue" it works okay.
I'm going to try your solution also. Thanks for that.
Best,
Daniel
Hello Daniel,
I also published a KB article describing in details the steps to add the page selector to the MVC widget designer. In the KB article you can also find attached a sample MVC widget where this is implemented.
Here is the link to the KB article:
http://www.sitefinity.com/developer-network/knowledge-base/details/how-to-add-a-page-selector-in-feather-widget's-designer-view
Regards,
Sabrie Nedzhip
Telerik
Yes, I was able to get this to work. Also with multiple PageSelectors, something I couldn't realize with multiple DocumentFields.