[CLOSED] grid doesn't reload after reset

  1. #1

    [CLOSED] grid doesn't reload after reset

    Hi,

    I am creating and loading a grid panel dynamically upon click of a "Create" button on UI which calls the Create() function in JS. Everything works fine till here, grid gets created with the correct data, then saving the data by pressing SAVE button ("Save()" function in below code) and reseting the grid(Reset() function in below code called from within Save()).
    But the grid doesn't load the data second time when I create the grid again (by pressing Create button again on UI). I am not able to understand why it is not loading the data after reset of a grid. Am I resetting it wrong way?

    Please help,
    Thanks

    cshtml file
    X.Panel().Items(
    
    X.FormPanel().ID("myPanel").DefaultButton("btnCreate").Layout(LayoutType.HBox).AutoScroll(true)
                .Items
                (
                )
    )
    
    )
    js code:

    
    var matrixGrid;
    
    function Reset()
    {
        matrixGrid.getStore().removeAll();
        matrixGrid.getStore().loadData([], false);
        matrixGrid.reconfigure(null, null);
    }
    
    function Save()
    {
         if(SaveSuccessfull)
           Reset();
    }
    
    
    
    function Create()
    {
    $.ajax({        url: "/Home/Create",
            data: JSON.stringify({ inputdata: selectedValues }),
            async: false,
            type: "POST",
            contentType: 'application/json',
            success: function (result) {
                
                    var columns = [];
                    var _fields = [];
                    var data = {
                        Key: [],
                        Value: []
                    };
    
    
                    var nameCount = 0;
                    var resultSet = result.result;
                    resultSet.forEach(function (element) {
                        for (var key in element) {
                            if (element.hasOwnProperty(key)) {
                                var keyStr = key;
                               
                                
                                        data.Key.push(keyStr);
                                        data.Value.push(element[key]);
                               
                                    
                                }
                            }
                        }
                        
                    });
    
    
                    var column;
    
    
                    var count = 0;
                    resultSet.forEach(function (element, index, ar) {
                        
                        for (var key in element) {
                            if (!element.hasOwnProperty(key)) continue;
                            if (element.hasOwnProperty(key)) {
                                var field = {};
                                var elementValue = element[key];
                                var typeCheck = typeof elementValue;
                                
                                field['name'] = key;
                                if (key.startsWith('Completed')) {
                                    field['type'] = 'date';
                                    field['submitFormat'] = 'm/d/Y';
                                    field['submitValue'] = true;
                                }
                                else {
                                    switch (typeCheck) {
                                        case 'number':
                                            field['type'] = 'int';
                                            break;
                                        case 'boolean':
                                            field['type'] = 'string';
                                            break;
                                        case 'string':
                                            field['type'] = 'string';
                                            break;
                                        case 'object':
                                            field['type'] = 'object';
                                            break;
                                        case 'date':
                                            field['type'] = 'date';
                                            break;
                                        default:
    
    
                                    }
                                }
    
    
                                _fields.push(field);
                                if (key == 'EmployeeId' || key == 'EmployeeGroup'
                                    || key == 'GroupMemberId') {
                                    column = Ext.create('Ext.grid.column.Column', {
                                        text: key,
                                        dataIndex: key,
                                        hidden: true
                                    });
                                    columns.push(column);
                                }
                                else {
                                    if (!key.startsWith('EmployeeName') && !key.startsWith('EmployeeStatus') && !key.startsWith('Completed')) {
                                        column = Ext.create('Ext.grid.column.Column', {
                                            text: key,
                                            dataIndex: key,
                                            width: 80
                                        });
                                        columns.push(column);
                                        
                                    }
                                   
                                }
                                
                            }
                        }
                    });
    
    
                            var keyValue = data.Key;
                            var values = data.Value;
                            var nameKeyValue = [];
                            var nameFinalValue;
                            for (var i = 0; i < keyValue.length; i++) {
                                for (var j = 0; j < values.length; j++) {
                                    if (keyValue[i].startsWith('Name')) {
                                        nameKeyValue.push(values[j]);
                                    }
                                    
                                }
                            }
                            for (var i = 0; i < keyValue.length; i++) {
                                nameFinalValue = nameKeyValue[i];
    
    
                                    if (keyValue[i].startsWith('Name')) {
    
    
                                        var status = keyValue[i + 1];
                                        var completed = keyValue[i + 2];
                                        column = Ext.create('Ext.grid.column.Column', {
                                            text: nameFinalValue,
                                            dataIndex: nameFinalValue,
                                            columns: [
                                                Ext.create('Ext.grid.column.Column', {
                                                    text: 'Employee Status',
                                                    dataIndex: status,
                                                    width: 80,
                                                    stopSelection: false,
                                                    editable: true,
                                                    editor: {
                                                        xtype: 'checkbox'
                                                    },
                                                    field: { xtype: 'checkbox' }
                                                }),
                                                Ext.create('Ext.grid.column.Column', {
                                                    text: 'Completed',
                                                    dataIndex: completedOn,
                                                    width: 80,
                                                    editor: new Ext.form.DateField({
                                                        xtype: 'datefield',
                                                        format: 'm/d/y',
                                                        renderer: Ext.util.Format.dateRenderer('m/d/Y')
                                                    })
                                                })
                                            ]
                                        });
                                        columns.push(column);
                                    }
                                
    
    
                            }
    
    
                        
                    // *** new code
                    var store = Ext.create("Ext.data.Store", {
                        id: 'myStore',
                        fields: _fields,
                        groupField: 'Group',
                        proxy: {
                            type: 'ajax',
                            reader: {
                                type: 'json',
                                root: 'data'
                            }
                        }
                    });
                    matrixGrid = Ext.create('Ext.grid.Panel', {
                                       
                                       store: Ext.data.StoreManager.lookup('myStore'),
                                       columns: columnsArr,
                                       selModel:sm,
                                       plugins: [
                                       Ext.create('Ext.grid.plugin.CellEditing', {
                                           clicksToEdit: 1,
                                           listeners: {
                                               'edit': function (editor, e, eOpts) {
                                                  onEdit(editor, e, eOpts);
                                   }
                                  }
                          })
            ],
            features: [groupingFeature],
            viewConfig: {
                stripeRows: true,
                trackOver: true
            }
        });
    
        var frmPanel = App.myPanel;
        frmPanel.add(matrixGrid);
        frmPanel.doLayout();
    
        matrixGrid.getView().refresh();
        matrixGrid.getStore().loadData(result.result);
    
        selectedValues = [];
        columnsArr = [];
        
                 
                }
            }
        });
    }
    Last edited by fabricio.murta; Aug 09, 2016 at 8:26 PM.
  2. #2
    Hello! Please provide a simplified & runnable sample so we can reproduce the issue exactly as you are describing and be able to provide you with advice on how to attain your goal.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @fabricio.murta

    I have attached a test case for you: to reproduce below are the steps:
    1) Click on create button, and grid will created with the data
    2) click Reset button, and the grid will remove all its records
    3) click Create button again, data will not load this time, and I just want to know why it's not loading data after reset?

    Thanks



    cshtml code:

    X.FormPanel().ID("myPanel").DefaultButton("btnCreate").Layout(LayoutType.HBox).AutoScroll(true)
    .TopBar
                (
                    X.Toolbar().Padding(6).Height(35).Flex(1)
                    .Items
                    (
                        X.Label().Text("Employees View").Cls("panel-title"),
                        X.ToolbarFill().Flex(1),
                        X.Button().Text("Create Employee").ID("btnCreate")
                        .Listeners(li => li.Click.Handler = "Create()"),
                        X.Button().Text("Reset").ID("btnClear")
                        .Listeners(li => li.Click.Handler = "Reset()")                    
                    )
                )
                .Items
                (
                )
    )

    js Code
    
    var testGrid;
    
    function Reset()
    {
        testGrid.getStore().removeAll();
        //testGrid.getStore().loadData([], false);
        //    testGrid.reconfigure(null, null);
    }
    
    
    function Create()
    {
        var store = Ext.create('Ext.data.Store', {
            storeId: 'employeeStore',
            fields: ['name', 'seniority', 'department'],
            groupField: 'department',
            data: {
                'employees': [
                    { "name": "Michael Scott", "seniority": 7, "department": "Management" },
                    { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
                    { "name": "Jim Halpert", "seniority": 3, "department": "Sales" },
                    { "name": "Kevin Malone", "seniority": 4, "department": "Accounting" },
                    { "name": "Angela Martin", "seniority": 5, "department": "Accounting" }
                ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'employees'
                }
            }
        });
    
        testGrid = Ext.create('Ext.grid.Panel', {
            title: 'Employees',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [
                { text: 'Name', dataIndex: 'name' },
                { text: 'Seniority', dataIndex: 'seniority' }
            ],
            features: [{ ftype: 'grouping' }],
            width: 200,
            height: 275,
        });
    
    
        var frmPanel = App.myPanel;
        frmPanel.add(testGrid);
        frmPanel.doLayout();
    }
  4. #4
    Hello @sharmav1!

    Please provide a simplified but runnable code chunk. You may think this is stupid to ask as it maybe be just a matter of making a HTML script block and adding the javascript to the same cshtml file I add the provided CSHTML code but this also may be in many situations just what strays us from the actual test case you want us to reproduce. I hope you understand, and am looking forward for the reviewed version so we can provide you an accurate reply for your question!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi @fabricio.murta,

    This should be all I think.

    Thanks

    EmployeeView.cshtml:

    @{
        var X = Html.X();
    }
    @section sectionCenter
    {
    <script src="~/Scripts/Document/TrainingView.js"></script>
    @(
            X.FormPanel().ID("myPanel").DefaultButton("btnCreate").Layout(LayoutType.HBox).AutoScroll(true)
    .TopBar
                (
                    X.Toolbar().Padding(6).Height(35).Flex(1)
                    .Items
                    (
                        X.Label().Text("Employees View").Cls("panel-title"),
                        X.ToolbarFill().Flex(1),
                        X.Button().Text("Create Employee").ID("btnCreate")
                        .Listeners(li => li.Click.Handler = "Create()"),
                        X.Button().Text("Reset").ID("btnClear")
                        .Listeners(li => li.Click.Handler = "Reset()")                    
                    )
                )
                .Items
                (
                )
    )
                
                )
    }
    TrainingView.js

    var testGrid;
    
    function Reset()
    {
        testGrid.getStore().removeAll();
        
    }
    
    
    function Create()
    {
        var store = Ext.create('Ext.data.Store', {
            storeId: 'employeeStore',
            fields: ['name', 'seniority', 'department'],
            groupField: 'department',
            data: {
                'employees': [
                    { "name": "Michael Scott", "seniority": 7, "department": "Management" },
                    { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
                    { "name": "Jim Halpert", "seniority": 3, "department": "Sales" },
                    { "name": "Kevin Malone", "seniority": 4, "department": "Accounting" },
                    { "name": "Angela Martin", "seniority": 5, "department": "Accounting" }
                ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'employees'
                }
            }
        });
    
        testGrid = Ext.create('Ext.grid.Panel', {
            title: 'Employees',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [
                { text: 'Name', dataIndex: 'name' },
                { text: 'Seniority', dataIndex: 'seniority' }
            ],
            features: [{ ftype: 'grouping' }],
            width: 200,
            height: 275,
        });
    
    
        var frmPanel = App.myPanel;
        frmPanel.add(testGrid);
        frmPanel.doLayout();
    }
    EmployeeController.cs

    public class EmployeeController : Controller
        {
            
            public EmployeeController()
            {
                
            }
            // GET: Document
            public ActionResult Employee()
            {
                return View();
            }
            
    
        }
    Last edited by sharmav1; Aug 08, 2016 at 11:53 AM.
  6. #6
    It's been few days I am looking for some help from this forum, someone from support team please help on this issue
  7. #7
    Hello, I have here you sent your reply yesterday, we need at least one business day to reply your questions. In fact, I'm working on your case right now, so if you give us a few minutes, I'll be responding it soon!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    And well, as for the reply, you get new grids created every time you click the button, right? Like below when I follow your step-by-step:

    Click image for larger version. 

Name:	61338-newGridEachClick.png 
Views:	100 
Size:	10.0 KB 
ID:	24707

    I see on your create() function you are creating a grid and store every time the Create Employee button is clicked, and then add the just created panel to the form panel. And that's exactly what I see happening in practice.

    If you want to update the grid once it is created you may:
    a. change logic on create() to destroy the first grid before creating a new one (if it exists)
    b. destroy the existing grid once clicking the Remove button (so your create() function can be kept intact)
    c. change logic on create() to 'remember it' after first creating the grid, and then just reload/repopulate the store of the grid (which you can recover if you give it an ID and fetch with Ext.getCmp('<id>');).

    So, pick your choice, and I'm sure the panel will perform exactly as you want it to!

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  9. #9
    By the way, I ended up joining the javascript in the view and removed lines clearly not important to reproduce the issue (empty Items() in razor syntax and commented JavaScript lines).

    Very important also, is to run the example without a layout page, so the view contains full code free of outside interferences. See how it looks after the changes:

    @{
        Layout = null; // do not use a layout frame, set the full page here
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>c61224_Index</title>
    
        <script type="text/javascript">
            var testGrid;
    
            function Reset() {
                testGrid.getStore().removeAll();
            }
    
            function Create() {
                var store = Ext.create('Ext.data.Store', {
                    storeId: 'employeeStore',
                    fields: ['name', 'seniority', 'department'],
                    groupField: 'department',
                    data: {
                        'employees': [
                            { "name": "Michael Scott", "seniority": 7, "department": "Management" },
                            { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
                            { "name": "Jim Halpert", "seniority": 3, "department": "Sales" },
                            { "name": "Kevin Malone", "seniority": 4, "department": "Accounting" },
                            { "name": "Angela Martin", "seniority": 5, "department": "Accounting" }
                        ]
                    },
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json',
                            root: 'employees'
                        }
                    }
                });
    
                testGrid = Ext.create('Ext.grid.Panel', {
                    title: 'Employees',
                    store: Ext.data.StoreManager.lookup('employeeStore'),
                    columns: [
                        { text: 'Name', dataIndex: 'name' },
                        { text: 'Seniority', dataIndex: 'seniority' }
                    ],
                    features: [{ ftype: 'grouping' }],
                    width: 200,
                    height: 275,
                });
    
                var frmPanel = App.myPanel;
                frmPanel.add(testGrid);
                frmPanel.doLayout();
            }
        </script>
    </head>
    <body>
        <div> 
            @Html.X().ResourceManager()
            @(
                Html.X().FormPanel().ID("myPanel").DefaultButton("btnCreate").Layout(LayoutType.HBox).AutoScroll(true)
                    .TopBar
                    (
                        Html.X().Toolbar().Padding(6).Height(35).Flex(1)
                            .Items
                            (
                                Html.X().Label().Text("Employees View").Cls("panel-title"),
                                Html.X().ToolbarFill().Flex(1),
                                Html.X().Button().Text("Create Employee").ID("btnCreate")
                                    .Listeners(li => li.Click.Handler = "Create()"),
                                Html.X().Button().Text("Reset").ID("btnClear")
                                    .Listeners(li => li.Click.Handler = "Reset()")
                            )
                    )
            )
        </div>
    </body>
    </html>
    For the view, it helps a lot running the test cases quickly. The controller is still just like the one you provided.

    I hope this helps next time to have a shorter wait time for support! But when you post something Friday end of day, there's a chance you are only getting the reply on Monday, hope you understand.
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Hi @fabricio.murta

    Thanks for all your help. I really appreciate all help you provided.

    I solved the issue on my own, the issue was due to the form panel items collection. I was adding my grid dynamically to form panel without clearing the previous one, so form panel kept adding all those grids whenever I clicked a create button to create new grid.

    so all I did is clearing form panel items collection before adding new grid to it
    frmPanel.items.clear()
    thanks again

Similar Threads

  1. [CLOSED] reset grid states
    By susanz in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 04, 2015, 4:13 AM
  2. [CLOSED] Reset Grid
    By CanopiusApplications in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 17, 2014, 10:54 AM
  3. [CLOSED] Reset store's sort info on grid reload/reconfigure
    By jchau in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 10, 2010, 4:06 PM
  4. Reset Grid Pager
    By kumarxlnt in forum 1.x Help
    Replies: 2
    Last Post: Jan 08, 2010, 5:01 AM
  5. How to reset the gridview's page when store reload?
    By tangcan2003 in forum 1.x Help
    Replies: 1
    Last Post: Mar 06, 2009, 12:15 PM

Tags for this Thread

Posting Permissions