Ticket Q471338
Visible to All Users

How to use MVC extensions with Knockout.js

created 12 years ago

HI
Is it possible to use DX MVC controls with knockout.js- I am trying to use knockout to read/write a DX control.
How do i "data-bind" to a dev express control??
Something akin to the code below
if you come across this question from a search please note -- SAMPLE CODE AT BOTTOM OF POST WORKS --

JavaScript
script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> <script src="~/Scripts/knockout-2.2.1.js" type="text/javascript"></script> <script> $(document).ready(function () { // Here's my data model var ViewModel = function (first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); this.<bold>DevXTextField</bold>= ko.observable(); this.fullName = ko.computed(function () { // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. return this.firstName() + " " + this.lastName() + " " + this.<bold>DevXTextField</bold>; }, this); }; ko.applyBindings(new ViewModel()); // This makes Knockout get to work }); </script>
HTML
<div class='liveExample'> <p>First name: <input data-bind='value: firstName' /></p> <p>Last name: <input data-bind='value: lastName' /></p> <h2>Hello, <span data-bind='text: fullName'> </span>!</h2> </div> <div id="HireContent"> @Html.DevExpress().TextBoxFor(model => model.DevXTextField, settings => { settings.Name = "<bold>DevXTextField</bold>"; settings.ShowModelErrors = true; settings.ControlStyle.CssClass = "editor"; settings.WHATEVER = ("<bold>data-bind</bold>", "<bold>value</bold>: <bold>DevXTextField</bold>"); }).GetHtml()</td> <td>@Html.ValidationMessageFor(model => model.<bold>DevXTextField</bold>)</td>

What setting on the DX control should i be using in order to data-bind ?Thanks in advance.

Answers approved by DevExpress Support

created 12 years ago (modified 12 years ago)

Hi Steve,
Thank you for contacting us. It is impossible to use our MVC server-side extensions with client models. You can bind our MVC extensions only to server-side models. If you wish to use knockoutJS, use our DXTREME widgets.

    Other Answers

    created 12 years ago (modified 12 years ago)

    Hi,

    Looked at this in more detail and it seems to work !!
    The key is just to "data-bind" manually using the {Control}.inputElement.attr(a,b) method.
    Key in a firstname & lastname and the email address is updated. Unobtrusive validations still work too.
    Hope this helps someone.
    Thanks

    JavaScript
    <script src="~/Scripts/knockout-2.0.0.js" type="text/javascript"></script> $(document).ready(function () { // manually bind to a dx-control - DX control must have [EnableClientSideAPI = true] // in order to find control . Then add the required knockout attribute "data-bind" $(Email.inputElement).attr("data-bind", "value: emailaddr"); $(FirstName.inputElement).attr("data-bind", "value: firstName"); $(LastName.inputElement).attr("data-bind", "value: lastName"); // Here's my data model var ViewModel = function (first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); this.emailaddr = ko.computed(function () { return this.firstName() + "@@" + this.lastName() + ".com"; }, this); }; ko.applyBindings(new ViewModel()); // This makes Knockout get to work });
    HTML
    @Html.DevExpress().LabelFor(model => Model.FirstName).GetHtml() @Html.DevExpress().TextBox(settings => { settings.Properties.EnableClientSideAPI = true; settings.Name = "FirstName"; settings.ControlStyle.CssClass = "editor"; settings.ShowModelErrors = true; settings.Properties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText; }).Bind(Model.FirstName).GetHtml() @Html.DevExpress().LabelFor(model => Model.LastName).GetHtml() @Html.DevExpress().TextBox(settings => { settings.Properties.EnableClientSideAPI = true; settings.Name = "LastName"; settings.ControlStyle.CssClass = "editor"; settings.ShowModelErrors = true; settings.Properties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText; }).Bind(Model.LastName).GetHtml() @Html.DevExpress().LabelFor(model => Model.Email).GetHtml() @Html.DevExpress().TextBox(settings => { settings.Properties.EnableClientSideAPI = true; settings.Name = "Email"; settings.ControlStyle.CssClass = "editor"; settings.ShowModelErrors = true; settings.Properties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText; }).Bind(Model.Email).GetHtml()
      Comments (2)

        How to use the same with GridView MVC control?

        DevExpress Support Team 11 years ago

          @Christine,
          While the Knockout binding may work with simple editors that use the input element for rendering, the MVC GridView is a more complex extension that does not support Knockout. I would like to underscore that our extensions do not provide support for any client-side bindings like Knockout. So, I do not suggest you use unsupported solutions. Or, you can use them carefully.

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.