This is a migrated thread and some comments may be shown as answers.

How do I detect editable columns on the client?

4 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 02 Aug 2010, 03:08 PM
Hello,

I am using the example code as described on on this page, in order to provide for editing grid cells, then submitting all changed cells as a batch.  I have had to adapt this code, because my grid is created entirely in the code-behind instead of within the page markup.  However, I don't think this makes a difference to my question.

The question is, how do I detect only those columns within the grid that are not readonly?  I only have two columns in my grid that I want to allow the user to edit.  Therefore, I don't need or want all of the grid cells to have the dblclick event handler added.  I only need the event handler added to the editable cells.

I would imagine there would be some sort of technique on the client, within the RowCreated function, to determine if a column is readonly or not.

Thanks for any help!
Regards,
Steve

4 Answers, 1 is accepted

Sort by
0
Accepted
Veli
Telerik team
answered on 05 Aug 2010, 04:27 PM
Hello Steve,

You can indicate your columns are read-only in some column property that is serialized to the client. The column's UniqueName is one such property. All your columns that are read-only can have the string "_ReadOnly" appended to their UniqueName. You can then use the client-side OnRowCreated event to check if a column is read-only. Columns that are not do not get a dblclick event handler attached. Here is what the modified RowCreated event handler from the demo would look like:

function RowCreated(sender, eventArgs) {
    var dataItem = eventArgs.get_gridDataItem();
    var columns = eventArgs.get_tableView().get_columns();
 
    //traverse the cells in the created client row object and attach dblclick handler for each of them
    for (var i = 1; i < dataItem.get_element().cells.length; i++) {
        var cell = dataItem.get_element().cells[i];
                     
        if (cell && !isReadOnly(columns[i])) {
            $addHandler(cell, "dblclick", Function.createDelegate(cell, ShowColumnEditor));
        }
    }
}
 
function isReadOnly(column)
{
    return column.get_uniqueName().indexOf("_ReadOnly") > -1;
}

The additions are marked in bold.

Regards,
Veli
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Steve
Top achievements
Rank 1
answered on 05 Aug 2010, 09:55 PM
Veli,
Thank you for your reply.  I was hoping for a solution that wasn't as cumbersome, but I have tried your suggestion and it works just fine.

Thanks for the help!
Regards,
Steve
0
Steve
Top achievements
Rank 1
answered on 10 Aug 2010, 03:31 PM

I have since had to rework this code.  While the above suggestion does work, if any other code depends upon finding the unique name of the column, it will fail, unless the other code also adds "_Readonly" to the end of read-only column names before searching for them.  Our project is a fairly large, multi-developer project, and unfortunately, I broke another page that relies on the same underlying grid control.

To fix this problem, I got rid of adding "_Readonly" to column names.  Instead, I maintain a hidden field which contains a list of all of the editable column names.  The string begins, ends, and is delimited with "$".  The value for the hidden field is created in the code-behind, when creating the grid columns.

The client-side code has been changed to the following:

//global variables for edited cell and edited rows ids
var editedCell;
var arrayIndex = 0;
var editedItemsIds = [];
var hdnEditableColumnNames = document.getElementById("<%=hdnEditableColumnNames.ClientID %>");
var editableColumnNames = "";
if (hdnEditableColumnNames != null) editableColumnNames = hdnEditableColumnNames.value;
function isEditable(column)
{
    return editableColumnNames.indexOf("$"+column.get_uniqueName()+"$") > -1;
}
function RowCreated(sender, eventArgs) {
    var dataItem = eventArgs.get_gridDataItem();
    var columns = eventArgs.get_tableView().get_columns();
    //traverse the cells in the created client row object and attach dblclick handler for each EDITABLE of them
    for (var i = 1; i < dataItem.get_element().cells.length; i++) {
        var cell = dataItem.get_element().cells[i];
        if (cell && isEditable(columns[i])) {
            $addHandler(cell, "dblclick", Function.createDelegate(cell, ShowColumnEditor));
        }
    }
}

The reason for having the "$" delimiters at the beginning and end of the string is so that any column name that is a substring of another will not return a false positive.  For example:  "$Column10$Column12$".  If I was searching for "Column1" and I only searched for "$Column1", it would be found.  Instead, I'm searching for "$Column1$", which would rightly not find it.

Regards,
Steve
0
CarmenM
Top achievements
Rank 1
answered on 28 Aug 2012, 01:08 PM
Hi,

I'm using this solution and it works fine.

Still, there is a problem when I use client pagination.

'RowCreated' is raised only for visible rows. All rows with display none don't have assigned that handler.

How can I fix this?
Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Veli
Telerik team
Steve
Top achievements
Rank 1
CarmenM
Top achievements
Rank 1
Share this question
or