Question

Tiled view

Hi team

how to set up a default view of file attachment view as Tiled View.

hoping for a positive reply.

regards

manikanta

Like 0

Like

8 comments

Hi manikanta,

Add a replacing client for filedetailV2 and 

change the following method ,

setTiledMode: function() {

                this.changeDetailMode("tiled");

            },

            /**

             * Sets listed mode.

             * @private

             */

            setListedMode: function() {

                this.changeDetailMode("listed");

            },

            /**

             * Sets the default mode.

             * @private

             */

            setDefaultMode: function() {

                this.setTiledMode();

            },

 

 

Hi Sethuraghav,

Thanks for the suggestion, even I tried doing the same but it just changed the icon to titled mode as default and the grid still remains in list view. Screenshot of the same is attached for reference. Kindly help me to achieve the same

manikanta,

Hi Sethuraghav

manikanta,

Try to reload data after changing the mode as it was done in the  "changeDetailMode" method. 

Eugene Podkovka,

hi Eugene Podkovka, I have tried changeDetailMode method also. but its still it's not showing default view as Tiled . Kindly help me.

                    changeDetailMode: function(value) {

                        var mode = this.get("Mode");

                        if (value === mode) {

                            return;

                        }

                        this.set("Mode", value);

                        this.deselectRows();

                        this.set("isImageManagerDetailView", mode === "tiled");

                        this.reloadCollectionData();

                    },

                    /**

                     * Sets the default mode.

                     * @private

                     */

                    setDefaultMode: function() {

                        this.settiledMode();

                    }

 

manikanta,

I tried below code for changing the default view to tilted view, it swaped the functionality between icons but didn't set titled view(icon and grid) as default. Can you check why is breaking and help me to resolve this.

following code:

i am copied these code in diff section 

                diff: [

    {

                "operation": "merge",

                "name": "DataGrid",

                "values": {

                    "type": "tiled",

                    "visible": {

                        "bindTo": "isImageManagerDetailView",

                        "bindConfig": {"converter": "getDataGridVisible"}

                    }

                /*listedConfig": {

                        "name": "DataGridListedConfig",

                        "items": [

                            {

                                "name": "NameListedGridColumn",

                                "bindTo": "Name",

                                "position": {

                                    "column": 1,

                                    "colSpan": 7

                                }

                            },

                            {

                                "name": "DescriptionColumn",

                                "bindTo": "Notes",

                                "position": {

                                    "column": 8,

                                    "colSpan": 8

                                }

                            },

                            {

                                "name": "TypeColumn",

                                "bindTo": "Type",

                                "position": {

                                    "column": 17,

                                    "colSpan": 2

                                }

                            },

                            {

                                "name": "CreatedOnColumn",

                                "bindTo": "CreatedOn",

                                "position": {

                                    "column": 19,

                                    "colSpan": 3

                                }

                            },

                            {

                                "name": "CreatedByColumn",

                                "bindTo": "CreatedBy",

                                "position": {

                                    "column": 22,

                                    "colSpan": 3

                                }

                            }

                        ]

                    },

                    "tiledConfig": {

                        "name": "DataGridTiledConfig",

                        "grid": {

                            "columns": 24,

                            "rows": 3

                        },

                        "items": [

                            {

                                "name": "NameTiledGridColumn",

                                "bindTo": "Name",

                                "position": {

                                    "row": 1,

                                    "column": 1,

                                    "colSpan": 24

                                },

                                "type": Terrasoft.GridCellType.LINK

                            },

                            {

                                "name": "ModifiedByTiledGridColumn",

                                "bindTo": "ModifiedBy",

                                "position": {

                                    "row": 1,

                                    "column": 25,

                                    "colSpan": 12

                                }

                            },

                            {

                                "name": "VersionTiledGridColumn",

                                "bindTo": "Version",

                                "position": {

                                    "row": 1,

                                    "column": 27,

                                    "colSpan": 12

                                }

                            },

                            {

                                "name": "ModifiedOnTiledGridColumn",

                                "bindTo": "ModifiedOn",

                                "position": {

                                    "row": 1,

                                    "column": 39,

                                    "colSpan": 12

                                }

                            },

                            {

                                "name": "SizeTiledGridColumn",

                                "bindTo": "Size",

                                "position": {

                                    "row": 1,

                                    "column": 51,

                                    "colSpan": 12

                                }

                            }

                        ]

                    },*/

                //    "linkClick": {"bindTo": "linkClicked"}

                }

            }                

                    

                    

                ],

Methods:

                reloadCollectionData: function(currentCollection) {

                var collection = this.Ext.create("Terrasoft.BaseViewModelCollection");

                var gridDataCollection = this.getGridData();

                collection.loadAll(gridDataCollection);

                if (currentCollection) {

                    collection.loadAll(currentCollection);

                }

                gridDataCollection.clear();

                collection.each(this.decorateItem, this);

                gridDataCollection.loadAll(collection);

            },

            /**

             * @inheritdoc Terrasoft.BaseGridDetailV2#switchGridMode

             * @overridden

             */

            switchGridMode: function() {

                this.deselectRows();

                var multiSelect = this.get("MultiSelect");

                this.set("MultiSelect", !multiSelect);

                this.reloadCollectionData();

            },

                    changeDetailMode: function(value) {

                        var mode = this.get("Mode");

                        if (value === mode) {

                            return;

                        }

                        this.set("Mode", value);

                        this.deselectRows();

                        this.set("isImageManagerDetailView", mode === "tiled");

                        this.reloadCollectionData();

                    },

                    /**

                     * Sets the default mode.

                     * @private

                     */

            setTiledMode: function() {

                this.changeDetailMode("tiled");

            },

            /**

             * Sets listed mode.

             * @private

             */

            setListedMode: function() {

                this.changeDetailMode("listed");

            },

            /**

             * Sets the default mode.

             * @private

             */

            setDefaultMode: function() {

                this.setTiledMode();

            }

                }

 

Please debug the "changeDetailMode" method. Find the difference in all values while switching between the modes and apply the values to the default mode.

HI,

in my case, I changed the changeDetailMode function in the replacing client schema of FileDetailV2 become like this:

 

/**
 * Changes detail mode.
 * @private
 * @param {String} value New mode.
 */
changeDetailMode: function(value) {
    var mode = this.get("Mode");
 
    // ----added below code----
    if (!mode) {
        mode = "listed";
    }
    // ----------------------
 
    if (value === mode) {
        return;
    }
    this.set("Mode", value);
    this.deselectRows();
    this.set("isImageManagerDetailView", mode === "listed");
    this.reloadCollectionData();
},

after logout and login back , the default attachment view mode is tiled.

Show all comments