Grid with InlineForm CRUD

[haryzad]

Hi syncfusion team support.

Currently i'm using the Grid view to populate and perform the CRUD using the inlineForm.

My problem, i try to send the drop down and date value to controller, but when debug, no value capture, only the textbox can pass the value.

Thanks

 <ej-grid id="Grid" allow-paging="true">

                        <e-datamanager json="ViewBag.datasourceDiagnosis"

                                       update-url="/DiagnosisInformation/SaveDiagnosis"

                                       insert-url="/DiagnosisInformation/SaveDiagnosis"

                                       remove-url="/DiagnosisInformation/SaveDiagnosis"

                                       adaptor="remoteSaveAdaptor" />

                        <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.InlineForm)" dialog-editor-template-id="#template" />

                        <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />

                        <e-columns>

                            <e-column header-text="Reference Id" field="Id" is-primary-key="true" is-identity="true" />

                            <e-column header-text="Diagnosis Date" 

                                      field="DiagnosisDateDesc"

                                      edit-type="@(EditingType.Datepicker)"

                                      value="{{:DiagnosisDateDesc}}"/>

                            <e-column header-text="Diagnosis Type" 

                                      field="Id"  

                                      foreign-key-field="Id" 

                                      foreign-key-value="Description" 

                                      datasource="@ViewBag.cmbDiagnosisType"

                                      value="{{: Description}}"/>

                            <e-column header-text="Diagnosis Name" 

                                      field="DiagnosisName"

                                      is-primary-key="true" 

                                      format="{0:C2}"

                                      value="{{:DiagnosisName}}"

                                      />

                        </e-columns>

                    </ej-grid>

[Venkatesh Ayothi Raman]

Hi Haryzad, 

Thanks for contacting Syncfusion support. 

We went through your code example that you have shared for us and found that you are defining the value property in column definition. But we don’t have a property name which is you are mentioned in your project. Please refer to the following Help documentation for more information, 

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

So, could you please provide details about that property and purpose of using? Because, we were unable to reproduce the reported issue at our end and prepared a sample based on your requirement which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8_(2)452098148 

Screenshot: 

 

In this sample, we have rendered the Grid with remote save adaptor and perform the CRUD operation using inlineEditform. if you still face the same issue, then could you please share the scenario and issue screenshot? 

Regards, 

Venkatesh Ayothiraman. 

[haryzad]

Hi Venkatesh Ayothiraman

Thanks for the feedback.

Based on the guideline that has been shared, i able to perform if using the EditMode = "InlineForm", base on my situation now; i try to use EditMode = "InlineFormTemplate" so i can customize the form to hide some of the field that are not required

<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.InlineFormTemplate)" inline-form-template-id="#template" />

You can see the below code, that i have some of the element :

1. ReferenceId = textbox

2. Diagnosis Date = DatePicker

3. Diagnosis Type = dropdown

4. Diagnosis Name = textbox

 <e-columns>

                            <e-column header-text="Reference Id" field="DiagnosisDetailsId" 

                                      is-primary-key="false" 

                                      is-identity="true" 

                                      disable="true"

                                      value="{{:DiagnosisDetailsId}}"/>

                            <e-column header-text="Diagnosis Date" 

                                      field="DiagnosisDateDesc"

                                      edit-type="@(EditingType.Datepicker)"

                                      value="{{:DiagnosisDateDesc}}"/>

                            <e-column header-text="Diagnosis Type" 

                                      field="DiagnosisTypeId"  

                                      foreign-key-field="DiagnosisTypeId" 

                                      foreign-key-value="DiagnosisTypeDesc" 

                                      datasource="@ViewBag.cmbDiagnosisType"

                                      value="{{: DiagnosisTypeDesc}}"/>

                            <e-column header-text="Diagnosis Name" 

                                      field="DiagnosisName"

                                      is-primary-key="true" 

                                      value="{{:DiagnosisName}}"

                                      />

                        </e-columns>

While using the InlineFormTemplate, for the text box i' using this line, so it's properly bind from the grid into the field

 <input id="DiagnosisCode" name="DiagnosisCode" value="{{: DiagnosisCode}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable"

                                           style="text-align: right; width: 116px; height: 28px" />

Currently my issues,

1. I can't bind the drop down value and datetime from the grid into the template form

2. Can't display the drop down value into the template form

I try using this code for the drop down

@Html.DropDownListFor(model => model.NaturalId, ViewBag.lNatural as SelectList, "Select", new { @value = "DiagnosisTypeDesc", htmlAttributes = new { @class = "form-control" }, style = "width: 100%;height: 14px;display: block;font-size: 11px;line-height: 1.428571429;color: #555;vertical-align: middle;background-color: #fff;border: 1px solid #ccc;" })

Able to load the drop down but can't bind the grid value into this field.

Appreciate you help.

Thanks

[Venkatesh Ayothi Raman]

Hi Haryzad, 

Thanks for the update. 

We went through your code example that you have shared for us and found that you are defining HTML tag helper in template form instead of this we can define the HTML elements and its will converted as corresponding control in ActionComplete event. 

If we using IinlineForm template then we have rendered the another Syncfusion controls like Dropdown list, Numeric text box in actionComplete event. While using template form, you can change the HTML elements to appropriate JS controls based on the column type. This can be achieved by using action Complete event. 

Please refer to the following online demo and refer to the following Help documentation for actionComplete event,  

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

ActionComplete: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

Help documentation: https://help.syncfusion.com/aspnet-core/grid/editing#edit-modes  

Code example: 

function actionComplete(args) { 

           if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "inlineformtemplate") { 

               //rendered the numeric textbox 

               $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", decimalPlaces: 2 }); 

               //Create a Dropdown control 

               $("#ShipCountry").ejDropDownList({ width: '116px' }); 

               if (args.requestType == "beginedit") { 

                   $("#OrderID").attr("disabled", "disabled"); 

                   //here set the Dropdown value based on selected record 

                   $("#ShipCountry").ejDropDownList("setSelectedValue", args.row.children().eq(3).text()); 

               } 

               $(".e-field").css({ 'width': '116px', 'text-align': 'left' }); 

           } 

       } 

Note: For Dropdown list value , we should assign the value while using template edit form like above code example.  

if we misunderstood your query, then could you please provide more details about that?  

Regards, 

Venkatesh Ayothiraman.