urgently need Help on IGgrid Column fixing problem

545

vivek tiwary posted over 11 years ago

I am using Ignite ui 2013, and i am facing one problem with column fixing feature in grid.

I am trying to use column fixing feature of grid but its not working for me its creating a pinup for me but i am not able to click on that or even its does not fix the column which i have mention at the time of initialization.

$.ig.loader(function () {

var BindData = {};

var BindData.features = [   {
                                            name: "Filtering",
                                            allowFiltering: true,
                                            type: "local"
                                        },
                                        {
                                            name: "Resizing"
                                        },
                                        {
                                            name: "Sorting"
                                        },
                                        {
                                            name: "Selection",
                                            mode: "cell"
                                        },
                                        {
                                            name: "ColumnFixing",
                                            columnSettings: [
                                                {
                                                    columnKey: "PRODUCT_DESCRIPTION",
                                                    isFixed: true
                                                }
                                            ]
                                        }];

$("gridId").igGrid({
        columns: options.columns,
        autoGenerateColumns: false,
        autoFormat: true,
        width : "100%",
        dataSource: options.data,
        features: BindData.features

    });

for column definition i am using

{ headerText: "Product", key: "PRODUCT_DESCRIPTION", dataType: number, format: "", formatter: valueFormater, width: 100px, hidden: false }

Please let me know if i am missing something.

Please help me on urgent basis

Thanks

Parents

23953

Verified Answer
Offline Martin Pavlov posted over 11 years ago

Hi Vivek,

ColumnFixing doesn't support grid width set in percentages. Try to set the grid width to an absolute value.

Example code:
$("gridId").igGrid({
        columns: options.columns,
        autoGenerateColumns: false,
        autoFormat: true,
width : "700px",
        dataSource: options.data,
        features: BindData.features

    });

Best regards,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Reject Answer

Cancel
545

vivek tiwary posted over 11 years ago in reply to Martin Pavlov

Hi Martin

Thanks for your quick help the solution you suggested worked for me, but can you please help me on this we are setting grid width intentionally to 100% for setting grid to complete page width is there any way to set grid width according user browser with or grid parent container width.

Once again thanks for your help.

Thanks

Vivek
Cancel
Reply

Cancel
23953

Offline Martin Pavlov posted over 11 years ago in reply to vivek tiwary
Hello Vivek,

This is a known issue which will be fixed with the 13.2 release. That's because Column Fixing feature uses 2 tables one for fixed and one for unfixed columns. The fixed table don't get the cellclick event when it's created. To overcome this you should manually bind to the click event on the fixed table.

Here is an example code:

Code Snippet

$("#grid1_fixed").live("click", function (event) {

    $target = $(event.target);

    var isTd = $target.is("td");

    if (!isTd) return;

    var $row = $target.closest("tr");

    var key = $row.attr("data-id");

    // note this is the index in the fixed column

    var colIndex = $target.closest("td").index();

    var cell = event.target;

    var colKey = function () {

        var gridCols = $("#grid1").igGrid("option", "columns");

        for (var i = 0, ix = 0; i < gridCols.length; i++) {

            if (gridCols[i].fixed == true) {

                if (ix == colIndex)

                    return gridCols[i].key;

                ix++;

            }

        }

        return null;

    } ();

    // put your code here

});

Hope this helps,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Cancel
545

vivek tiwary posted over 11 years ago in reply to Martin Pavlov

Hi Martin Thanks for your quick response but I m not able to understand that code can you little bit explain this for me. Thanks Vivek
Cancel
Reply

Cancel
23953

Offline Martin Pavlov posted over 11 years ago in reply to vivek tiwary
Hello Vivek,

Basically I'm handling the fixed columns click event. The code in the event handler function is initializing some of the variables which are available in the igGrid.cellClick event, so that you can use them in the event handler.

Here are the event handler variable descriptions:

key - contains the PK value of the row.

colIndex - contains the index of the column on which it was clicked.

cell - contains reference to the TD DOM element.

colKey - contains the key of the column.

Hope this helps,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Cancel
545

vivek tiwary posted over 11 years ago in reply to Martin Pavlov

HI Martin

Once again i am facing one problem with column fixing in one scenario i am dynamically adding a column to grid for that i am using grid destroy method with the help of destroy i am destroying the grid and re rendering the grid with desired column this works fine without column fixing features but as soon as put column fixing features grid is not rendering properly as well as i am not able to see my grid in chrome browser.

In fact i have tried

$("#grid1_fixed").igGrid("destroy");

$("#grid1").igGridColumnFixing("destroy");

but nothing workout for me can you suggest something which will solve my problem.

Our client need this column fixing feature you have any idea upto when infargistic ignite ui 13.2 is going to release with column fixing feature.

Thanks

Vivek
Cancel
Reply

Cancel

Reply

23953

Verified Answer
Offline Martin Pavlov posted over 11 years ago in reply to vivek tiwary

Hi Vivek,

The 13.2 release will be out sometime in the Autumn.

You can try to remove the grid DOM placeholder after you destroy the grid and re-append it again on grid recreation.

Hope this helps,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Reject Answer

Cancel

Children

545

vivek tiwary posted over 11 years ago in reply to vivek tiwary

for taking data and manuallt set from js but its not working..

please help me on this priority

Thanks

vivek
Cancel
Reply

Cancel
545

vivek tiwary posted over 11 years ago in reply to vivek tiwary

hi martin

i need your small help i am trying to implement row selected with check box grid feature but i am facing one problem.

ehenever i select some row in grid by cjeckboxes and then filter the eow or sort the grid on some colum i am loosing the all selected checkboxes state and going to off state.

can we do something like that even user filter thr grid the cirrent stay of check box should not loose. even i have tried the gridrerender event asbwell s grid row select event forbtsking
Cancel
Reply

Cancel
545

vivek tiwary posted over 11 years ago in reply to Martin Pavlov

Thanks Martin

thats workout for me......
Cancel
Reply

Cancel