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

Grid edit popup scrolls page

1 Answer 101 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 17 Jan 2018, 04:34 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 19 Jan 2018, 08:13 AM
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.
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or