Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Lock Columns in CQ.Ext.grid.EditorGridPanel

Avatar

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
ykumarreddy
Level 1

15-10-2015

Hi,

 

I want to lock first 3 columns in CQ.Ext.grid.EditorGridPanel when horizontal scroll bar is enable.  

My requirement is, in Translator.html (http://localhost:4502/libs/cq/i18n/translator.html)  I wan to lock the first 3 columns in the grid.  is there any way I can customize the existing code.

 

Please help me how to edit the component.

 

Regards,

Kumar 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

15-10-2015

Looks like the AEM widget data type does not have a locking method:

https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.grid.GridPanel

Answers (6)

Answers (6)

Avatar

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
ykumarreddy
Level 1

15-10-2015

Thank you.  Is there any other way I can achieve this.  Currently I am using AEM 6.0.

 

Regards,

Kumar

Avatar

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
ykumarreddy
Level 1

15-10-2015

Hi,

 

I tried this option and still columns are not locked.

 

My code.

 

In Translator.js.

 

I changed below method.

 

    var cmCfg = {
        // specify any defaults for each column
        defaults: {
            width: 120,
            sortable: true,
            renderer: toolTipRenderer
        },
        columns:[{
                id: 'string',
                header: "String",
                dataIndex: 'string',
                locked: true,
                width: 300
            },{
                header: "Comment",
                dataIndex: 'comment',
                width: 200
        }]
    };

And added enableLocking: true in  grid = new CQ.Ext.grid.EditorGridPanel("..}) function.

    grid = new CQ.Ext.grid.EditorGridPanel({
        region: "center",
        //title: "Strings",
        margins: '5 5 5 5',
        enableLocking: true,
        selModel: new CQ.Ext.grid.RowSelectionModel(),
        autoScroll: false,

 

 

Basically I need to lock first 3 columns in translator.html as showed in attached screen..Could you please help which method I need to overwrite.

 

Regards,

Kumar

Avatar

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
ykumarreddy
Level 1

15-10-2015

kautuksahni wrote...

Hi Kumar Yadanaparthi 

Please find below the code snippet doing as you stated.

 

//java script code when your ExtJS library is loaded

 

Ext.onReady(function() {

   

    var columns = [

        {

            text     : 'Column 1',

            dataIndex: 'column1',

            locked   : true,

            width    : 200

        },

        {

            text     : 'Column 2',

            dataIndex: 'column2',

            locked   : true, // ADD THIS IN COLUMN 2

            width    : 200

        },

        {

            text     : 'Column 3',

            dataIndex: 'column3',

            width    : 200

        }

    ];

   

    var store = Ext.create('Ext.data.ArrayStore', {

        fields: [

            {name: 'column1'},

            {name: 'column2'},

            {name: 'column3'}

        ]

    });

   

    var grid = Ext.create('Ext.grid.Panel', {

        columns: [],

        enableLocking: true,

        renderTo: Ext.getBody(),

        width: 600, // CHANGE THIS VALUE TO 600

        height: 300

    });

   

    grid.reconfigure(store, columns);

   

    grid.getStore().loadData([

        [ 'Row 1 Column 1', 'Row 1 Column 2', 'Row 1 Column 3' ],

        [ 'Row 2 Column 1', 'Row 2 Column 2', 'Row 2 Column 3' ]

    ]);

});

 

 

Note: “enableLocking: true” is doing the intended.

 

Link: - http://jsfiddle.net/nj4nk/11/  (jsfiddle demo, IN THIS CODE WE HAVE LOCKED 1 COLUMN, BUT IF U WANT TO LOCK 2 COLUMN COPY PAST ABOVE CODE.).

 

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni

 

 

 

Hi,

 

I tried this option and still columns are not locked.

 

My code.

 

In Translator.js.

 

I changed below method.

 

    var cmCfg = {
        // specify any defaults for each column
        defaults: {
            width: 120,
            sortable: true,
            renderer: toolTipRenderer
        },
        columns:[{
                id: 'string',
                header: "String",
                dataIndex: 'string',
                locked: true,
                width: 300
            },{
                header: "Comment",
                dataIndex: 'comment',
                width: 200
        }]
    };

And added enableLocking: true in  grid = new CQ.Ext.grid.EditorGridPanel("..}) function.

    grid = new CQ.Ext.grid.EditorGridPanel({
        region: "center",
        //title: "Strings",
        margins: '5 5 5 5',
        enableLocking: true,
        selModel: new CQ.Ext.grid.RowSelectionModel(),
        autoScroll: false,

 

 

Basically I need to lock first 3 columns in translator.html as showed in attached screen..Could you please help which method I need to 

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,285 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,285 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

15-10-2015

Hi Kumar Yadanaparthi 

Please find below the code snippet doing as you stated.

 

//java script code when your ExtJS library is loaded

 

Ext.onReady(function() {

   

    var columns = [

        {

            text     : 'Column 1',

            dataIndex: 'column1',

            locked   : true,

            width    : 200

        },

        {

            text     : 'Column 2',

            dataIndex: 'column2',

            locked   : true, // ADD THIS IN COLUMN 2

            width    : 200

        },

        {

            text     : 'Column 3',

            dataIndex: 'column3',

            width    : 200

        }

    ];

   

    var store = Ext.create('Ext.data.ArrayStore', {

        fields: [

            {name: 'column1'},

            {name: 'column2'},

            {name: 'column3'}

        ]

    });

   

    var grid = Ext.create('Ext.grid.Panel', {

        columns: [],

        enableLocking: true,

        renderTo: Ext.getBody(),

        width: 600, // CHANGE THIS VALUE TO 600

        height: 300

    });

   

    grid.reconfigure(store, columns);

   

    grid.getStore().loadData([

        [ 'Row 1 Column 1', 'Row 1 Column 2', 'Row 1 Column 3' ],

        [ 'Row 2 Column 1', 'Row 2 Column 2', 'Row 2 Column 3' ]

    ]);

});

 

 

Note: “enableLocking: true” is doing the intended.

 

Link: - http://jsfiddle.net/nj4nk/11/  (jsfiddle demo, IN THIS CODE WE HAVE LOCKED 1 COLUMN, BUT IF U WANT TO LOCK 2 COLUMN COPY PAST ABOVE CODE.).

 

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni

Avatar

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
ykumarreddy
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
ykumarreddy
Level 1

15-10-2015

        Thanks for your quick response.  I tried with locked: true config but it is not working. Kumar

Avatar

Avatar
Validate 25
MVP
bsloki
MVP

Likes

182 likes

Total Posts

1,859 posts

Correct Reply

545 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 50
Boost 5
View profile

Avatar
Validate 25
MVP
bsloki
MVP

Likes

182 likes

Total Posts

1,859 posts

Correct Reply

545 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 50
Boost 5
View profile
bsloki
MVP

15-10-2015

As its using extjs, you should be able to lock the columns. refer [1] for the example

[1] http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.html