Grid edit popup scrolls page

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

    Posted 17 Jan 2018 Link to this post

    I have a grid on a page, and when the user double clicks one of the rows, it opens the popup editor for the selected record.  But if the user had scrolled down the page to select the record, when the popup opens, it re-scrolls to the top of the page.  Very disconcerting for the user.  

    I'm using a custom template, and not setting the top position anywhere.  Is there anyway to change how this behaves?

    @(Html.Kendo().Grid<MasterPolicy>()
          .Name("policyGrid")
          .Columns(cols =>
          {
              cols.Bound(c => c.ClientId).Title("ID").Width(75);
              cols.Bound(c => c.ClientLegalName).Title("Legal Name");
              cols.Bound(c => c.ClientDBAName).Title("DBA Name");
              cols.Bound(c => c.LocationCode).Title("Location").Width(100);
              cols.Bound(c => c.LocationWCState).Title("WC State").Width(100);
              cols.ForeignKey(f => f.ProviderId, (IEnumerable) ViewData["providers"], "RecordId", "ProviderName").Title("Provider");
              cols.Bound(c => c.PolicyId);
              cols.Bound(c => c.EffectiveDate).Format("{0:d}").Title("Effective").Width(100);
              cols.Bound(c => c.ExpirationDate).Format("{0:d}").Title("Expiration").Width(100);
              cols.Bound(c => c.PEO).Width(75);
              cols.Bound(c => c.IsError).Title("Error").ClientTemplate(
                  "<div style='text-align: center'>" +
                  "# if (IsError) { # " +
                  "<img src='" + Url.Content("~/Content/redcircle.png") + "' height='16' width='16'/>" +
                  "# } else { # " +
                  "<img src='" + Url.Content("~/Content/greencircle.png") + "' height='16' width='16'/>" +
                  "# } #" +
                  "</div>").HtmlAttributes(new { style="padding: 0 0 0 0 !important;"}).Width(75);
              cols.Command(c =>
              {
                  c.Edit();
                  c.Destroy();
              });
          })
          .Resizable(r => r.Columns(true))
          .Scrollable(s => s.Height("auto"))
          .Sortable()
          .Pageable(p => p.PageSizes(new List<object> { 10, 20, 30, 40, 50, 100, 250, 500 }).Refresh(true).ButtonCount(10))
          .Filterable(f => f.Enabled(true))
          .Selectable(s => s.Mode(GridSelectionMode.Single))
          .Events(ev =>
          {
              ev.DataBound("gridBound");
              ev.Edit("setMode");
              ev.Change("selectionChanged");
          })
          .AutoBind(true)
          .DataSource(ds => ds
              .Ajax()
              .Group(g =>
              {
                  g.Add(c => c.ClientId);
              })
              .PageSize(25)
              .ServerOperation(true)
              .Model(m =>
              {
                  m.Id(d => d.RecordId);
                  m.Field(d => d.ClientId);
                  m.Field(d => d.ClientLegalName);
                  m.Field(d => d.ClientDBAName);
                  m.Field(d => d.LocationCode);
                  m.Field(d => d.LocationWCState);
                  m.Field(d => d.ProviderId);
                  m.Field(d => d.PolicyId);
                  m.Field(d => d.EffectiveDate);
                  m.Field(d => d.ExpirationDate);
                  m.Field(d => d.PEO);
                  m.Field(d => d.IsError);
                  m.Field(d => d.Notes);
              })
              .Update(u => u.Action("SavePolicy", "Policy"))
              .Read(r => r.Action("GetPolicies", "Policy").Type(HttpVerbs.Get))
              .Destroy(c => c.Action("DeletePolicy", "Policy"))
              .Events(ev =>
              {
                  ev.RequestEnd("requestEnd");
                  ev.RequestStart("requestStart");
              })
          )
          .ToolBar(tb =>
          {
              tb.Custom().Text("Add New Policy").HtmlAttributes(new {id = "addNewPolicy", style = "float:left"});
              tb.Custom().Text("Clear Filter").HtmlAttributes(new { id = "gridFilterReset", style = "float:right;" });
              tb.Custom().Text("Collapse Groups").HtmlAttributes(new { id = "gridCollapseGroups", style = "float:right;" });
              tb.Custom().Text("Expand Groups").HtmlAttributes(new { id = "gridExpandGroups", style = "float:right;" });
              tb.Custom().Text("Run Integrity Check").HtmlAttributes(new {id = "checkIntegrity", style = "float:right;"});
              // tb.Custom().Text("DEV Save Settings").HtmlAttributes(new { id = "gridSaveSettings", style = "float:left;" });
          })
          .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("PolicyEdit").Window(w => w.Title("Edit Master Policy").Width(700)))
          .Groupable())

     

  2. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 19 Jan 2018 Link to this post

    Hello, Joe,

    I can suggest using the logic the restore the Grid scroll position. This will allow the Grid to be scrolled down when the edit form is closed:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#restore-scroll-positions

    I hope this will help to achieve the desired result.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 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