Change pop-up layout and size MVC

[David]

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

[Dimiter Madjarov]

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

[David]

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

[Dimiter Madjarov]

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

[L]

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.   

[Dimiter Madjarov]

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

 

[Zachary]

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(??????)

[Zachary]

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))

[Dimiter Madjarov]

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