Is grid in edit/insert mode -- client side

[Algo]

Hello, I have checked the other threads first about this issue, but they didn't help me.

What i'm trying to do is check if the grid is in edit/insert mode in the grid's OnKeyPress event.

Other threads suggested that grid._editIndexes would do the trick, but mine's always empty.

So basically..

function onKeyPress(sender, e){
    var length = sender._editIndexes.length ; // always 0 !!
...
}

Is there any other way to check in which mode the grid is right from the grid object ?

Thanks!

[Shinu]

Hi,

You can check for edit/insert mode in OnCommand event as shown below.
JS:

function OnCommand(sender, args)
     {
       if (args.get_commandName() == "Edit")
         {
            alert("Edit");
        }
        if (args.get_commandName() == "InitInsert")
        {
            alert("Insert");
        }
    }

Thanks,
Shinu

[Algo]

Hello Shinu,

I need to know what state/mode (insert/edit/none) the grid is in, no matter in which event i am in.

Here's my scenario:

I trigger edit/insert and other commands from different key strokes (E puts the row into edit, for example).

I need to be able to block those key strokes when I am in edition or insertion mode.

I already have a solution for this, but it relies on checking in which control I am when the key stroke occurs.
I would MUCH rather have a solution that's based on the grid's state/mode.

Thanks!

[J]

I'm using the following scripts for this.  All you have to do is check for 'rowEditedItem' being null in the event you want to work with (there's some extra code in there that you won't need, I just included so you can see how I'm using those variables):

<script type="text/javascript" language="javascript">
    var bHasChanges = false;
    var colUIInputItems = null;
    var colDropdownLists = null;
    var rowEditedItem = null;
    var sAthleteGridID = "<%=grdAthletes.ClientID %>";

    /// <summary>
    /// Handles the client side RowClick event of the Athletes grid.
    /// </summary>
    function RowClick(sender, eventArgs) {
        //            if (rowEditedItem && bHasChanges) {
        //                bHasChanges = false;
        //                $find(sAthleteGridID).get_masterTableView().updateItem(rowEditedItem);
        //            }
    }

    /// <summary>
    /// Handles the client side RowDblClick event of the Athletes grid.
    /// </summary>
    function RowDblClick(sender, eventArgs)
    {
        rowEditedItem = eventArgs.get_itemIndexHierarchical();
        $find(sAthleteGridID).get_masterTableView().editItem(rowEditedItem);
    }

    /// <summary>
    /// Handles the client side events when the athletes grid loses focus.
    /// </summary>
    function grdAthletes_LostFocus(sender, eventArgs)
    {
//      $find(sAthleteGridID).get_masterTableView().fireCommand("CancelAll", ""); //Cancel any editing activities in the grid
//      $find(sAthleteGridID).get_masterTableView().clearSelectedItems(); //De-select any rows
    }

    /// <summary>
    /// Handles the client side GridCommand event of the Athletes grid.
    /// </summary>
    function GridCommand(sender, args) {
        if (args.get_commandName() != "Edit") {
            rowEditedItem = null;
        }
    }

    /// <summary>
    /// Handles the client side GridCreated event of the Athletes grid.
    /// </summary>
    function GridCreated(sender, eventArgs) {
        var objGrid = sender.get_element();
        var arrUIObjects = [];
        var lowerType = null;

        colUIInputItems = objGrid.getElementsByTagName("input");

        //Set up change tracking for the input controls in the grid
        for (var iInputItems = 0; iInputItems < colUIInputItems.length; iInputItems++) {
            lowerType = colUIInputItems[iInputItems].type.toLowerCase();

            if ((lowerType == "hidden") || (lowerType == "button"))
                continue;

            if ((colUIInputItems[iInputItems].id.indexOf("PageSizeComboBox") == -1) && (colUIInputItems[iInputItems].type.toLowerCase() != "checkbox"))
                Array.add(arrUIObjects, colUIInputItems[iInputItems]);

            colUIInputItems[iInputItems].onchange = TrackChanges;
        }

        colDropdownLists = objGrid.getElementsByTagName("select");

        //Set up change tracking for the drop down controls in the grid
        for (var iDropDowns = 0; iDropDowns < colDropdownLists.length; iDropDowns++)
            colDropdownLists[iDropDowns].onchange = TrackChanges;

        setTimeout(function () { if (arrUIObjects[0]) arrUIObjects[0].focus(); }, 100);
    }

    /// <summary>
    /// Handles the client side RowSelected event of the Athletes grid.
    /// </summary>
    function RowSelected(sender, eventArgs) {
        //If editing a row and changes are pending, commit the changes and stop the editing
        if (bHasChanges && rowEditedItem) {
            bHasChanges = false;
            $find(sAthleteGridID).get_masterTableView().updateItem(rowEditedItem);
        }
    }

    /// <summary>
    /// Handles the client side Change event for controls in the Athletes grid.
    /// </summary>
    function TrackChanges(e) {
        bHasChanges = true;
    }

    /// <summary>
    /// Handles the client side KeyPress event of the Athletes grid.
    /// </summary>
    function OnKeyPress(sender, args) {
        //Check for the Enter key being pressed
        if ((args._domEvent.charCode == 13) || (args.get_keyCode() == 13)) {
            //If currently editing a row, commit the changes and stop the editing
            if (rowEditedItem) {
                bHasChanges = false;
                $find(sAthleteGridID).get_masterTableView().updateItem(rowEditedItem);
            }
        }
        else if ((args.get_keyCode() == 27) || (args._domEvent.charCode == 27)) //Check for the Esc key being press
        {
            $find(sAthleteGridID).get_masterTableView().fireCommand("CancelAll", ""); //Cancel any editing activities in the grid
            $find(sAthleteGridID).get_masterTableView().clearSelectedItems(); //De-select any rows
        }
    }

