RadGrid Batch Update with RadMaskedTextBox in cell

[Tiago]

Hello,

I am continuing the previous post for the batch update with telerik controls (http://www.telerik.com/community/forums/aspnet/grid/radgrid-batch-update-with-drop-down-in-cell.aspx). My problem is to implement the tutorial using the RadMaskedTextBox and RadNumericTextBox control. The HideEditor function is working properly, but when i click at the row that i want to edit, the column editor is not shown, maybe i should change something in the ShowColumnEditor function?

What are the changes  that i need to do in javascript? And regarding to the fields validation, is it possible to use RequiredFieldValidation?

Below is the used code:

function ShowColumnEditor() {

    editedCell = this;

    //hide text and show column editor in the edited cell
    var cellText = this.getElementsByTagName("span")[0];
    cellText.style.display = "none";

    //display the span which wrapps the hidden checkbox editor
    if (this.getElementsByTagName("span")[1]) {
        this.getElementsByTagName("span")[1].style.display = "";
    }

    var colEditor = this.getElementsByTagName("div")[0] || this.getElementsByTagName("input")[0] || this.getElementsByTagName("select")[0];
    colEditor.style.display = "";

    if (colEditor.tagName == "DIV") {
        var _Editor = $find(colEditor.id.replace("_wrapper", ""));

        if (colEditor.id.indexOf("_wrapper") != -1) {
            // DatePicker is Found
            _Editor.get_textBox().focus();
        }
        else {
            _Editor.get_inputDomElement().focus();
        }
    }
    else {
        colEditor.focus();
    }
}


function HideEditor(editCell, editorType) {
//get reference to the label in the edited cell
var lbl = editCell.getElementsByTagName("span")[0];

switch (editorType) {
    case "maskedtextbox":
        var dtPickerDIV = editCell.getElementsByTagName("div")[0];
        var dtPickerID = editCell.getElementsByTagName("input")[0].id;
        var dtPickerClientID = dtPickerID.replace("_text", "");
        var dtPicker = $find(dtPickerClientID);

        if (lbl.innerHTML != dtPicker.value) {
            lbl.innerHTML = dtPicker.value;
            editCell.style.border = "1px dashed red";
            StoreEditedItemId(editCell);
        }
        dtPickerDIV.style.display = "none";
        break;
 case "DatePicker":
        var dtPickerDIV = editCell.getElementsByTagName("div")[0];
        var dtPickerID = editCell.getElementsByTagName("input")[0].id;
        var dtPickerClientID = dtPickerID.replace("_dateInput_text", "");
        var dtPicker = $find(dtPickerClientID);

        if (lbl.innerHTML != dtPicker.get_textBox().value) {
            lbl.innerHTML = dtPicker.get_textBox().value;
            editCell.style.border = "1px dashed red";
            StoreEditedItemId(editCell);
        }
        dtPickerDIV.style.display = "none";
        break;
..........

Thanks,
Tiago Gerevini Yoshioka

[Marin]

Hi Tiago,

 You can initially set the Display property of the RadMasked / RadNumericTextBox to false and then use the client-side set_visible method to show hide the control.

<ItemTemplate>
                       <asp:Label ID="lblUnitPrice" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>' />
                       <telerik:RadMaskedTextBox Mask="###" ID="txtUnitPrice" runat="server" Width="95%" Text='<%# Bind("UnitPrice") %>' Display="false"/>
                   </ItemTemplate>

function ShowColumnEditor() {
                editedCell = this;

                //hide text and show column editor in the edited cell
                var cellText = this.getElementsByTagName("span")[0];
                cellText.style.display = "none";
                //display the span which wrapps the hidden checkbox editor
                if (this.getElementsByTagName("span")[1]) {
                    this.getElementsByTagName("span")[1].style.display = "";
                }
                var colEditor = $telerik.findControl(editedCell,"txtUnitPrice") || this.getElementsByTagName("input")[0] || this.getElementsByTagName("select")[0];
                if (colEditor instanceof Telerik.Web.UI.RadMaskedTextBox)
                {
                    colEditor.set_visible(true);
                    return;
                }
                //if the column editor is a form decorated select dropdown, show it instead of the original
                if (colEditor.className == "rfdRealInput" && colEditor.tagName.toLowerCase() == "select")
                colEditor = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(colEditor);
                    colEditor.style.display = "";
                    colEditor.focus();

            }

You can use validators in RadGrid as shown in this online demo.

Kind regards,
Marin
the Telerik team

[Tiago]

Now the RadMaskedTextBox is visible but the show/hide function is not working.

Here's my code:

function HideEditor(editCell, editorType) {
//get reference to the label in the edited cell
var lbl = editCell.getElementsByTagName("span")[0];

switch (editorType) {
case "maskedtextbox":
var maskedDIV = editCell.getElementsByTagName("div")[0];
var maskedID = editCell.getElementsByTagName("input")[0].id;
var maskedClientID = maskedID.replace("_text", "");
var masked = $find(maskedClientID);

if (lbl.innerHTML != masked.value) {
lbl.innerHTML = masked.value;
editCell.style.border = "1px dashed red";
StoreEditedItemId(editCell);
}
maskedDIV.style.display = "none";
break;
........

function ShowColumnEditor() {

editedCell = this;

//hide text and show column editor in the edited cell
var cellText = this.getElementsByTagName("span")[0];
cellText.style.display = "none";

//display the span which wrapps the hidden checkbox editor
if (this.getElementsByTagName("span")[1]) {
this.getElementsByTagName("span")[1].style.display = "";
}

var colEditor = $telerik.findControl(editedCell, "txtCep") || this.getElementsByTagName("div")[0] || this.getElementsByTagName("input")[0] || this.getElementsByTagName("select")[0];
if (colEditor instanceof Telerik.Web.UI.RadMaskedTextBox) {
colEditor.set_visible(true);
return;
}

colEditor.style.display = "";

if (colEditor.tagName == "DIV") {
var _Editor = $find(colEditor.id.replace("_wrapper", ""));

if (colEditor.id.indexOf("_wrapper") != -1) {
// DatePicker is Found
_Editor.get_textBox().focus();
}
else {
_Editor.get_inputDomElement().focus();
}
}
else {
colEditor.focus();
}
}

function UpdateValues(grid) {
//determine the name of the column to which the edited cell belongs
var tHeadElement = grid.get_element().getElementsByTagName("thead")[0];
var headerRow = tHeadElement.getElementsByTagName("tr")[0];
var colName = grid.get_masterTableView().getColumnUniqueNameByCellIndex(headerRow, editedCell.cellIndex);

//based on the column name, extract the value from the editor, update the text of the label and switch its visibility with that of the column
//column. The update happens only when the column editor value is different than the non-editable value. We also set dashed border to indicate
//that the value in the cell is changed. The logic is isolated in the HideEditor js method
switch (colName) {
case "Codigo":
HideEditor(editedCell, "textbox");
break;
case "Estado":
HideEditor(editedCell, "dropdown");
break;
case "DataLancamento":
HideEditor(editedCell, "DatePicker");
break;
case "Cep":
HideEditor(editedCell, "maskedtextbox");
break;
.....................


<telerik:GridTemplateColumn UniqueName="Cep" HeaderText="CEP" SortExpression="Cep"
HeaderStyle-Width="100px">
<ItemTemplate>
<asp:Label ID="lblCep" runat="server" Text='<%# Eval("Cep") %>' />
<telerik:RadMaskedTextBox ID="txtCep" runat="server" Width="130px" Mask="#####-###"
Display="false" ValidationGroup="Cadastro" Text='<%# Bind("Cep") %>'>
</telerik:RadMaskedTextBox>
</ItemTemplate>
</telerik:GridTemplateColumn>

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridDataItem)
       {
           GridDataItem dataItem = (GridDataItem)e.Item;
           DateInputSetting Datebehavior = (DateInputSetting)RadInputManager1.GetSettingByBehaviorID("Datebehavior");
           TextBoxSetting StringBehavior = (TextBoxSetting)RadInputManager1.GetSettingByBehaviorID("StringBehavior");
           NumericTextBoxSetting numericSetting = (NumericTextBoxSetting)RadInputManager1.GetSettingByBehaviorID("NumberBehavior");
           NumericTextBoxSetting DecimalNumberBehavior = (NumericTextBoxSetting)RadInputManager1.GetSettingByBehaviorID("DecimalNumberBehavior");
           NumericTextBoxSetting currencySetting = (NumericTextBoxSetting)RadInputManager1.GetSettingByBehaviorID("CurrencyBehavior");
           NumericTextBoxSetting CurrencyBehaviorUS = (NumericTextBoxSetting)RadInputManager1.GetSettingByBehaviorID("CurrencyBehaviorUS");

           RadDatePicker DatePicker = (RadDatePicker)dataItem.FindControl("rdpDataLancamento");
           Datebehavior.TargetControls.Add(new TargetInput(DatePicker.UniqueID, true));

           RadMaskedTextBox txtMaskedTextBox = (RadMaskedTextBox)dataItem.FindControl("txtCep");
           numericSetting.TargetControls.Add(new TargetInput(txtMaskedTextBox.UniqueID, true));
       .................

[Marin]

Hi Tiago,

 You can have a look at the attached sample page for working example and proper configuration of RadMaskedTextBox as editor. 

Regards,
Marin
the Telerik team

[Tiago]

Hi!

I tested the attached sample but it throws the same problem. When the page is loaded, both label and RadMaskedBox are shown, but when i edit the column it works correctely  (hide the maskedtextbox and show only label).

Thanks!
Tiago Gerevini Yoshioka

[Marin]

Hello Tiago,

 Did you test the exact same page and in which browser? When I run it on my side it renders properly initially and also in edit mode as you can see from the attached screen shots. Can you post a sample project that reproduces the issue?

Kind regards,
Marin
the Telerik team

[Tiago]

Hi,

Yes, i tested the exact same page in IE9, Mozilla Firefox and Chrome. It renders properly after edited but not initially.

Check the  screen shots of the page running in my project.

Thanks,
Tiago Gerevini Yoshioka

[Marin]

Hello Tiago,

 Can you specify which version of RadControls you are using? As you can see from the code the RadNumericTextBox has its Display property set to false initially so it should not be visible.

<ItemTemplate>
                        <asp:Label ID="lblUnitPrice" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>' />
                        <telerik:RadMaskedTextBox Mask="$##.00" BackColor="Yellow" ID="txtUnitPrice" runat="server" Width="95%" Text='<%# Bind("UnitPrice") %>' Display="false"/>
                    </ItemTemplate>

You can also test the RadMaskedTextBox alone on a page with Display="false" set to see if it is hidden initially.Regards,
Marin
the Telerik team

[Tiago]

Yes, the display property is not working. Is there any other way to turn the control invisible?

RadControls version: 2011.1.315.40

Thanks,
Tiago Gerevini Yoshioka

[Marin]

Hello Tiago,

 In this case another option would be if you wrap the RadMaskedTextBox in another HTML container (e.g. div) and show / hide this element instead of the TextBox.

<div id="divMaskedTextBox" style="display:none;">
                            <telerik:RadMaskedTextBox Mask="$##.00" BackColor="Yellow" ID="txtUnitPrice" runat="server" Width="95%" Text='<%# Bind("UnitPrice") %>' />
                        </div>

Attached is the modified page.

Hope this helps. All the best,
Marin
the Telerik team

[Tiago]

That worked perfectly! Thanks

Tiago Gerevini Yoshioka