This is a migrated thread and some comments may be shown as answers.

Change pop-up layout and size MVC

8 Answers 506 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 20 Feb 2013, 04:38 PM
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

8 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 22 Feb 2013, 12:21 PM
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!
0
David
Top achievements
Rank 1
answered on 08 Mar 2013, 11:47 AM
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
0
Accepted
Dimiter Madjarov
Telerik team
answered on 11 Mar 2013, 02:44 PM
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!
0
L
Top achievements
Rank 1
answered on 25 Jul 2014, 01:00 PM
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.   
0
Dimiter Madjarov
Telerik team
answered on 29 Jul 2014, 10:21 AM
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!
 
0
Zachary
Top achievements
Rank 1
answered on 12 Apr 2017, 01:37 PM

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

0
Zachary
Top achievements
Rank 1
answered on 12 Apr 2017, 01:46 PM

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

0
Dimiter Madjarov
Telerik team
answered on 14 Apr 2017, 08:05 AM

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.
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
David
Top achievements
Rank 1
L
Top achievements
Rank 1
Zachary
Top achievements
Rank 1
Share this question
or