Add/Edit records in a popup window

6 posts, 0 answers
  1. Mohamed
    Mohamed avatar
    26 posts
    Member since:
    Feb 2008

    Posted 06 Apr 2020 Link to this post

    Hello,
    I just start to use Telerik UI for core in razor pages project
    I have a grid holding some records. I would like to create a custom popup for new and edit records.
    The functionality for the add and edit records exist in a view component.
    The booking issues for me are
    How to use the view component with a popup window.
    After successful saving, how to close the popup window to set the focus to the grid.
    Appreciate your help, preferable with sample code.
  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 09 Apr 2020 Link to this post

    Hello Mohamed,

    To use a custom popup editor the Grid's Editable configuration must be set like this:

    .Editable(e=>e.Mode(GridEditMode.PopUp).TemplateName("MyPopup"))

    Where "MyPopup" is the name of the view with the custom editor's content. The Grid will look for it in \Pages\Shared\EditorTemplates

    The editor is a view not a ViewComponent. That said I was able to load a ViewComponent in it:

    @await Component.InvokeAsync("MyViewComponent");

    Attached you can find a sample project that demonstrates this. In it a DropDownList is initialized in the GridView that the ViewComponent loads. It can be used to edit the Grid's ShipCity column.

    I hope this points you in the right direction with regard to implementing the desired custom editor.

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Headygains
    Headygains avatar
    21 posts
    Member since:
    Dec 2019

    Posted 14 Apr 2020 in reply to Ivan Danchev Link to this post

    So if I wanted to create a template for the grid "edit" popup i would have to put it in a "\Pages" directory? 

    Is there a way to change the grid to target the "\Views" directory instead?

    Can i change the popup dynamically for the Create vs Edit pop-up?

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 15 Apr 2020 Link to this post

    Hello Dalton,

    The mentioned path is valid for Razor Pages ASP.NET Core applications, which normally don't contain a View folder. If your ASP.NET Core application uses the MVC pattern and has views and controllers the default path would be either: 

    1. ~/Views/Home/EditorTemplates where "Home" is just an exemplary controller name, so it can be substituted with a different controller name

    or

    2. ~/Views/Shared/EditorTemplates

    As for changing the popup template, there is a way to that:

    <script>
        $(function () {
            var grid = $('#grid').data('kendoGrid');
            var options = grid.options;
            options.autoBind = true;
            options.toolbar = [{ name: "create" }]
            options.editable.template = $("#template-edit").html()
            grid.setOptions(options);
        })
    </script>
    //template
    
    <script type="text/x-kendo-template" id="template-edit">
        #if(data.isNew()) {#
        #var createTemp = kendo.template($("\#createTemplate").html());#
        #=createTemp(data)#
        #} else {#
        #var editTemp = kendo.template($("\#editTemplate").html());#
        #=editTemp(data)#
        #}#
    </script>
    
    <script type="text/x-kendo-template" id="createTemplate">
        @Html.Partial("CreateTemplate")
    </script>
    
    <script type="text/x-kendo-template" id="editTemplate">
        @Html.Partial("EditTemplate")
    </script>

    It involves setting a template (#template-edit) programmatically on page load, then in the template executing conditional logic that will load another template based on whether an existing record is edited or a new one has been added. These two different templates are "#editTemplate" and "#createTemplate" respectively, and they render the actual partial views with the popup editor's content.

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Headygains
    Headygains avatar
    21 posts
    Member since:
    Dec 2019

    Posted 17 Apr 2020 in reply to Ivan Danchev Link to this post

    Wow. You're the real MVP. Thank you so much.
  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 22 Apr 2020 Link to this post

    Dalton,

    I am glad I was able to help.

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top