</script>

Here is how my grid is declared:

<telerik:RadGrid ID="grdAthletes" runat="server" AllowAutomaticDeletes="True" AllowSorting="True"
                PageSize="12" AutoGenerateColumns="False" OnNeedDataSource="grdAthletes_NeedDataSource"
                OnItemCommand="grdAthletes_ItemCommand" OnPreRender="grdAthletes_PreRender" OnUpdateCommand="grdAthletes_UpdateCommand"
                Width="758px" OnDeleteCommand="grdAthletes_DeleteCommand" OnEditCommand="grdAthletes_EditCommand"
                OnItemDataBound="grdAthletes_ItemDataBound" ShowStatusBar="True" AllowAutomaticInserts="True"
                AllowAutomaticUpdates="True" OnItemCreated="grdAthletes_ItemCreated" Skin="Metro"
                BorderStyle="None" CellSpacing="0" GridLines="None" ForeColor="White" BackColor="Transparent"
                ShowFooter="True">
                <ClientSettings AllowKeyboardNavigation="True">
                    <Selecting AllowRowSelect="True" />
                    <KeyboardNavigationSettings AllowSubmitOnEnter="True" AllowActiveRowCycle="True" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                    <ClientEvents OnKeyPress="OnKeyPress" OnRowSelected="RowSelected" OnRowClick="RowClick"
                        OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />
                    <Resizing ShowRowIndicatorColumn="False" />
                </ClientSettings>

//... all my columns and other properties

</telerik:RadGrid>

Hope that helps.

[Algo]

Hello Juan,

Thanks for your input, but I only will use global variables as a last resort.
I appreciate the help, though :)

[J]

What?!?!  My solution isn't good enough for you?  I see how it is.               JK  ;)

It's the only working solution I've found.  I too would prefer a property on the grid to check instead of this method.  :)

WTB:

if (grdMyGrid.IsInEditMode)
{
     //Blah blah
}

Or:

if (grdMyGrid.Mode == Edit)
{
     //Editing row
}
else if (grdMyGrid.Mode == Insert)
{
     //Inserting row
}
else
{
     //View mode
}

[Algo]

Any other input from Telerik on this matter?

Thanks!

[Algo]

If anyone is interested in a solution:

masterTable.get_editItems() gives you the collection of items that are being edited.
masterTable.get_insertItem() gives you the item being insterted (undefined if none)

[J]

Cool, thanks.  So you just have to check if either of those collections are empty and that will tell you what mode you're in.

Something like this (not at dev PC to test it out):

if ((grdMyGrid.masterTable.get_editItems() != null) && (grdMyGrid.masterTable.get_editItems().length > 0))
{
     //Editing row
}
else if ((grdMyGrid.masterTable.get_insertItems() != null) && (grdMyGrid.masterTable.get_insertItems().length > 0))
{
     //Inserting row
}
else
{
     //View mode
}