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. Image for the cookie policy date

SPA Samples!

Hi,

do you have any SPA sample (preferably based on HotTowel template)? 

Thank you,

Cipo.

13 Replies

SK Suman Kumar G Syncfusion Team August 7, 2013 01:19 PM UTC

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.

https://s3.amazonaws.com/files2.syncfusion.com/dtsupport/directtrac/111560/HotTowelSample162626347.zip

 

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



DC darko cernik August 7, 2013 08:18 PM UTC

Thank you.
It's working. 

Cipo.


DC darko cernik August 8, 2013 11:05 AM UTC

Hi,

how can I wire-up onclick event with the ejbutton in the same SPA application?

Thank you,

Cipo.



SK Suman Kumar G Syncfusion Team August 8, 2013 12:30 PM UTC

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



DC darko cernik August 9, 2013 10:34 AM UTC

Thank you.

Cipo.


SK Suman Kumar G Syncfusion Team August 12, 2013 10:35 AM UTC

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



DC darko cernik August 23, 2013 01:09 PM UTC

Hi,

do you have samples with drop down list with pagging, and searching?
Autocomplete could be solution, but can the value of the control be, say Id, and text property some string from database?

Thank you.


DC darko cernik August 26, 2013 08:49 AM UTC

Hi,

i have another question.
Can WebApi controller be used as a data source for grid instead Odata WCF service?

Tanks


SK Suman Kumar G Syncfusion Team August 26, 2013 09:33 AM UTC

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



DC darko cernik August 28, 2013 10:49 AM UTC

Thank you for your explanation.
Do you have an example how to bind dropdown list and text field with knockout?

I have problem with dropdown list.
In view, i've defined:

 <select style="width: 100%" id="lijecnik" data-bind="options: lookups.employees, optionsText: 'zaposlenik', value: doktor"></select>

And control gets populated.

viewmodel:
$('#lijecnik').ejDropDownList({ fields: { text: "Zaposlenik", id:"Id", value: "Id", dataSource: lookups.employees } });

No matter what i tried, everi time first Id gets saved to database even though different item in dropdown list is selected.

Also, there is an issue with text box.
 <input type="text" id="brojPoziva" data-bind="value: brojPoziva" />
It won't display value, just like dropdown control, until it is not defined in viewmodel, like:
$("#brojPoziva").ejNumericTextbox({ minValue: 0, value: dispatcher().brojPoziva() });

but it is not the knockout way.

Thank you.


YO Yogeshwaran Syncfusion Team August 29, 2013 05:35 AM UTC

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.

WebApi.zip

 

 

Please let us know if you have any concerns.

 

Regards,

Yogesh R



DC darko cernik October 17, 2014 02:25 PM UTC

Hello,

do you have any SPA sample (preferably based on HotTowel template) with latest version of JavaScript controls? 
I've referenced all required libraries in the project 
(http://www.syncfusion.com/blogs/post/Data-binding-using-Knockout-in-Essential-Studio-for-JavaScript.aspx), 
but controls does not get rendered. 

<input type="text" id="datepick1" data-bind="ejDatePicker: { value: myDate, enableStrictMode: true, locale: 'de-DE' }"/>
<input type="text" value="" data-bind="ejNumericTextbox: { value: myInt, minValue: 1, maxValue: 4, width: '100px' }"  />

Am i missing something?


Thank you.


HP Harikrishnan P Syncfusion Team October 21, 2014 01:47 PM UTC

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


Loader.
Up arrow icon