This is a migrated thread and some comments may be shown as answers.

btn.Enable only if grid validates

1 Answer 31 Views
Grid
This is a migrated thread and some comments may be shown as answers.
TonyG
Top achievements
Rank 1
TonyG asked on 31 Aug 2012, 10:51 PM
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!

1 Answer, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 01 Sep 2012, 08:44 AM
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
Tags
Grid
Asked by
TonyG
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Share this question
or