We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Cipo,
Thanks for using Syncfusion Products.
We prepared a simple SPA sample with Hot Towel template using our button and accordion controls.
Sample can be downloaded in below link.
To create SPA with Hot Towel template, just we need to do the following modification in default sample.
1. Add the Essential JavaScript CSS and Script files in content and script folder respectively.
2. Add the reference to above files in Bundle.configure.cs file
// Essential JS scripts
bundles.Add(
new ScriptBundle("~/scripts/vendor")
.Include("~/scripts/ejScripts/ej.widgets.all.min.js"));
// Essential JS theme css
bundles.Add(
new StyleBundle("~/Content/css")
.Include("~/Content/ejCSS/ej.widgets.core.min.css")
.Include("~/Content/ejCSS/default-theme/ej.theme.min.css"));
3. In Apps à views folder added the below code in home.html file
<section>
<h2 class="page-title" data-bind="text: title"></h2>
// add button element
<label> Button Control </label> <button id="ejbutton" >JS Button</button>
</section>
4. In Apps à viewmodels folder added the below code in home.js file
define(['services/logger'], function (logger) {
var vm = {
activate: activate,
viewAttached: viewAttached,
title: 'Home View with EJ Controls'
};
return vm;
//#region Internal Methods
function activate() {
logger.log('Home View Activated', null, 'home', true);
return true;
}
function viewAttached(view) {
//#creates button control
$(function () {
$("#ejbutton").ejButton({
size: "large"
});
});
return true;
}
//#endregion
});
Please let us know if this helps.
Thanks/Regards,
SumanKumarG
Hi Cipo,
Thanks for your update.
You can achieve your requirement by setting “ejButton” click as follows:
Code snippet [script]:
define(['services/logger'], function (logger) {
var vm = {
activate: activate,
viewAttached: viewAttached,
title: 'Home View with EJ Controls'
};
return vm;
//#region Internal Methods
function activate() {
logger.log('Home View Activated', null, 'home', true);
return true;
}
function viewAttached(view) {
$(function () {
// ejButton creation
$("#ejbutton").ejButton({
size: "large",
click: "buttonClick" //wires click event for ejButton
});
// ejAccordion creation
$("#accordion").ejAccordion();
});
return true;
}
//#endregion
});
//event handler for ejButton Click
function buttonClick(args) {
alert("ejButton has been clicked");
}
Replace the existing code in home.js with the above code to wire up button events.
We have modified the sample based on this and you can find the sample under the following location:
Sample : http://www.syncfusion.com/downloads/support/directtrac/11173/HotTowelSample-794089115.zip
Please let us know if this helps.
Regards,
SumanKumarG
Hi Cipo,
Thank you for your update.
We have blogged an article about introduction of Essential JavaScript controls and its link is given below.
http://www.syncfusion.com/blogs/post/Introduction-to-Essential-JavaScript.aspx
this will help you to know about the basics of our Essential JS controls and also we have planned to publish user guide documentation as soon as possible.
So please feel free to ask any other further queries with us.
Regards,
SumanKumarG
Hi Cipo,
Query: do you have samples with
drop down list with paging, and searching?
Autocomplete could be solution, but can the value of the control be, say Id,
and text property some string from database?
Yes, In Autocomplete textbox we
have given the support to set the values of id and text from database using the
mapper fields values. We have to map the corresponding field values from
database to autocomplete as like below.
<input type="text" id="customerList" />
<script type="text/javascript">
$(function
($) {
var
dataManger = ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
});
//
Query creation
var
query = ej.Query().from("Suppliers").select("SupplierID", "ContactName");
$('#customerList').ejAutocomplete({
dataSource: dataManger,
query: query,
//
where text field is a search field and uniqueKey is the identifier
fields: { text: "ContactName", uniqueKey: "SupplierID" }
});
});
</script>
Online sample link : - http://js.syncfusion.com/demos/beta/#!/flat/autocomplete/Data%20Binding%20-%20remote%20data
Please find the above online sample link to achieve your
requirement and let us know if this helps you.
Regards,
SumanKumarG
Hi Cipo,
|
Can WebApi controller be used as a data source for grid instead Odata WCF service? |
Yes you can use WebApi controller be used as a data source for grid. Please find the below code snippet.
Data source of WebApi url. var dataManger = ej.DataManager({ url: "api/values", offline:true });
For your convenience, we have created sample for you requirement.
|
Please let us know if you have any concerns.
Regards,
Yogesh R
Hi Darko,
We are unable to reproduce the reported issue (“controls not rendering”) in SPA. We suspect that this issue might have occurred because the script files might not be included in correct order. We have attached a SPA sample (using Hot Towel Template) in the following location. The following sample showcases Datepicker and Numeric Textbox component with KnockOutJS binding.
Sample Location: SPA
Could you please check with the above sample? If still you face any problems in using our components please get back to us we will be happy to assist you.
Regards,
HariKrishnan
