How do I use html placeholder text in filter, insert and edit textboxes

[bernardonigbinde]

This is minor, I'm having difficulty putting placeholders in the filter row textboxes, insert and edit textboxes.

[tabalinas]

Good point, there should be a config option for this. For now you can redefine _createTextBoxmethod of the field like following:

_createTextBox: function() {
    var $result = jsGrid.fields.text.prototype._createTextBox.call(this);
    $result.attr("placeholder", "Field Placeholder");
    return $result;
}

Or to redefine it for insert/edit/filter - redefine the similar way insertTemplate/editTemplate/filterTemplate.

[bernardonigbinde]

Thanks a lot man!

I used:

editTemplate: function() {
var $result = jsGrid.fields.text.prototype._createTextBox.call(this);
$result.attr("placeholder", "Field Placeholder");
$result.attr("value", value);
return $result;
}

When I clicked to edit, the values kept disappearing, so I added

$result.attr("value", value);

But I now get a

jsgrid.min.js:7 Uncaught TypeError: Cannot read property 'val' of undefined

The grid doesn't display. The error disappears when I remove:

filterTemplate: function() {
var $result = jsGrid.fields.text.prototype._createTextBox.call(this);
$result.attr("placeholder", "Field Placeholder");
$result.attr("value", value);
return $result;
}

I also had this in my code:

// Handle esc and enter key press for editing and updating
$(document).keyup(function(e) {
     if (e.keyCode == 27)
        $("#jsGrid").jsGrid("cancelEdit");

    if(e.keyCode == 13)
        $("#jsGrid").jsGrid("updateItem");
    return false;
});

But now when I hit enter or try to click the save (plus) icon, and update (tick) icon I get the same error:

jsgrid.min.js:7 Uncaught TypeError: Cannot read property 'val' of undefined

[tabalinas]

The issue with editTemplate is that you should also pass the params and call original editTemplate like that:

editTemplate: function() {
    var $result = jsGrid.fields.text.prototype.editTemplate.apply(this, arguments);
    ...

The issue is that editTemplate (and others) saves the edit control to be able to retrieve value from it, when you redefined it, you prevent the control from saving.

[samuelrobertson]

Hey tabalinas,

dsGrid is a very good control. I don't think the user can be expected to figure out the above. I'm doing Ajax postback with some read only fields in the table, so I'm using editTemplate. Can you make editTemplate somehow easier to use? Or at least put the above in the docs? Thanks!

[claweyenuk]

jsGrid was so easy to setup, I never dug into any code - I set it up and it just worked. So this took me a little time to figure out how to do this, and I have some note that may help others.

You can pass custom functions to the fields, that is what is above. I created a function before of the jsgrid init::

var placeholderFilterTemplate = function () {
    var $result = jsGrid.fields.text.prototype.filterTemplate.apply(this, arguments);
    $result.attr("placeholder", "Search " + this.title + "...");
    return $result;
}

$("#jsGrid").jsGrid({

Then I made all the field configs that have filtering enabled point to this filter template function:

           fields: [{
                name: "first_name",
                title: "First Name",
                type: "text",
                filterTemplate: placeholderFilterTemplate,
            },
            {
                name: "last_name",
                title: "Last Name",
                type: "text",
                filterTemplate: placeholderFilterTemplate,
            },
           ...