Change pop-up layout and size MVC

9 posts, 1 answers
  1. David
    David avatar
    2 posts
    Member since:
    Feb 2013

    Posted 20 Feb 2013 Link to this post

    I have a grid which is editable in popup mode. I have two problems the first is that when the popup is shown it is too small and I have to scroll left to see the whole text box. Second I do not want the user to be able to change the UserId field as this is a key field generated by the database. So I either want the field hidden (including the label) or I want it disabled. 

    Having looked at the forums I think the only way to solve this is to use a template. I tried to add a template but the popup does not use it, I am new to Kendo and Javascript so would appreciate if someone could tell me why it is not picking up my template. Both Grid code and template are shown below.

    @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.UserId).Hidden(true).Width(100);
            columns.Bound(p => p.Username).Width(200);
            columns.Bound(p => p.Password).Width(250);
            columns.Command(command => { command.Edit(); });
        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddEditUser"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(u => u.UserId))
            .Read("Users", "Home")
            .Update("UserListUpdate", "Home")
        )
    )
     
    <script id="AddEditUser" type="text/kendo-tmpl">
        <div class="k-edit-label">UserId: </div>
        <div class="k-edit-field">
            <input name="UserId" disabled class="k-textbox" />
        </div>
        <div class="k-edit-label">UserName: </div>
        <div class="k-edit-field">
            <input name="Username" required class="k-textbox" />
        </div>
        <div class="k-edit-label">Password: </div>
        <div class="k-edit-field">
            <input name="Password" required class="k-textbox" />
        </div>
    </script>


    Thank you
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2213 posts

    Posted 22 Feb 2013 Link to this post

    Hello David,

    Adding a custom pop-up editor is the right way to go in the current scenario. Please take a look at this Code Library which demonstrates in detail how to achieve this. In general, the TemplateName method accepts an Editor Template name and not the id of a template defined inside a script tag.

    Please let me know if this information helped you to solve the problem.
     

    All the best,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. David
    David avatar
    2 posts
    Member since:
    Feb 2013

    Posted 08 Mar 2013 Link to this post

    Thank you for your help, The information solved one of my problems and I was able to use the template.
    However I still have a problem with the size of the window. While the pop up automatically resizes the height to fit all the template fields the width is fixed and I cannot find how to change this.

    Thank you
  4. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2213 posts

    Posted 11 Mar 2013 Link to this post

    Hi David,

    To resize the pop up window, you should bind to the edit event of the Grid and set custom styles for the editor container.
    E.g.
    .Events(e => e.Edit("onEdit"))

    function onEdit(e) {
        $(e.container).parent().css({
            width: '700px',
            height: '500px'
        });
    }

     

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. L
    L avatar
    5 posts
    Member since:
    Nov 2013

    Posted 25 Jul 2014 in reply to Dimiter Madjarov Link to this post

    Even though the width will expand.  The placement of the fields stays the same.  They line up vertically just as if the window was not widened.   
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2213 posts

    Posted 29 Jul 2014 Link to this post

    Hi David,

    You could include the following CSS style
    .k-edit-form-container {
        width: 100%;
    }
    so that the edit container is stretched to the maximal possible width.

    All the best,
    Dimiter Madjarov 
    the Telerik team
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Zachary
    Zachary avatar
    3 posts
    Member since:
    Dec 2016

    Posted 12 Apr in reply to Dimiter Madjarov Link to this post

    The example project for this is not a detailed example. For instance, if one is trying to change the properties of the window, the sample project does not include examples on the .Window method use:

     Window(w =>w.Title("Edit Stuff")
                                                                     .Width(600)
                                                                     .Resizable()
                                                                     .Animation(true)

    //what is a System.Action<Kendo.MVC.UI.Fluent.WindowPositionSettingsBuilder> ???                                                                                                                                      .Position(??????)

  8. Zachary
    Zachary avatar
    3 posts
    Member since:
    Dec 2016

    Posted 12 Apr in reply to Zachary Link to this post

    OK just figured out what the .Position methods are (Top(int), Left(int)) but these do not seem to affect the MVC UI Grid Edit PopUp position...

     Window(w =>w.Title("Edit Stuff")
                                                                     .Width(600)
                                                                     .Resizable()
                                                                     .Animation(true)

                                                                     .Position(p=>p.Top(200).Left(40))

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2213 posts

    Posted 14 Apr Link to this post

    Hello Zachary,

    You are correct, thank you for noticing this issue. I have logged it for fixing (you could follow the issue status here) and also updated your Telerik points.

    I wish you a great day!

    Regards,
    Dimiter Madjarov
    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