[Solved] Dynamically generated RadGrid with Batch editing

[Alfonso]

Hi,

I have a RadGrid with the following definition in ascx control:

<telerik:RadGrid ID="GridCountryBand" runat="server" AutoGenerateColumns="false"

        Skin="Simple" CssClass="caronte-phase-grid"

        AllowPaging="False"

        AllowSorting="false"

        AllowFilteringByColumn="true"

        OnNeedDataSource="GridCountryBand_NeedDataSource"

        OnBatchEditCommand="GridCountryBand_BatchEditCommand"

        OnItemDataBound="GridCountryBand_ItemDataBound"

        >

        <GroupingSettings CaseSensitive="false" />

        <ClientSettings>

            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />

            <Selecting AllowRowSelect="true" />

            <ClientEvents OnBatchEditOpening="batchEditOpening" />

        </ClientSettings>

        <MasterTableView HeaderStyle-HorizontalAlign="Center" Width="100%" AutoGenerateColumns="false"

            DataKeyNames="ID_COUNTRY"

            EditMode="Batch">

            <BatchEditingSettings EditType="Cell" OpenEditingEvent="MouseOver" />

            <Columns>

            </Columns>

        </MasterTableView>

 

    </telerik:RadGrid>

Columns are added in Page_Load:

private void AddGridColumns()
        {
            int idTech = Convert.ToInt32(ddlTechnology.SelectedValue);

            ITechnologyBandService service = SharePointServiceLocator.GetCurrent().GetInstance<ITechnologyBandService>();

            DataSet data = service.GetBandsByTechnology(idTech);

            if (data != null && data.Tables.Count > 0)
            {
                GridCountryBand.MasterTableView.Columns.Clear();

                GridBoundColumn boundColumn = new GridBoundColumn();
                GridCountryBand.MasterTableView.Columns.Add(boundColumn);

                boundColumn.DataField = "DES_COUNTRY";
                boundColumn.HeaderText = "Country";
                boundColumn.ShowFilterIcon = false;
                boundColumn.FilterControlWidth = Unit.Percentage(100);
                boundColumn.AutoPostBackOnFilter = true;
                boundColumn.HeaderStyle.Width = Unit.Pixel(150);
                boundColumn.ItemStyle.Width = Unit.Pixel(150);

                foreach (DataRow row in data.Tables[0].Rows)
                {
                    GridCheckBoxColumn checkboxColumn = new GridCheckBoxColumn();
                    GridCountryBand.MasterTableView.Columns.Add(checkboxColumn);

                    checkboxColumn.DataField = row["ID_BAND"].ToString();
                    checkboxColumn.HeaderText = row["BAND_NAME"].ToString();
                    checkboxColumn.ShowFilterIcon = false;
                    checkboxColumn.AutoPostBackOnFilter = true;
                    checkboxColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
                    checkboxColumn.HeaderStyle.Width = Unit.Pixel(150);
                    checkboxColumn.ItemStyle.Width = Unit.Pixel(100);
                }
            }

I have an ASP.NET DropDownList in the ascx, outside the RadGrid. When page is loaded DropDownList value cannot be changed (if I set onchange JavaScript event it is not fired) until I try to edit cells (checkboxes).

If I remove batch editing mode, values in DropDownList can be changed with no problem.

Thanks and best regards,

Alfonso

[Alfonso]

I've forgotten to mention:

- Telerik version: 2014.2.724.45
- It is working fine in Chrome, but not working in IE10.

Thanks,

Alfonso

[Konstantin Dikov]

Hello Alfonso,

I have tested a simplified version of your markup and code-behind, but I was not able to replicate any issues with the DropDownList control on my end.

For your convenience I am attaching the page I have tested. Could you please inspect it and see what differs in your scenario.

Additionally, I could recommend that you inspect your browser console and ensure that there are no JavaScript errors present on the page, which could prevent the proper work of the control.

If the issue persist, please try to modify the attached page, so it could replicate the error.


Regards,
Konstantin Dikov
Telerik

 

 

[Alfonso]

Thank you for your response.

I have tested the page you have attached (Telerik controls version: 2014.2.724.45) and I reproduce the issue with IE10. I can send you a video but it cannot be attached. Dropdown value cannot be changed. It only changes if you move the cursor in the grid.

In Chrome is working fine.

Thanks for your help,

Alfonso

[Konstantin Dikov]

Hello Alfonso,

A week after my previous post we were able to replicate the issue you are describing and we have located what is causing it. Indeed, the problem was in some internal logic in Batch Editing, which was causing issues with external controls. 

Nevertheless, I am pleased to inform you that a fix for this will be introduced in our upcoming release.

For the time being, you can use the following workaround:

    <script type="text/javascript">
        Telerik.Web.UI.GridBatchEditing.prototype._mouseDown = function (e)
        {
            var that = this,
                target = Telerik.Web.UI.Grid.GetCurrentElement(e),
                activeElement = document.activeElement;

            setTimeout(function ()
            {
                that._tryCloseEdits(target);
            }, 1);
        }
    </script>
</form>

Please excuse us for any inconvenience caused.


Regards,
Konstantin Dikov
Telerik