[Solved] EditItemTemplate content not getting bound manually when using EditMode="Batch"

[Martin]

This problem has driven me crazy, and I hope anybody from the staff can help me about.

I was building a RadGrid with EditMode="InPlace", I decided to not auto generate columns. The grids datasource will be a list of an object with two properties "Quantity" and "MaxQuantity". The user can configure Quantity, but it should not get higher than MaxQuantity obviously. This became my grid:

<telerik:RadGrid ID="trgComponents" runat="server" AllowPaging="false" Culture="de-DE"
    CssClass="RadGrid Components" AllowSorting="false" AutoGenerateColumns="false" ShowStatusBar="false" PageSize="999999"
    OnNeedDataSource="trgComponents_NeedDataSource">
    <MasterTableView DataKeyNames="ID" CommandItemDisplay="Bottom" EditMode="InPlace">
        <Columns>
            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn" EditText="Bearbeiten">
                <HeaderStyle Width="20px" />
            </telerik:GridEditCommandColumn>
            <telerik:GridTemplateColumn UniqueName="Quantity" HeaderText="Anzahl" ItemStyle-CssClass="editableCell" ItemStyle-HorizontalAlign="Right">
                <HeaderStyle Width="80px" />
                <ItemTemplate>
                    <asp:Label ID="lQuantity" runat="server" Text='<%# Eval("Quantity") %>' />
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ID="trntbQuantity" runat="server" Type="Number" MinValue="0" MaxValue='<%# Convert.ToDouble(Eval("MaxQuantity")) %>' Text='<%# Bind("Quantity") %>' Width="77" ShowSpinButtons="true" NumberFormat-DecimalDigits="0" EnabledStyle-HorizontalAlign="Right" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridNumericColumn UniqueName="MaxQuantity" HeaderText="Max. Anzahl" DataField="MaxQuantity" DataType="System.Int32" ItemStyle-HorizontalAlign="Right" ReadOnly="true">
                <HeaderStyle Width="80px" />
            </telerik:GridNumericColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

For test purposes there is a static list of an object with ID-, Quantity- and MaxQuantity-Property that will be bound in the NeedDataSource event, so not really any logic in the code behind.
As you can see I use a TemplateColumn in the markup and eval the MaxQuantity in the MaxValue field. This works! I've set row one in edit mode programmically and I could not increase the RadNumericTextBox value across the MaxQuantity value, as desired.


Now I decided I want to use EditMode="Batch" with EditType="Cell", so I modified my RadGrid a bit:

<telerik:RadGrid ID="trgComponents" runat="server" AllowPaging="false" Culture="de-DE"
    CssClass="RadGrid Components" AllowSorting="false" AutoGenerateColumns="false" ShowStatusBar="false" PageSize="999999"
    OnNeedDataSource="trgComponents_NeedDataSource"
    OnPreRender="trgComponents_PreRender">
    <MasterTableView DataKeyNames="ID" CommandItemDisplay="Bottom" EditMode="Batch">
        <BatchEditingSettings EditType="Cell" OpenEditingEvent="Click" />
        <Columns>
            <telerik:GridTemplateColumn UniqueName="Quantity" HeaderText="Anzahl" ItemStyle-CssClass="editableCell" ItemStyle-HorizontalAlign="Right">
                <HeaderStyle Width="80px" />
                <ItemTemplate>
                    <asp:Label ID="lQuantity" runat="server" Text='<%# Eval("Quantity") %>' />
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ID="trntbQuantity" runat="server" Type="Number" MinValue="0" MaxValue='<%# Convert.ToDouble(Eval("MaxQuantity")) %>' Text='<%# Bind("Quantity") %>' Width="77" ShowSpinButtons="true" NumberFormat-DecimalDigits="0" EnabledStyle-HorizontalAlign="Right" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridNumericColumn UniqueName="MaxQuantity" HeaderText="Max. Anzahl" DataField="MaxQuantity" DataType="System.Int32" ItemStyle-HorizontalAlign="Right" ReadOnly="true">
                <HeaderStyle Width="80px" />
            </telerik:GridNumericColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Now the problem appears: When I click on a cell and the RadNumericTextBox appears its MaxValue will be set to 70368744177664 internally, the constructed value. Hence, it will not take care when I cross the MaxQuantity value.

