[CLOSED] Editable GridPanel with PagingToolbar add row

  1. #1

    [CLOSED] Editable GridPanel with PagingToolbar add row

    Hi,

    we use Editable, with remote filter, remote load, remote sort and remote paging GridPanel on ASP.NET MVC View. On gridpanel we add PagingToolbar, and CellEditing plugin. On client we try add row to GridPanel with JS code:

    App.GridPanel1.store.add({});
    when we add row to store, store load data from server again (loadCount = 2 after load) and our added row is removed from grid. After this when we adding rows to store, store is not loading, and grid panel works fine. We try disable autoload for store, but nothing changed. Now we disable paging toolbar and add row works fine, but we need paging on grid. How can we avoid this feature?
    Last edited by Daniil; Jun 23, 2015 at 6:49 PM. Reason: [CLOSED]
  2. #2
    Hi Andrey,

    Please provide a test case to reproduce.
  3. #3

    EditableGridPanel

    Here is our contol:

    public class FvGridPanelEditable : GridPanel
        {
            public new class Builder<TGridPanelEditable, TBuilder> : GridPanel.Builder<TGridPanelEditable, TBuilder>
                where TGridPanelEditable : GridPanel
                where TBuilder : Builder<TGridPanelEditable, TBuilder>
            {
                public Builder(TGridPanelEditable component)
                    : base(component)
                {
                    component.Load += (sender, args) => BuildGrid();
                }
    
                private bool _isInit;
                private readonly Store _store = new Store();
                private string _action = "";
                private bool _rightAdd;
                private bool _rightDelete;
                private string _gridId = ControllerHelper.CreateUnqiueid();
                private readonly IList<ColumnBase> _columns = new List<ColumnBase>();
                private readonly IList<StoreParameter> _storeParameters = new List<StoreParameter>();
    
                /// <summary>
                /// ID GridPanel
                /// </summary>
                public override TBuilder ID(string id)
                {
                    _gridId = id;
                    return base.ID(id);
                }
    
                /// <summary>
                /// Инициализация компонента
                /// </summary>
                /// <param name="actionName">Имя контроллера на котором лежит ReadData</param>
                /// <param name="userId">Use Method ControllerHelper.GetUserId(Session)</param>
                /// <param name="brRightObject">BrRight object</param>
                public TBuilder FvInit(string actionName, string userId, string brRightObject)
                {
                    _action = actionName;
                    _rightAdd = !BrRights.UserHasPermissionAdd(userId, brRightObject);
                    _rightDelete = !BrRights.UserHasPermissionDelete(userId, brRightObject);
    
                    _isInit = true;
                    return this as TBuilder;
                }
    
                /// <summary>
                /// Колонки для гриды
                /// </summary>
                public TBuilder FvGridColumns(params ColumnBase[] columns)
                {
                    foreach (var column in columns)
                        _columns.Add(column);
                    return this as TBuilder;
                }
    
                /// <summary>
                /// Параметр загрузки гриды
                /// </summary>
                public TBuilder FvAddFilterParameter(string name, string value, ParameterMode parameterMode = ParameterMode.Auto)
                {
                    _storeParameters.Add(new StoreParameter(name, value, parameterMode));
                    return this as TBuilder;
                }
    
                private void BuildGrid()
                {
                    if (!_isInit)
                        throw new Exception("Сначала необходимо инициализировать гриду вызвав метод FvInit");
    
                    _store.Proxy.Add(new AjaxProxy { Url = UrlHelper.Action(_action) });
                    var proxy = ((AjaxProxy)_store.Proxy.Primary);
                    proxy.Reader.Add(new JsonReader { RootProperty = "data" });
                    var model = new Model();
                    foreach (var columnBase in _columns)
                    {
                        if (columnBase is DateColumn)
                            model.Fields.Add(columnBase.DataIndex, ModelFieldType.Date);
                        else
                            model.Fields.Add(columnBase.DataIndex, ModelFieldType.Auto);
                    }
    
                    _store.PageSize = 15;
                    _store.RemoteFilter = true;
                    _store.RemotePaging = true;
                    _store.RemoteSort = true;
                    _store.Model.Add(model);
                    _store.AutoLoad = true;
                    _store.ID = ControllerHelper.CreateUnqiueid();
    
                    BuildStoreParameters();
    
                    ID(_gridId);
    
                    Header(false);
                    Region(Ext.Net.Region.Center);
                    Layout(LayoutType.Fit);
                    EnableColumnHide(false);
    
                    Store(_store);
    
                    //Добавление колонок на гриду
                    foreach (var column in _columns)
                        ColumnModel(column);
    
                    Plugins(new GridFilters { MenuFilterText = "Фильтр", });
                    Plugins(new CellEditing { ClicksToEdit = 1 });
                    View(new GridView { StripeRows = true });
                    SelectionModel(new CellSelectionModel());
    
                    BottomBar(new PagingToolbar());
    
                    //Добавление кнопок редактирования
                    BuildTopBarButtons();
                }
    
                private void BuildTopBarButtons()
                {
                    var toolBar = new Toolbar();
                    toolBar.Items.Add(new ToolbarFill());
    
                    var btnDelete = new Button
                    {
                        Text = "Удалить",
                        Handler = String.Format("var stor = App.{0}.store; var record = App.{0}.selModel.getSelection(); stor.remove(record)", _gridId),
                        Disabled = _rightDelete,
                        Icon = Ext.Net.Icon.Delete
                    };
    
                    var btnAdd = new Button
                    {
                        Text = "Добавить",
                        Handler = String.Format("App.{0}.store.add({{}});" +
                                                "Ext.Function.defer(function() {{" +
                                                    "App.{0}.editingPlugin.startEditByPosition({{row: App.{0}.items.length - 1, column: 0}})" +
                                                "}}, 100)", _gridId),
                        Icon = Ext.Net.Icon.Add,
                        Disabled = _rightAdd
                    };
    
                    toolBar.Items.Add(btnAdd);
                    toolBar.Items.Add(btnDelete);
    
                    TopBar(toolBar);
                }
    
                private void BuildStoreParameters()
                {
                    _store.Parameters.AddRange(_storeParameters);
                }
            }
    
            public new class Builder : Builder<FvGridPanelEditable, Builder>
            {
                public Builder(FvGridPanelEditable component) : base(component) { }
            }
        }
    Here is control using:

          x.FvGridPanelEditable()
                  .FvInit("GetWorkTime", ControllerHelper.GetUserId(Session), BrRights.ObjSdkServiceGroup)
                  .FvGridColumns(
                      FvGridColumnDescription.GetStringColumn("WeekDayId", "День недели")
                          .FvAddComboboxEditor(new FvEditorComboBoxConfig("GetWeekDays", "Name", "Id")).Width(200),
                      FvGridColumnDescription.GetDateColumn("PeriodStart", "Период работы с", false).Format("H:mm").Editor(x.TimeField()),
                      FvGridColumnDescription.GetDateColumn("PeriodEnd", "Период работы по", false).Format("H:mm").Editor(x.TimeField())
                  )
                  .FvAddFilterParameter("serviceGroupId", "App.Id.getValue()", ParameterMode.Raw)
                  .ID("grdWorkTime")
    This code on client that create this truble:

              Handler = String.Format("App.{0}.store.add({{}});" +
                         "Ext.Function.defer(function() {{" +
                                   "App.{0}.editingPlugin.startEditByPosition({{row: App.{0}.items.length - 1, column: 0}})" +
                         "}}, 100)", _gridId)
    Last edited by Andrey; Jun 12, 2015 at 3:45 AM.
  4. #4
    Thank you, but, unfortunately, I could not run the test case. I tried to extract some parts from your code and put it into my simplified test case, but the issue didn't reproduce.

    Please provide a full test case that we could copy, paste and run.
  5. #5

    Example

    Here an example. We detect, that when action controller ReadData return data, not emty list, than rows adding works fine, if list is empty, than grid reload store after adding row.

    Controller:

            public ActionResult GridPanel()
            {
                return View();
            }
    
            public ActionResult ReadData(StoreRequestParameters requestParameters)
            {
                var list = new List<object>();
    //            list.Add(new { Column1 = "Column11", Column2 = "Column21" });
    //            list.Add(new { Column1 = "Column12", Column2 = "Column22" });
    //            list.Add(new { Column1 = "Column13", Column2 = "Column23" });
                return this.Store(list.AsQueryable().Skip(requestParameters.Start).Take(requestParameters.Limit), list.Count);
            }
    View:

    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>GridPanel</title>
    </head>
        <body>
            
            @Html.X().ResourceManager().Theme(Theme.Gray)
            
            @(Html.X().GridPanel()
                  .ID("grd")
                  .BottomBar(Html.X().PagingToolbar())
                  .Plugins(Html.X().CellEditing())
                  .Buttons(Html.X().Button().Text("Add new").Listeners(r => r.Click.Handler = "App.grd.store.add({})"))
                  .Store(
                      Html.X().Store()
                          .PageSize(2)
                          .RemotePaging(true)
                          .AutoLoad(true)
                          .Proxy(
                              Html.X().AjaxProxy()
                                  .Url("ReadData")
                                  .Reader(
                                      Html.X().JsonReader().RootProperty("data")
                                  )
                          )
                          .Model(Html.X().Model().Fields(
                                    Html.X().ModelField().Name("Column1").Type(ModelFieldType.String),
                                    Html.X().ModelField().Name("Column1").Type(ModelFieldType.String)
                              )
                          )
                  )
                  .ColumnModel(
                      Html.X().Column().Text("Column 1").DataIndex("Column1").Width(300).Editor(Html.X().TextField()),
                      Html.X().Column().Text("Column 2").DataIndex("Column2").Width(300).Editor(Html.X().TextField())
                  )
            )
            
        </body>
    </html>
  6. #6
    Thank you for the test case.

    Yes, remote paging and adding records locally is a trick scenario a bit.

    I can provide a workaround.
    Html.X().Button()
        .Text("Add new")
        .Handler("add")
    )
    var add = function() {
        var store = App.grd.getStore();
    
        if (store.getCount() === 0 && store.currentPage === 1) {
            store.currentPage = 0;
        }
    
        store.add({});
    };
    Though, as you can see the PagingToolbar doesn't update its information fields according to local records. It doesn't quite support it.
  7. #7

    It's work

    Works fine, thank you!

Similar Threads

  1. Replies: 12
    Last Post: Sep 07, 2012, 2:42 PM
  2. [CLOSED] Gridpanel and PagingToolbar bug?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 03, 2011, 10:25 AM
  3. [CLOSED] [1.0] Help PagingToolbar GridPanel
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 09, 2010, 2:12 PM
  4. [CLOSED] GridPanel and PagingToolBar on MVC
    By gdg@abaksoftware.com in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 26, 2010, 6:06 PM
  5. [CLOSED] [1.0] GridPanel and PagingToolbar bug
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 23, 2010, 4:48 PM

Tags for this Thread

Posting Permissions