How do I detect editable columns on the client?

5 posts, 1 answers
  1. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 02 Aug 2010 Link to this post

    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
  2. Answer
    Veli
    Admin
    Veli avatar
    2002 posts

    Posted 05 Aug 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 05 Aug 2010 Link to this post

    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
  5. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 10 Aug 2010 Link to this post

    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
  6. CarmenM
    CarmenM avatar
    1 posts
    Member since:
    Aug 2012

    Posted 28 Aug 2012 Link to this post

    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?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017