I was experimenting a bit, and it turns out, when I change to cell batch mode, it will only assign static values to my RadNumericTextBox. It will not run any binding expression. Instead, no matter I set the Text property of the RadNumericTextBox or not, when I click the cell it will take the Text from the Label in the ItemTemplate node and pass it to the Text property of the RadNumericTextBox in the EditItemTemplate.


How can I get rid of that, as I need to limit the Quantity amount based on the MaxQuantity amount on the specified object.


Thanks in advice!

[Martin]

Please ignore OnPreRender="trgComponents_PreRender" in my first post, this event is empty.

[Martin]

Could anybody of the staff please help me? I'd like to find a solution until tomorrow.

[Viktor Tachev]

Hi Martin,

When the RadGrid is in Batch editing mode there is a single editor rendered per column. This is done in order to improve performance of the control. Because of the specific behavior the MaxValue for the RadNumericTextBox would need to change for every row (I guess you have different MaxQuantity values for different rows). In order to implement the functionality you could use the following approach.

You could handle the OnBatchEditCellValueChanging event and check if the value entered in the input is lower than the value in the corresponding MaxQuantity cell. The handler would look similar to the one below:

function valueChanging(sender, args) {
    var grid = sender;
    var masterTable = grid.get_masterTableView();
    var batchEditManager = grid.get_batchEditingManager();
    var editedCell = args.get_cell();

    if (editedCell) {
        var editRowId = args.get_row().id.split("__")[1];

        var maxValue = parseInt(masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[editRowId], "MaxQuantity").innerHTML);
        var enteredValue = parseInt(args.get_editorValue());

        var numericBox = $telerik.findControl(args.get_cell(), "trntbQuantity");

        if (enteredValue > maxValue) {
            numericBox.set_invalid(true);
            args.set_cancel(true);
        }
    }
}

Regards,
Viktor Tachev
Telerik

 

 

[Martin]

Hi Viktor,

thanks for your response. You answer helped me to understand why this happens. It would be neat if you offer a setting in future releases that allows to force the rebinding (so another postback) of EditItem controls when clicking on the cell or row.

Back to the now: You guessed right about every row has its own independent MaxQuantity value.
I tried your solution, but it does not work. In the called JavaScript function args has no set_cancel function, hence it's undefined and the wrong value will be proceed.

How else I can abort the submission on that position?

[Martin]

We might have a too old version of Telerik Web UI (2013_1_403) that does not have set_cancel function in args. We also cannot update that version right now, so I hope you can offer me any alternate solution.

I attached a file to show what members args deliver.

[Martin]

Hi Viktor,

I finally fount a better way that actually works exactly the same as desired:
I added a function to the ​OnBatchEditOpened event:

function componentsBatchEditOpened(sender, args) {
    var masterTable = sender.get_masterTableView();
    var editRowId = args.get_row().id.split("__")[1];
    var maxValue = parseInt(masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[editRowId], "MaxQuantity").innerHTML);
    var numericBox = $telerik.findControl(args.get_cell(), "trntbQuantity");
    numericBox._maxValue = maxValue;
}

This will overwrite the internal _maxValue variable of the numericBox instance with the value from MaxQuantity. You example helped me to access all these things to solve this problem.

Cheers!

[Martin]

Because I set the maxValue on enter, I had to set the initial value on leave (​componentsBatchEditClosed) again, because it's the same RadNumericTextBox.

Here is the full solution:

<ClientSettings AllowGroupExpandCollapse="true" <ClientEvents OnBatchEditOpened="componentsBatchEditOpened" OnBatchEditClosed="componentsBatchEditClosed" /></ClientSettings>

       function componentsBatchEditOpened(sender, args) {
            var masterTable = sender.get_masterTableView();
            var editRowId = args.get_row().id.split("__")[1];
            var maxValue = parseInt(masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[editRowId], "MaxQuantity").innerHTML);
            var numericBox = $telerik.findControl(args.get_cell(), "trntbQuantity");
            numericBox._maxValue = maxValue;
        }
        function componentsBatchEditClosed(sender, args) {
            var masterTable = sender.get_masterTableView();
            var numericBox = $telerik.findControl(args.get_cell(), "trntbQuantity");
            numericBox._maxValue = 70368744177664; // zurück zum Initialwert für die nächste Zelle mit der selben RadNumericTextBox
        }

Problem is solved, I stop spamming now. Thanks.