RadGrid InPlace Editing And Formatting

[Andrew Buxton]

Hi,

I have a RadGrid that puts the row into in inplace editmode if the user double clicks an item in the grid. Before the user can submit the row back to the server a JavaScript client-side validation routine is run on the row and this determines which fields in the row are invalid. I have references to all the controls in the row, this part works perfectly.

What I'd like to know is .. Is there a preferred way of highlighting inplace form elements? I need to do this for each form element that has an incorrect value entered (according to my validation). The controls I'm using in the grid are RadDatePicker, RadComboBox, RadTextBox and RadNumericBox.

Any help would be greatly appreciated.


Andy.

[Tsvetina]

Hello Andrew,

You could try this javascript in order to make the RadInput controls pick up their default invalid style:

function validating(sender, eventArgs) {
  var tb = //get hold of your textboxes
  if(tb.get_value(). //perform your custom check  ) {
      tb.get_owner()._inputs[tb._id]._invalid = true;
      tb.updateCssClass();
      e.preventDefault();
}

I hope this helps you achieve the desired functionality.

All the best,
Tsvetina
the Telerik team

[Andrew Buxton]

 

 

Thank you very much for the code snippet, unfortunately it didn't work for me using my example snippet below. The get_owner() method isn't found. I am using Q2 2010 edition of the RadControls. I have tried upgrading to the latest version but it causes more issues in my application, so that will have to wait until I can assign time to address those new issues.

I'm no expert with Telerik controls at this time so any pointers as to why the code below isn't working would be muchly appreciated.


Andy.


function DetailGrid_KeyDown(rowindex) {

    var radGrid = $find("<%= DetailGrid.ClientID %>");

    var success = false;

    var RETURN_KEY = 13;



    if (window.event.keyCode == RETURN_KEY) {

        if (radGrid != null) {

            var masterTable = radGrid.get_masterTableView();



            if (masterTable != null) {

                var dataItem = masterTable.get_dataItems()[rowindex];



                if (dataItem != null) {

                    var radEditEarner = dataItem.findControl("RadEditEarner");

 

                    if (radEditEarner.get_value().length == 0) {

                        radEditEarner.get_owner()._inputs[radEditEarner._id]._invalid = true;

                        radEditEarner.updateCssClass();

                    }
                      }

            }

        }

    }

      

    return success;

}

 

 

[Tsvetina]

Hello Andrew,

It is my mistake, I have overlooked you scenario. This code works in the cases where there is a RadInputManager providing settings for asp textboxes. For RadInput controls you can try modifying the solution offered by my colleague at this address.

Greetings,
Tsvetina
the Telerik team

[Andrew Buxton]

Many thanks for the response,

I have now managed to get field highlighting working for RadTextBoxes, however, the same method does not apply for formatting other controls such as RadDatePicker and RadUpload. Why is the approach of adding and removing styles from a control not consistent?

>>> control.get_styles().EnabledStyle[1] += "additionalstyle";

I've been trying to get this to work for hours now and I'm wondering if there is a simple solution to this?

I have a customvalidator which is intended to validate the controls on my form (client-side). If the javascript function deems a control as being invalid I want to highlight that control by changing its background and/or border.

Can you help?

Head-bangingly yours,


Andy.

[Tsvetina]

Hello Andrew,

You can still use the same approach for the RadDatePicker, only you need to access its DateInput part:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <DateInput ClientEvents-OnValueChanging="validate" runat="server" />
</telerik:RadDatePicker>

function validate(sender, eventArgs) {
    sender.get_styles().EnabledStyle[1] += " riError";
    sender.updateCssClass();
    eventArgs.IsValid = false;
}

As for the RadUpload, the logic would be different, as it is implemented in a quite different manner. You can use jQuery to alter the style of the file input style:

$telerik.$("#RadUpload1 .ruFakeInput")[0].style.backgroundColor = "red";

I hope this helps you achieve the desired results.

Regards,
Tsvetina
the Telerik team