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
  1. Home
  2. Forum
  3. ASP.NET Core
  4. Grid with InlineForm CRUD

Grid with InlineForm CRUD

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>

3 Replies
VA Venkatesh Ayothi Raman Syncfusion Team July 10, 2017 12:49 PM UTC

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, 

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, 


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. 


HA haryzad July 11, 2017 02:12 AM UTC

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








VA Venkatesh Ayothi Raman Syncfusion Team July 12, 2017 06:58 AM UTC

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,  
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. 



Loader.
Up arrow icon