How to use either the new Form or Wizard as a popup editor

2 posts, 0 answers
  1. Bas
    Bas avatar
    9 posts
    Member since:
    Feb 2017

    Posted 17 Jul 2020 Link to this post

    I am trying to use either the new Form or Wizard widget as a popup editor, but it does not bind the data item to the widget.
    Is this supported? Is there a way I can archive this?

    Thanks

  2. Aleksandar
    Admin
    Aleksandar avatar
    265 posts

    Posted 22 Jul 2020 Link to this post

    Hello Bas,

    The Form and the Wizard components are quite new and such integration is not yet supported. The Grid has a separate implementation for rendering its popup fields that interferes with the Form component. The correct way to achieve the desired result is to first integrate the From component inside the Grid as a built-in editor and also allow for rendering the Form with custom configuration if a template is specified.

    We already have a Feature Request on this functionality and I would urge you to vote on it, so it moves ahead in our priority queue:

    https://feedback.telerik.com/kendo-jquery-ui/1468032-utilize-the-new-form-component-in-the-grid-edit-popup

    If the requirement is to achieve ta similar look as the Form as a temporary workaround you could try to build a custom template using the Form markup classes to achieve a similar look, for example:

     

    @model MyApp.Models.ProductViewModel
    
    <div class="k-form">
        <fieldset class="k-form-fieldset">
            <legend class="k-form-legend">Edit Form</legend>
    
            <div class="k-form-field">
                @Html.LabelFor(model => model.ProductID, new { @class = "k-label" })
                <div class="k-form-field-wrap">
                    @Html.TextBoxFor(model => model.ProductID, new { @class = "k-textbox" })
                </div>
            </div>
    
            <div class="k-form-field">
                @Html.LabelFor(model => model.ProductName, new { @class = "k-label" })
                <div class="k-form-field-wrap">
                    @Html.TextBoxFor(model => model.ProductName, new { @class = "k-textbox" })
                </div>
            </div>
        </fieldset>
    </div>

     

    Regards,
    Aleksandar
    Progress Telerik

Back to Top