Client-side get_editItems()

[Makoto]

Hello,

I have a RadGrid with a UserControl as the EditForm template. There's a RadComboBox with LoadOnDemand enabled on the UserControl. RadComboBox has client-side SelectedItemChanged event handler defined to populate values of other controls on the same UserControl in the grid's insert or edit form.

Since there are 4 different grids that use the same UserControl, I've set up 4 different SelectedItemChanged event handlers for each grid's current edit/insert form - generating and registering it on the fly in the UserControl's Page_PreRender event:

if (txtParentGridID.Text != string.Empty)
{
    string cmbZipHandlerName = txtParentGridID.Text + "_cmbZip_SelectedIndexChanged";
    string script = "function " + cmbZipHandlerName + "(sender, args) {"
                + "var grd = $telerik.findGrid('" + txtParentGridID.Text + "', null);"
                + "ZipAutoFillCurrentEditForm(grd, args.get_item());"
                + "}";
    // Set event handler
    cmbZip.OnClientSelectedIndexChanged = cmbZipHandlerName;

    // registering to the Page object works
    ScriptManager.RegisterStartupScript(Page, typeof(Page), cmbZip.ClientID + "_handler", script, true);
}

The event handlers are invoked just fine. But the problem is that when when I try to access each of the grid's edit form, the master table view's edit items are blank (in GetCurrentFormItem()). get_insertItem returns an object just fine. :

// These zip autofill related functions are separated in a script file
function ZipAutoFillCurrentEditForm(grd, selectedItem) {
    var formItem;
    formItem = GetCurrentFormItem(grd);

    if (formItem)
    {
        var city;
        var state;
        var island;
        var county;
        var country;
        city = FindInputInTemplateForm(formItem, 'txtCity');
        state = FindInputInTemplateForm(formItem, 'txtState');
        island = FindInputInTemplateForm(formItem, 'txtIsland');
        county = FindInputInTemplateForm(formItem, 'txtCounty');
        country = FindInputInTemplateForm(formItem, 'txtCountry');
        FillZipFields(selectedItem, city, state, island, county, country);
    }
}

// Get current form item of a grid
function GetCurrentFormItem(grd) {
    var master = grd.get_masterTableView();
    var formItem;
    if (master.get_isItemInserted()) {
        // insert mode
        formItem = master.get_insertItem();
    } else {
        // @todo check Edit mode
        // get_editItems() is blank
        var editItem = master.get_editItems()[0];
        if (editItem) {
            formItem = editItem.get_editFormItem();
        }
    }
    return formItem;
}

/*
    Looks for a HTML element (inputbox) for a given server control
    - FormItem: HTML element of RadGrid's Insert/Edit form
    - ServerID: Server-side Control ID
*/
function FindInputInTemplateForm(formItem, serverID) {
    if (formItem != null) {
        var inputs = formItem.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            // test with city
            if (input.id.indexOf(serverID) < 0)
                continue;
            if (input.type && input.type == "text") {
                return input;
            }
        }
    }
}


/*
    Full all of the address fields that are dependent on zip code
    - selected: selected item (RadComboBoxItem object)
    - city, state, island, county, country: respective input element
*/
function FillZipFields(selected, city, state, island, county, country) {
    if (selected != null) {
        var attrs = selected.get_attributes();
        city.value = attrs.getAttribute('City');
        state.value = attrs.getAttribute('State');
        island.value = attrs.getAttribute('Island');
        county.value = attrs.getAttribute('County');
        country.value = attrs.getAttribute('Country');
    }
}

Are there conditions where get_editItems called on the master table view return null? What is the condition that get_editItems is guaranteed to return somehting?

Thanks,
Makoto

[Tsvetina]

Hi Makoto,

I could not reproduce such issue in our demos. I tested the following demo:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/usercontroleditform/defaultcs.aspx
and here is a video of what I tried:
http://screencast.com/t/RJXvrCKVPxI

Can you confirm that you are running this code only while RadGrid has items in edit mode?

Kind regards,
Tsvetina
the Telerik team

[Makoto]

Hi Tsvetina,

I checked radGridClientObject._editIndexes.length suggested by this post:

http://www.telerik.com/community/forums/aspnet-ajax/grid/js-version-of-isineditmode.aspx

...and it returns 1. So there is an item in edit mode. But get_masterTableView().geteditItems() is still undefined.

I'm not sure if it's related. But get_masterTableView().get_insertItem() on insert returns the row properly.

Anythings else I should check?

This is the markup of the grid placed in RadAjaxPanel:

<telerik:RadAjaxPanel runat="server" ID="ajxpnlPOS" LoadingPanelID="ajaxlpPractice">
    <telerik:RadGrid ID="grdPractice" runat="server" Height="260px" Width="720px"
        AutogenerateColumns="true" ShowStatusBar="true" CellSpacing="0" GridLines="None"
        OnNeedDataSource="grdPractice_NeedDataSource"
        ShowHeader="False" onprerender="grdPractice_PreRender"
        onitemevent="grdPractice_ItemEvent"
        oniteminserted="grdPractice_ItemInserted"
        oninsertcommand="grdPractice_InsertCommand"
        onitemcommand="grdPractice_ItemCommand"
        onitemcreated="grdPractice_ItemCreated"
        onitemdatabound="grdPractice_ItemDataBound"
        onupdatecommand="grdPractice_UpdateCommand" >
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
                <Scrolling AllowScroll="True" UseStaticHeaders="true" />
                <KeyboardNavigationSettings AllowActiveRowCycle="true" />
            </ClientSettings>
            <MasterTableView TableLayout="Auto" InsertItemDisplay="Top" EditMode="EditForms"
                            CommandItemDisplay="Top" EnableNoRecordsTemplate="false" NoMasterRecordsText=""
                            DataKeyNames="PracticeAddressID">
                <CommandItemSettings ShowAddNewRecordButton="true" AddNewRecordText="" ShowRefreshButton="false" />
                <ItemTemplate>
                    <uc1:PracticeAddressSameAsForm ID="saPOS" runat="server" EnableViewState="true" />
                </ItemTemplate>
                <EditFormSettings EditFormType="WebUserControl" UserControlName="../PracticeAddressSameAsForm.ascx">
                    <EditColumn UniqueName="EditCommandColumn" ButtonType="LinkButton" Display="true" FilterControlAltText="Filter EditCommandColumn column">
                    </EditColumn>
                </EditFormSettings>
                <RowIndicatorColumn Display="true" />
                <commanditemsettings addnewrecordtext="" exporttopdftext="Export to PDF"
                    showrefreshbutton="False" />
                <rowindicatorcolumn filtercontrolalttext="Filter RowIndicator column"
                    visible="True">
                </rowindicatorcolumn>
                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"
                    Visible="True">
                </ExpandCollapseColumn>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
        </telerik:RadGrid>
</telerik:RadAjaxPanel>

[Tsvetina]

Hi Makoto,

I just answered the support ticket opened for this issue. In case anyone else is interested, I am posting my reply here as well:

I built a test project using the code provided in the forum thread but I am still unable to reproduce the issue, as you can see in this video:
http://screencast.com/t/JFnitJk8cf1
I am also attaching the project I used for testing. Please give it a try and let me know if I am missing anything important out.

Additionally, as now there is a formal support thread on the issue, when you get back to us, please use it instead of this one, so that we avoid double posts.

Kind regards,
Tsvetina
the Telerik team