CODEWITHSUNDEEP
jqueryjsonslickgrid
neoswf
neoswf

Reputation: 4760

SlickGrid- How can I pass parameters into a formatter, from the columns loop (including long detailed answer)

I have a given grid. I want to place in each row, inside an attribute, an id value. (in order to get the row identity, to perform delete & edit actions).

The best way I thought about is to print it into an attrubute, using a formatter, but I cannot find the way to pass the id to the formatter function, cause the formatter call is columns deceleration level, and I'm getting each row id, inside the data loop.

How to do that?

function NameFormatter(row, cell, value, columnDef, dataContext) {
    return '<span data-user-id="'+id+'">"'+text+'"</span>';
}

columns.push({ 
   id: "name", name: "Name", field: "name", width: 180, 
   cssClass: "cellName", sortable: true, formatter:NameFormatter
})

for (var i = 0; i < list_users.length; i++) {
    data[i] = {
        /*
           What I do here?
           How do I pass list_users[i].id & 
           list_users[i].name to the formatter from here? 
        */
        name: list_users[i].name,
        role: returnRole(list_users[i].role),
        email: list_users[i].email,
        portfolios: 'no attr for now'
    };
}

Upvotes: 2

Views: 11086

Answers (3)

Franck S
Franck S

Reputation: 113

I push a commit in my slickgrid fork, to add a new parameter metadata to method formatter, which allow pass column metadata and use metadata in formatter method.

https://github.com/Francks11/X-SlickGrid/commit/b2e14e6cb169de6059757434e7db458a997320b3

    function DoubleFormatter(row, cell, value, columnDef, dataContext, metadata) {

    var formattedValue = parseFloat( value ).toFixed(3);

    return isNaN( formattedValue ) ? "" : formattedValue;
}

Upvotes: 0

neoswf
neoswf

Reputation: 4760

Documenting here the code and answer, for future use by any user which will stumble upon my question.

The logic of SlickGrid works like this:

  1. Columns that define the table headers and other run time properties like Sortable, width, etc.
  2. Data loop that gets your json & register values to the DataView, which hold for us memnbers.
  3. this members than become useful when we use formatters.

When you call a formatter, inside the Columns declaration, you just need to call the formatter. Slick grid will do the rest.

This is my column definition, where I have a {span} element with value and id, based on conditions.

columns.push({ 
    id: "options", 
    name: "Options", 
    field: "options", 
    width: 110, 
    cssClass: "cellOptions slick-last-cell", 
    formatter: optionsFormatter 
})

If everything been defined right, the Formatter will pass all the params needed for conditions or any other type of job.

The formatter receives from dataView all the Row Params been passed by you/us. If I have defined my Data like this:

for (var i = 0; i < list_users.length; i++) {
    data[i] = {
        id: list_users[i].id,
        name: list_users[i].name,
        role: returnRole(list_users[i].role),
        email: list_users[i].email,
        portfolios: 'no attr for now',
        isPending: list_users[i].isPending
    };
}

than my dataContext will hold this array in his hands, and will pass it to me to the formatter, where there I will do what ever I want with the variables values.

 function optionsFormatter(row, cell, value, columnDef, dataContext) {
    if (dataContext.isPending) {
        return '<span onclick="deleteUser(' + dataContext.id + ')" class="actionIcon delete">Cancel</span>';
    } else {
        return '<span onclick="editUser(' + dataContext.id + ')" class="actionIcon edit">Edit</span>';
    }
}

As you can see, id & isPending are not visible in the grid to the user, but they are available for any dataContext.

That's it. Very simple the moment you're getting it.

Upvotes: 6

ganeshk
ganeshk

Reputation: 5631

The formatter is called at render time. So all your data is already loaded in the grid.

Why not use an exclusive column for the ID (you could exclude it from showing after render by calling grid.setColumns)? Or better yet, use the dataView - it already has a mandatory column for ID - which you can use for editing/deleting.

Hope this helps!

Upvotes: 2

Related Questions