We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Inline Form Editing

Hello there,

I am using a syncfusion grid in my ASP.NET MVC project. Below is a snapshot of my grid.

 

Code:


I am facing a couple issues here. First one is, until now, my inline edit form opens on rowDoubleClick event. However, I need to open it onCheckBoxChecked event; there is a checkbox in the first column in each row. How would we do it?

Second, in my edit form, you can see that there are two fields empty (Speciality and Business Address). Here, if a field is a required field, it should be shown as a red textbox. If the user hits 'Save' leaving the field empty, it should block the process and focus on the required field. If it is an optional field, a normal textbox would be fine and it should accept empty data.

Need some ideas, thank you!

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team March 23, 2017 03:57 AM UTC

Hi Nishant, 

Thanks for contacting Syncfusion support. 

Query 1: Need to edit the Grid record while check the check box in Grid column. 

We have analyzed your query and we suspect that you want to edit the record while click the checkbox in the Grid column. 

We have achieved the same by using the change event of checkbox in Grid. 

Refer the below code example. 

 
<input type="checkbox" class="checkboxcolumn" /> 
 
-------------------- 
 
<script type="text/javascript"> 
    $(document).on('change', '.checkboxcolumn', function () { //this function triggered while the check box state get changed 
 
        if (this.checked) { 
 
            var gridObj = $("#FlatGrid").ejGrid('instance'); // Create Grid object. 
 
            var row = gridObj.getRowByIndex(gridObj.model.selectedRowIndex); //Get the selected row from the grid 
 
            gridObj.startEdit(row); // Get to edit the selected record 
        } 
    });   
</script>  
 
We have prepared a sample and it can be downloadable from the below location. 


Refer the help documentation. 

 
Query 2:  If a field value in empty but is a required field, then it should be shown as highlighted. 
 
We have analyzed your query and we suspect that you want to validate the field value while editing or adding the record. 
 
We can able to validate the filed value while saving or adding a record, by setting the validation rules for that columns in the Grid. 
 
Refer the below code example. 
 
 
@(Html.EJ().Grid<OrdersView>("Editing") 
         
         --------------- 
 
       .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Width(90).Add(); 
 
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add(); 
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).EditType(EditingType.Numeric).Width(75).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).ValidationRules(v => v.AddRule("range", "[0,1000]")).Format("{0:C}").Add(); 
 
           col.Field("ShipCountry").HeaderText("Ship Country").EditType(EditingType.Dropdown).Width(85).Add(); 
            col.Field("ShipCity").HeaderText("Ship City").Width(90).Add(); 
        }) 
        .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 
        )  
  
 
Refer the online sample for validation. 
 
 
Refer the help documentation. 
 
 


Regards, 
Prasanna Kumar N.S.V 
 


Loader.
Live Chat Icon For mobile
Up arrow icon