Inline Form Editing

[Nishant Balami]

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!

[Prasanna Kumar Viswanathan]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/129485/ze/SyncfusionMvcApplication14-1647741538 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:startedit 

 

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. 

 

Online Sample: http://mvc.syncfusion.com/demos/web/grid/inlineformediting 

 

Refer the help documentation. 

 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-validationrules 

 

Link: https://help.syncfusion.com/aspnetmvc/grid/editing#column-validation 

Regards, 

Prasanna Kumar N.S.V