Popup Edit Window width

5 posts, 0 answers
  1. Joe
    Joe avatar
    220 posts
    Member since:
    May 2012

    Posted 19 Sep 2017 Link to this post

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

     

  2. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 21 Sep 2017 Link to this post

    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.
  3. Joe
    Joe avatar
    220 posts
    Member since:
    May 2012

    Posted 21 Sep 2017 in reply to Stefan Link to this post

    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.

  4. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 25 Sep 2017 Link to this post

    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.
  5. IanV
    IanV avatar
    35 posts
    Member since:
    Dec 2008

    Posted 14 Nov 2017 in reply to Stefan Link to this post

    That was a very well written and kind reply.
Back to Top