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

Popup Edit Window width

4 Answers 1157 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 19 Sep 2017, 07:46 PM

I know in my Grid, I can set the Width of the PopUp Edit dialog.  However, the controls inside of that edit window do not seem to care about the width of the window.  For example, here is my Grid code:

@(Html.Kendo().Grid<Provider>()
    .Name("providerGrid")
    .Columns(cols =>
    {
        cols.Bound(c => c.ProviderName);
        cols.Bound(c => c.Active).ClientTemplate("#: Active ? 'Yes' : 'No' #");
        cols.Command(c =>
        {
            c.Edit();
            c.Destroy();
        });
    })
    .DataSource(ds => ds
        .Ajax()
        .Model(m =>
        {
            m.Id(d => d.RecordId);
            m.Field(d => d.ProviderName);
            m.Field(d => d.Active);
        })
        .Update(u => u.Action("UpdateProvider", "Policy"))
        .Read(r => r.Action("GetProviders", "Policy").Type(HttpVerbs.Get))
        .Destroy(d => d.Action("DeleteProvider", "Policy"))
    )
    .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("ProviderEdit").Window(w => w.Title("Edit Provider").Width(500)))
)

 

But the edit window looks like utter crap now.  See attached image. SO what do I need to do to actually get a decent looking edit dialog in this thing?

The more and more I work with this grid, the more and more I dislike it.  It's basic functionality, out of the box really is quite lame.  The only way to get a decent grid is by overriding everything in it, and I'm so very tired of writing grids...  ARGH!!!  

Sorry about that last bit, just had to vent for a bit...

 

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 21 Sep 2017, 10:58 AM
Hello, Joe,

I'm sorry to hear that you find the Kendo UI Grid configuration frustrating.

We try to provide many configuration options and examples to help in the most common scenarios based on the community feedback and demands.

As for the elements inside the Editor template, they can be customized as desired, as this is one of the main points of the custom popup template. It allows the developer to set the desired fields and to positioned them in a preferred way.

In this case, I can suggest setting the width attribute of the elements to 90% or 100%.

.HtmlAttributes(new { style = "width: 100%" })

As for the small line between the editors and the buttons, it is from the border from the following container ".k-edit-form-container .k-edit-buttons".

If you think that there are some specific areas which can be improved, the feedback is highly appreciated, as we try to improve the Kendo UI widgets as much as possible based on the community feedback.

Regards,
Stefan
Progress Telerik
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.
0
Joe
Top achievements
Rank 1
answered on 21 Sep 2017, 02:15 PM

Thanks.  Through some trial and error (probably spent way too much time on it, but oh well) I eventually found this little nugget of wisdom on the interwebs:

.k-edit-form-container {
       padding: 5px;
       width: 97%;
   }

 

It took care of it for me.  I had to use 97% percent because anything between 98 - 100 caused a scrollbar to show up on the bottom, and everything exceeded beyond the border of the window by a wee bit...  Setting the individual components HtmlAttributes did not give the results I was looking for.

0
Stefan
Telerik team
answered on 25 Sep 2017, 10:09 AM
Hello, Joe,

Thank you for sharing the solution with the Kendo UI community. This is highly appreciated.

If you have additional questions on this matter, we will be happy to assist.

Regards,
Stefan
Progress Telerik
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.
0
IanV
Top achievements
Rank 1
Veteran
answered on 15 Nov 2017, 03:28 AM
That was a very well written and kind reply.
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Joe
Top achievements
Rank 1
IanV
Top achievements
Rank 1
Veteran
Share this question
or