btn.Enable only if grid validates

[TonyG]

I guess I should know this, but... I have a grid where every control does not auto-postback. It allows mult-row edit, has dropdowns, date and time pickers, etc. If one of the fields is invalid, like text in a datepicker, I want to disable the Update button. I believe all of this needs to be done on the client side. And I believe I need to funnel all validation through one JavaScript method that determines if there are any validation issues (btn.enabled=allControlsValid;).

But I want to do this in the most performant manner, which rules out server-side validation. ( ? ) There could be a 100 rows in this grid with 30 columns, and maybe 10 of them are editable. I think the user would perceive a delay if I checked 1000 cells on every cell edit. So I'm guessing the check should only be made when focus moves from one row to another.
Can someone guide me in the right direction?

Thanks!

[Jayesh Goyani]

Hello,

Please try with below code snippet.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">
           function validate(obj, btn, Othercontrol) {

               obj = document.getElementById(obj.id);
               btn = document.getElementById(btn);
               Othercontrol = document.getElementById(Othercontrol);
               if (obj.value != null && obj.value != '' && Othercontrol.value != null && Othercontrol.value != '') {
                   btn.style.display = '';
               }
               else {
                   btn.style.display = 'none';
               }
           }
       </script>
   </telerik:RadCodeBlock>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnItemCommand="RadGrid1_ItemCommand"
          OnItemDataBound="RadGrid1_ItemDataBound" OnNeedDataSource="RadGrid1_NeedDataSource">
          <MasterTableView CommandItemDisplay="Top" DataKeyNames="ID" ClientDataKeyNames="ID">
              <Columns>
                  <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
                  </telerik:GridBoundColumn>
                  <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
              </Columns>
          </MasterTableView>
      </telerik:RadGrid>

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
   {
       dynamic data = new[] {
               new { ID = 1, Name ="Name1",path="1.jpg"},
               new { ID = 2, Name = "Name2",path="2.jpg"},
               new { ID = 3, Name = "Name3",path="3.jpg"}
           };
       RadGrid1.DataSource = data;
   }

   protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
   {

   }
   protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item.IsInEditMode && e.Item is GridEditableItem)
       {
           GridEditableItem item = e.Item as GridEditableItem;
           LinkButton btn = item.FindControl("UpdateButton") as LinkButton;
           TextBox id = item["ID"].Controls[0] as TextBox;
           TextBox name = item["Name"].Controls[0] as TextBox;

           id.Attributes.Add("onblur", "validate(this,'" + btn.ClientID + "','" + name.ClientID + "');");
           name.Attributes.Add("onblur", "validate(this,'" + btn.ClientID + "','" + id.ClientID + "');");
       }
   }

Thanks,
Jayesh Goyani