Styling TDs that are set to editable.

[Jeremy]

Howdy folks.

I'm having an issue with my grid that I can't seem to figure out a remedy for. I have a grid with only one column that is editable. When the grid is created there is nothing special about these TDs that will allow me to style them. They don't have any specific classes or something to hook into.

My problem is that a user has no idea what field is editable. I'd really love a way to style the TD so that a user knows it will be editable.

Is there any way to inject a class into the TD without created a template? I guess I could create a template for that column, But that would require creating another element, like a div or span.

I'd really love to have a class on the TD itself. Something like "editable." You get the idea. Is that possible somehow?

Oh, also great webinar today. I'm really excited about the new stuff you guys are working on! Viva la progress!

[Richard]

Hi Jeremy:

How is the grid created? From html source, data binding, ajax html snippet, etc...

If you have a <style> block, the css should automatically kick-in when you make add class editable to a td.
See http://jsfiddle.net/RichardAD/tKtHS/

Richard

[Jeremy]

Hi Richard,

The grid is created dynamically with remote data loaded via a JSON string. 

I'm calling the grid onto a div, not specifying local data via a table.

Is that the info you were looking for? If not let me know, and I can post my code.

[Richard]

Posting code would be good.

If you are using a template I think things will be pretty easy.  If a grid is not configured with a template I think it will make a dynamic best-guess one for its use.

-Richard

[Jeremy]

Richard,

Here is my code:

<div id="grdSettings"></div>

var dataSource = new kendo.data.DataSource({

    transport: {

        read: {

            url: 'Services/RockService.svc/GetRockHabitsSettings',

            type: "POST",

            contentType: "application/json; charset=utf-8",

            dataType: "json"

        },

        update: {

            url: 'Services/RockService.svc/SaveRockHabitsSettings',

            type: "POST",

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            complete: UpdateCallback

        },

         parameterMap: function (data, type) {

            var ret;

            switch (type) {

                case "read":                           

                    ret = kendo.stringify({ "PersonID":  personID,"CompanyID":companyID});

                    break;

                case "update":

                {

                    var settings = new Array();

                    for (var i = 0; i < data.models.length; i++) {

                        settings[i] = data.models[i];

                    }

                    ret = kendo.stringify({ "Settings": settings });

                    break;

                }

                default:

                    break;

            }

            return ret;

        }

    },

    batch: true,

    autoSync: false,

    schema: {

        data: "d",

        model: RockHabitSetting

    }

});

 

 

 

$("#grdSettings").kendoGrid({

    dataSource: dataSource,       

    pageable: false,

    editable: true,

    scrollable:false,

    columns: [

        {

            field: "Name",

            title: "Name",

            width: 200,

        },

        {

            field: "Value",

            title: "Value", width: 100,

        },

        {

            field: "Description",

            title: "Description",

            width: 500,

        }

    ]

});

 

function Save() {               

    dataSource.sync();

    return false;

}

 

function UpdateCallback(jqXHR, textStatus) {

    if(textStatus=="error") alert("There was a problem saving the Rock Habit Settings.");

}

As you can see, I'm not using a template. I'd prefer to not have to add extra lines of code for the template. Ideally, I would like to be able to simply add a class to the TD. I would prefer to not add a template and add extra markup inside the TDs.

I haven't figured out a way to make this happen. If you have any ideas, I'd love to hear them. I assume someone on the kendo team can tell me if this is even possible pretty easily.

[Jeremy]

Richard, 

Thanks for your help. I think what we'll do is the template as you suggested. That's probably the easiest way to get it to do what we need.

Thanks again.

[Richard]

Your welcome.  Without template you need some sort of structural selector, perhaps an nth: type one created via introspection on the model.