Jsgrid: jsGrid -> Hyperlink and custom button

[ElioRiba]

Hi Artem,
first at all I send my very congrats for your very good job!
I’m developing a simple web site and I’m using jsGrid, but I don’t understand how can I create/modify couple of things:

1) One or more columns with text + hyperlink (if I click on each I will open a new page to send entire row data to other page with GET or POST where I will manage ‘em), considering I'd like to keep the DoubleClick function (for dialog editing).

2) One or more columns with icon or small clickable picture for each row (different from native delete and search). For Example I can use a custom icon/text/picture to open the EditDialog instead ClickRow or DoubleClickRow.

3) Instead or in add of Selecting, get another function/instruction to keep selected any row (just one) after single click and get ID or entire args.item

Thanks for your helping

[tabalinas]

Thank you for the feedback!

You are describing the basic scenario for jsgrid. Define a field without 'type' and provide 'itemTemplate' function that will return cell content.
Feel free to ask more concrete questions if anything is not clear.

[ElioRiba]

I'm nearby the solution... sorry but my Javascript/jQuery knowledge is not too high :-)

Here the field code:

fields: [
                    { name: "StockNumber", type: "number", width: 50, height: 50, align: "left" },
                    { name: "Description", 
                        itemTemplate: function(value) {
                            return $("<a>").attr("href", value).text(value);
                        } , width: 200, filtering: true },
                    { name: "Address", type: "text", width: 50, visible: false },
                    { name: "DataEntry", type: "text", width: 50 },
                    { name: "Status", type: "text", width: 50 },
                    {
                        type: "control",
                        editButton: false,
                        deleteButton: true,
                        headerTemplate: function() {
                            return $("<button>").attr("type", "button").text("Add")
                                .on("click", function () {
                                    showDetailsDialog("Add", {});
                                });
                        }
                    }
                ]

with that I made "Description" column an tag with href with text and value got from my DB.
Obviously this code will be modified properly, but despite I've inserted filtering:true for this column, I don't understand why it doesn't shown as in picture in attached

I'd like the filter works like the other, but I think I use custom field something is different.

Another simple question is I need to send an ajax GET to other specific page + my value instead the simple value like reported above into the code after href instead the simple value.
I tried to send an ajax request like that:

return $.ajax({ type: "POST", url: "mypage.php?action=value", data: item });
but it doesn't work :-(((

[tabalinas]

To return several elements you can do something like this:

itemTemplate: function(value, item) {
    var $text = $("<p>").text(item.MyField);
    var $link = $("<a>").attr("href", item.MyItemUrl).text("Go To Item");
    return $("<div>").append($text).append($link);
}

Or even use an empty jQuery object and add method to get rid of wrapping <div>.

About the second question: I'm not sure I got what you what you try to achieve.

[ElioRiba]

Thanks for your quickly reply and itemTemplate has been solved :-)
Apologise for my second require, I think I didn't explained properly my requests:

1) Instead to use item.MyItemUrl for my href I'd like to use an Ajax or jQuery function to send by POST method to another page/link some information (for example: POST['Address'], POST['Description'], ecc....). I'm asking this because I need to pass some information to another fixed page and populate it when someone click on hyperlink description.
I know to do that with GET method for example: "mypage?Description=myval", but will be better to send them by POST.

2) In a column "control" can I customize icon and function instead use "delete or edit" as default setting?

Thanks for your support.

[tabalinas]

1) I'm not sure I got what you mean: you want to open another page but not with get but with a post passing some parameters? Meaning is not just an ajax request, right? Then checkout this answer on SO http://stackoverflow.com/questions/3915917/make-a-link-use-post-instead-of-get.

2) Of course, you can completely redefine the itemTemplate of control field.
Or you can use the following method of control field: this._createGridButton("grid-button-class", "Tooltip for the button", function(grid) { /* click handler */ } ), so it will be

itemTemplate: function(value, item) {
    return this._createGridButton("my-button-class", "Click to Perform Custom Action", function(grid) {
        // do whatever you want, e.g. alert item field and start editing
        alert(item.Field);
        grid.editItem(item);
    });
}

[chinthaka321]

Hi Artem,
JS Grid is awesome !!. I'm using it for couple of project which I'm working on. Good job.

I have a one question. When I remove the type of the field filter input box of the grid get disappear. Do you know any reason for that?
What I want to archive is I want to select a row but row should not display text input box. It should appear like a label. But still I want to do the filtering using the header input box at the top.

[bala29000]

I need to get the edited values when I click Save button which is out of grid.
For Eg : I have 10 rows and 5 columns in each row (2 columns filled and remaining unfilled)
When i click a particular row, 3 remaining columns will change into text boxes where i need to enter some values in it.

Now A Save button is placed outside of Grid, So when clicked I need to get the edited values in a list.

Please help out.

[tabalinas]

@chinthaka321, right, a field w/o type is a display-only field. You can add filterTemplate and filterValue implementations to the field (see text field source for instance).