Binding data to popup window

4 posts, 0 answers
  1. Joe
    Joe avatar
    220 posts
    Member since:
    May 2012

    Posted 15 Jun 2017 Link to this post

    I have an MVC page that is displaying certain data via a series of observable variables (or actually properties since it's an viewModel object).  All simple stuff as it relates to MVVM really.  Everything works really well.  Change the value of the variable, and the data in the appropriate spans within the page updates automagically.  Love it.

    However, now I'm adding a Kendo Window, initially not visible when the page loads.  When the user presses a button, I want the window to open with a form for editing the data.  I've added the appropriate html inputs, and also added the data binding on the control to the same MVVM variables used to display on the page, but when I open the dialog, the data isn't populated with the MVVM variables that are otherwise displaying a-ok on the screen.

    Sure, upon the opening of the window, I could use jQuery to populate the form, but I wanted to use the bound MVVM variables.

    So is there a trick to this?  I'm no stranger to the concept of MVVM having used Knockout for a long while before switching to the Telerik MVVM.  I've been using it for close to a year, but always just to display data updates on a screen via an ajax call.  (after an AJAX call, setting the appropriate viewModel properties, and they update on the bound spans within the page).

  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    2062 posts

    Posted 19 Jun 2017 Link to this post

    Hello Joe,

    Eventually in order to help you in more efficient way we would need an example that shows the described problem. For example there is a Edit Records Using External Forms that shows how to use a completely separate form using MVVM to edit records in the Kendo UI Grid. Could you please modify or prepare a new sample to replicate the problem? 

    Boyan Dimitrov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Riley
    Riley avatar
    2 posts
    Member since:
    Oct 2015

    Posted 22 Feb in reply to Boyan Dimitrov Link to this post


    I'm going to second what Joe has requested (many years later).

    Using your example - how would you make the form into a popup window, binding the data from the grid to the window, and opening the window by clicking a button in the grid? And do this using an MVVM structure (eg. data-bind="data: myData") for the entirety of the fields within the window. The example you provided does not use an MVVM structure to do so, but relies on jQuery which is something Joe (and I) didn't want to have to do.

    All examples of the popup window I've seen have not been bound to data - even the MVVM popup example is based on a template with hardcoded data. What Joe and I are asking for is an example on how to bind data to the popup window within the view using a 'data-' tag.

  4. Ianko
    Ianko avatar
    1955 posts

    Posted 25 Feb Link to this post

    Hi Riley,

    The scenario highlight demands some custom code implementation as the content of the window is not template-able by design and it cannot be dynamically set via observables. 

    However here you are a solution with a custom binder that may help you out further on implementing what you require. 

    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Back to Top