jQuery Dialog popup - style to look lyke kendo grid popup?

4 posts, 0 answers
  1. Nga
    Nga avatar
    8 posts
    Member since:
    Oct 2012

    Posted 23 Jan 2013 Link to this post

    Hi,

    I am using kendo grids, and the default kendo popup works in most cases, but in some advanced cases I have to popup a modal window using jQuery dialog.

    I do this like so:

    <div id="popupEdit">
        <div id="dataContainer">
        </div>
    </div>

    $(function () {
            $("#popupEdit").dialog({
                autoOpen: false,
                height: 470,
                width: 650,
                modal: true
            });

            $("#addItem")
                    .button()
                    .click(function () {
                        $("#popupEdit").dialog("open");
                    });
        });


    The jQuery popup doesn't look nearly as nice as the kendo grid popup window.
    How can I style the jQuery dialog popup to look very similar to the kendo grid popup??  
    Has anybody done this before??

    The dataContainer div gets loaded via ajax when something happens on the screen.
    Unless there is a way to popup a kendo window that would make it look like the grid popup?


    Regards.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 25 Jan 2013 Link to this post

    Hi,


    Basically supporting custom implementations using third party widgets is out of scope of our support service, however If you share more information about your current scenario and what exactly you are trying to achieve we can advice how to achieve the same behavior using KendoUI Window.

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. James
    James avatar
    2 posts
    Member since:
    Oct 2015

    Posted 07 Feb Link to this post

    I am wanting to do something similar but realise I can use teleriks own Window widget.  But It still needs a little styling and have a footer with edit and cancel buttons,  and I need to bind fields in the window to the display only fields on the main view.  I would have thought Vladimir would have pointed you in that direction.
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 09 Feb Link to this post

    Hello James,

    If you need to bind Grid model to the editors inside the Window widget you can use the following approach:

    1) Use the Grid "dataItem" method to get the model for given row.
    2) Use "kendo.bind" method to bind the model to the Window widget content (MVVM)
    3) Finally use the "kendo.unbind" method to unbind the model and close the widget

    Regards,
    Vladimir Iliev
    Telerik by Progress
    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.
Back to Top