Code: Select all
this.Html = @"<Enter your Html here>";
kmatt wrote:FYI, when I inherit from HtmlPresenter:
Exception thrown: 'System.InvalidCastException' in CSharpXamlForHtml5.dll
Additional information: Unable to cast object of type 'GUI.KendoExtension.KendoUIButton' to type 'Windows.UI.Xaml.Controls.ContentControl'.
Code: Select all
using CSHTML5;
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace HTMLButtonTest
{
public partial class KendoUIButton : UserControl
{
private Random rand = new Random();
public KendoUIButton()
{
this.InitializeComponent();
this.ButtonControl.Visibility = Visibility.Collapsed; // hide the button until we populate its content
this.Loaded += KendoUIButton_Loaded;
}
private void KendoUIButton_Loaded(object sender, RoutedEventArgs e)
{
ChangeButtonWithJSInterop("Click Me!", "black");
}
private void ChangeButtonWithJSInterop(string newHtmlContent, string cssColorname)
{
if(ButtonControl.Visibility != Visibility.Visible)
ButtonControl.Visibility = Visibility.Visible;
//Set the html content via javascript
Interop.ExecuteJavaScript(@"$1.innerHTML = $0;", newHtmlContent, Interop.GetDiv(HTMLControl));
//Set the css color via javascript
Interop.ExecuteJavaScript(@"$1.style.color = $0;", cssColorname, Interop.GetDiv(HTMLControl));
}
private void ButtonControl_Click(object sender, RoutedEventArgs e)
{
//On Click, set the button's HTML content to a random string of text between 5 and 10 characters long, and a random CSS color name
ChangeButtonWithJSInterop(new StringGenerator().MakeString(rand.Next(5,10)), GetRandomCSSColorName());
}
private string GetRandomCSSColorName()
{
switch(rand.Next(1,5))
{
case 1: return "blue";
case 2: return "red";
case 3: return "green";
case 4: return "purple";
default: return "black";
}
}
}
}
Code: Select all
<UserControl
x:Class="HTMLButtonTest.KendoUIButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HTMLButtonTest">
<Button
x:Name="ButtonControl"
Click="ButtonControl_Click"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<native:HtmlPresenter
x:Name="HTMLControl"
xmlns:native="using:CSHTML5.Native.Html.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="native" />
</Button>
</UserControl>
kmatt wrote:Here you go.
Code: Select all
//HideExtraButton.css
.k-button + button {
display:none;
}
Code: Select all
await Interop.LoadCssFile("ms-appx:///HTMLButtonTest/Styles/HideExtraButton.css");
Uncaught Error: The function 'System.Void HTMLButtonTest.KendoUIButton::<OnDependanciesLoaded>b__3_0()' could not be translated.
Code: Select all
private void OnDependanciesLoaded()
{
this.Dispatcher.BeginInvoke(() =>
{
var buttontext = String.Format(@"<button type='button' id='{0}' name='{0}' data-bind='events:{{click: listener, dblclick: listener}}' class='k-button k-primary'>{1}<button/>", Name, Caption);
HTMLControl.Html = buttontext;
Interop.ExecuteJavaScript(@"
window.jQuery('#" + Name + @"').click(function() {
alert('Clicked!');
});", (Action)OnButtonCallback);
//Uncaught Error: The function 'System.Void HTMLButtonTest.KendoUIButton::<OnDependanciesLoaded>b__3_0()' could not be translated.
//Interop.ExecuteJavaScript(String.Format(@"
// window.jQuery(document).ready(function() {{
// var viewModel = kendo.observable({{
// text: '{0}',
// listener: function() {{
// alert('Clicked!');
// }}
// }});
// kendo.bind(document.getElementById('{1}'), viewModel);
// }});", Caption, Name));
//Uncaught Error: The function 'System.Void HTMLButtonTest.KendoUIButton::<OnDependanciesLoaded>b__3_0()' could not be translated.
//Interop.ExecuteJavaScript(String.Format(@"
// window.jQuery(document).ready(function() {{
// var viewModel = kendo.observable({{
// text: '{0}',
// listener: function(e) {{
// $0(e)
// }}
// }});
// kendo.bind(document.getElementById('{1}'), viewModel);
// }});", Caption, Name), (Action<object>)OnButtonCallback);
//Uncaught Error: The function 'System.Void HTMLButtonTest.KendoUIButton::<OnDependanciesLoaded>b__3_0()' could not be translated.
//Interop.ExecuteJavaScript(String.Format(@"
// window.jQuery(document).ready(function() {
// var viewModel = kendo.observable({
// text: '{0}',
// listener: $0
// });
// kendo.bind(document.getElementById('{1}'), viewModel);
// });", Caption, Name), (Action<object>)OnButtonCallback);
//Uncaught Error: The function 'System.Void HTMLButtonTest.KendoUIButton::<OnDependanciesLoaded>b__3_0()' could not be translated.
//Interop.ExecuteJavaScript(@"
// window.jQuery('#" + Name + @"').click(function() {
// $0()
// });", (Action<object>)OnButtonCallback);
});
}
TaterJuice wrote:I receive the above error
JS-Support wrote:TaterJuice wrote:I receive the above error
Please make sure that the first argument of the method ExecuteJavaScript is a string "literal", which means that its value is known ad design-time rather than runtime. For example, you cannot concatenate two strings with "string1" + "string2", and you also cannot use the "String.Format" method. Instead, if you want to pass content that changes at runtime, you need to pass it via the other arguments of the method, and use $0, $1, etc.
To better understand this issue and how to fix it, please read the paragraph that says "IMPORTANT" on the following page:
http://cshtml5.com/links/how-to-call-javascript.aspx
Thanks.
Regards,
JS-Support
Code: Select all
Interop.ExecuteJavaScript(@"
window.jQuery(document).ready(function() {
var viewModel = kendo.observable({
text: $0,
listener: function() {
alert('Clicked!');
}
});
kendo.bind(document.getElementById($1), viewModel);
});", Caption, Name);
Uncaught TypeError: this.get_Caption is not a function
at HTMLDocument.<anonymous> (HTMLButtonTest.js?20179260809:154)
at j (jquery-3.1.1.min.js:2)
at k (jquery-3.1.1.min.js:2)
Code: Select all
Interop.ExecuteJavaScript(@"
window.jQuery(document).ready(function() {
var viewModel = kendo.observable({
text: '$0',
listener: function() {
alert('Clicked!');
}
});
kendo.bind(document.getElementById($1), viewModel);
});", Caption, Name);
Uncaught SyntaxError: Unexpected identifier
Uncaught TypeError: Cannot read property 'App' of undefined
at runMain (index.html:32)
at browserFinishedLoadingCallback (JSIL.Browser.js?20179260812:1138)
Users browsing this forum: No registered users and 4 guests