Get GridDataItem While Inserting on Client-Side

[Velma]

I trust there is a really obvious answer here, and I'm just looking write through it. One of the great things about this forum is someone will probably tell me. 

We have a date data entry implementation which works with a RadMaskedTextBox, and ASP.NET image control, and a single DatePicker on a master page. It took some work and is far from perfect, but it's much better than the RadDateInput with built-in Date Picker for data entry, so all that's good. This implementation involves storing a reference to each RadMaskedTextBox in a Javascript array so it can be accessed by index. Now I need to extend this implementation to some date entry on some existing grids.

So far I have the functionality working fine on Edit (will paste code below), but I can't make it work on Insert, because I can't figure out how to get the GridDataItem which is the relevant RadMaskedTextBox on the client-side.

On the server (and this all works fine for Edit and Insert):

protected void LeaseRenewalRadGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is Telerik.Web.UI.GridEditableItem)
    {
        GridEditableItem editableItem = (GridEditableItem)e.Item;
        RadMaskedTextBox startDateTextBox;
        if (e.Item.IsInEditMode)
        {
            if (e.Item.OwnerTableView.IsItemInserted)
            {
                Image startDateCalendarImage = (Image)editableItem.FindControl("RenewalInsertStartDateCalendarImage");
                if (startDateCalendarImage != null)
                {
                    startDateCalendarImage.Attributes.Add("onclick", "ShowGridDatePopup('Insert','Start','" + editableItem.ItemIndex + "');");
                }

                Image endDateCalendarImage = (Image)editableItem.FindControl("RenewalInsertEndDateCalendarImage");
                if (endDateCalendarImage != null)
                {
                    endDateCalendarImage.Attributes.Add("onclick", "ShowGridDatePopup('Insert','End','" + editableItem.ItemIndex + "');");
                }

                startDateTextBox = (RadMaskedTextBox)editableItem.FindControl("RenewalInsertStartDateRadMaskedTextBox");
            }
            else
            {
                Image startDateCalendarImage = (Image)editableItem.FindControl("RenewalStartDateCalendarImage");
                if (startDateCalendarImage != null)
                {
                    startDateCalendarImage.Attributes.Add("onclick", "ShowGridDatePopup('Edit','Start','" + editableItem.ItemIndex + "');");
                }

                Image endDateCalendarImage = (Image)editableItem.FindControl("RenewalEndDateCalendarImage");
                if (endDateCalendarImage != null)
                {
                    endDateCalendarImage.Attributes.Add("onclick", "ShowGridDatePopup('Edit','End','" + editableItem.ItemIndex + "');");
                }

                startDateTextBox = (RadMaskedTextBox)editableItem.FindControl("RenewalStartDateRadMaskedTextBox");
            }

            if (startDateTextBox != null)
            {
                startDateTextBox.Focus();
                startDateTextBox.Attributes.Add("onfocus", "this.select()");
            }
        }
    }
}

On the client, the following code works great for edit, but it does not work for insert. For insert, index is -1, and 

        row = MasterTable.get_dataItems()[index];

returns null, and thus nothing works.

I can't find any different way to get a reference to the RadMaskedTextBox here.

Please help. Thanks.

function ShowGridDatePopup(editinsert, startend, index) {
    // alert(index);
    var grid = $find("<%=LeaseRenewalRadGrid.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var dateTextBox;
    var row;
    if (editinsert == "Edit") {
        row = MasterTable.get_dataItems()[index];
        if (startend == "Start") {
            dateTextBox = row.findControl("RenewalStartDateRadMaskedTextBox");
        }
        else {  // End
            dateTextBox = row.findControl("RenewalEndDateRadMaskedTextBox");
        }
        if (dateTextBox != null) {
            dateControls[8] = dateTextBox;
            ShowDatePopup(8, "TopRight", true);
        }
    }
    else { // Insert

       row = MasterTable.get_dataItems()[index];
       if (startend == "Start") {
            dateTextBox = row.findControl("RenewalInsertStartDateRadMaskedTextBox");
        }
        else {  // End
            dateTextBox = row.findControl("RenewalInsertEndDateRadMaskedTextBox");
        }
        if (dateTextBox != null) {
            dateControls[9] = dateTextBox;
            ShowDatePopup(9, "TopRight", true);
        }
    }
}

[Maria Ilieva]

Hello,

I would suggest you to refer to the help topics below which elaborate on accessing the insert and edit items on the client:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-get-edititems.html
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-get-insertitem.html

Please note that the client-side properties for getting the tableview insert row and edited rows (get_insertItem(), get_editFormItem(), get_editItems()) are available since Q3 2011.

Please make sure that you are using this or newer version of the controls.

I hope this helps.


Greetings,
Maria Ilieva
the Telerik team