1. Home
  2. Forum
  3. ASP.NET Core
  4. External Form Questions

External Form Questions

Hi,

I have a couple of questions about external forms on grids.

1)  I set up a field to be a text area control (using edit template).  It renders in the grid properly and I can update the data.  However, if I put the cursor in the text area field and press the enter button it invokes the save.  I would like to be able to press enter and type a new line in the text area control.  Ideally, if a different control had focus pressing enter would still invoke save.
2) It is possible to customize the external form a little bit without using a template?  Instead of saying "Details of 12" (or whatever the id is) I would like to say something else.  Also, it would be nice to change the field headings.  I don't want to use a template to change the external form because I have several drop lists (Foreign key fields) on it and I don't want to hard code the list (or get the datasource some other way since I've already done that work).

Thanks,
Chris

9 Replies
KM Kuralarasan Muthusamy Syncfusion Team March 29, 2018 01:28 PM UTC

Hi Chris, 
 
Thanks for contacting Syncfusion support. 
 
Query #1: I set up a field to be a text area control (using edit template).  It renders in the grid properly and I can update the data.  However, if I put the cursor in the text area field and press the enter button it invokes the save.  I would like to be able to press enter and type a new line in the text area control.  Ideally, if a different control had focus pressing enter would still invoke save. 
 
We have analyzed this query and we suggest you to allow-keyboard-navigation member of Grid as false to achieve your requirement. And we have prepared the sample with your requirement. 
 
Please refer the following code example: 
 
<ej-grid id="FlatGrid" allow-paging="true" allow-keyboard-navigation="false"> 
 
     ... 
 
</ej-grid> 

Please refer the following link to know about allow-keyboard-navigation : 
 
 
Query 2: It is possible to customize the external form a little bit without using a template?  Instead of saying "Details of 12" (or whatever the id is) I would like to say something else.  Also, it would be nice to change the field headings.  I don't want to use a template to change the external form because I have several drop lists (Foreign key fields) on it and I don't want to hard code the list (or get the datasource some other way since I've already done that work). 
 
We have analyzed your query and we have suggest you to grid localization and title-column member of the Grid to achieve your requirement. We have prepared the sample with your requirement. 
 
Please refer the following code example: 
 
<ej-grid id="FlatGrid" allow-paging="true" locale="de-DE"> 
     
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.ExternalForm)" title-column="CustomerID"></e-edit-settings> 
 
          ...... 
     
</ej-grid> 
 
 
<script> 
    $(document).ready(function () { 
 
        ej.Grid.Locale["de-DE"] = { 
 
            EditFormTitle: "Enter your text Here " 
 
        }; 
    });  
 
</script> 


Please refer the following link for sample: 
 
 
Please refer the following link to know about localization: 
 
 
Please refer the following link to know about title-column: 
 
 
We have analyzed your query and we have already and We have already discussed your requirement in Syncfusion knowledge base document. Please refer the following link to kb: 
 
 
If you need further assistance please get back to us, 
 
Regards, 
Kuralarasan M. 
 


CH Chris March 29, 2018 04:02 PM UTC

Hi,

Thanks for your help so far. 

I set title-column="FileId", it is a foreign key field.  When I edit a row it says something like "Details of 161003".  Lets say in my table 161003 = "ABC".  What would I need to do to make the title say "Details of ABC"?

I looked at the knowledge base article and thought I could do a variation on it, but the example is for Dialog entry, not External Form.

How would you change the following line for External Form?

$("#"+this._id+"_dialogEdit").ejDialog({ title: "Customize Edit form title" });

I think it would be something like

$("#"+this._id+"_externalEdit").??({ title: "Customize Edit form title" });

I don't know what to replace "??" with.

Thanks,
Chris

MP Manivannan Padmanaban Syncfusion Team March 30, 2018 03:17 PM UTC

Hi Chris, 
  
Before we proceed  we would like to know the following details, 
1. Are you need to display the foreign key column value  in the external edit form  or you want to customize the title for external edit form. 
  
Provided detail help us to achieve your query as early as possible 
  
Regards, 
Manivannan Padmanaban 


CH Chris April 3, 2018 03:08 PM UTC

Hi,

Sorry it took me so long to reply.  I took a few days off.

I would like to display the Foreign Key value in the form title.  So instead of displaying "Details of 161003" it would say "Details of ABC".

If we cannot do that, option B would be to customize the title.  Sorry for the confusion.

Chris

KM Kuralarasan Muthusamy Syncfusion Team April 4, 2018 11:43 AM UTC

Hi Chris, 

We have analyzed your query and we suggest you action-complete event of the Grid and ejDataManager to achieve your requirement. We have prepared the sample with your requirement. 

Please refer the following code example: 

<ej-grid id="FlatGrid" allow-paging="true" action-complete="complete"> 
 
 
               ...... 
 
 
                <e-columns> 
 
        <e-column field="EmployeeID" header-text="First Name" foreign-key-field="EmployeeID" foreign-key-value="FirstName" width="75" datasource="@ViewBag.DataSource2"></e-column> 
        
    </e-columns> 
</ej-grid> 
 
 
<script> 
       function complete(args) { 
        if (args.requestType == "beginedit") { 
 
            var data = ej.DataManager(args.model.columns[2].dataSource).executeLocal(new ej.Query().where("EmployeeID", "equal", args.rowData.EmployeeID))[0]; 
 
            $(".e-form-title")[0].innerText = "Details of" + " " + data.FirstName; 
 
        } 
    }</script> 

In this code example, we have taken the Foreign key value from the columns dataSource (i.e args.model.columns[2].dataSource.  

Please refer the following link to sample: 


Please refer the following link to know about action-complete event of ejGrid:  


Please refer the following link to know about executeLocal method of ejDataManager: 


If you need further assistance please get back to us, 

Regards, 
Kuralarasan M. 


CH Chris April 4, 2018 05:27 PM UTC

Hi,

I ended up getting it to work a different way but I would still like to know how to do it using the datasource.  The datasource in this case is an URL Adaptor.  How would you have to change the javascript to get it work with an URL Adaptor?

The foreign key field is a drop down in the external form.  I used the inspector on my browser and found the actual drop down control.  Here is what I ended up with:

function complete(args) {
        if (args.requestType == "beginedit") {
                var objDD = document.getElementById("MyGridIdMyFKFieldId");
                if (objDD) {
                    var curFile = objDD.options[objDD.selectedIndex].text;
                    $(".e-form-title")[0].innerText = curFile;
                }            
        }
    }

Thanks,
Chris

KM Kuralarasan Muthusamy Syncfusion Team April 5, 2018 12:36 PM UTC

Hi Chris, 

We have analyzed your query and We found that you have used url adaptor to provide the dataSource to the foreign key column. So we have prepared the sample with your requirement and this sample we have used action-complete event of the and executeQuery method of the ejDataManager to achieve your requirement. 

Please refer the following code example: 

<ej-grid id="FlatGrid" allow-paging="true" allow-keyboard-navigation="false" action-complete="complete" load="load"> 
 
          ... 
 
</ej-grid> 
 
 
<script> 
    function complete(args) { 
        if (args.requestType == "beginedit") { 
 
            var dataManager = this.model.columns[2].dataSource; 
 
            var query = ej.Query().where("EmployeeID", "equal", args.rowData.EmployeeID); 
 
            var promise = dataManager.executeQuery(query); 
            var data = {}; 
 
            this.element.ejWaitingPopup("show"); 
            promise.done(ej.proxy(function (e) { 
 
                data = e.result[0]; 
                this.element.ejWaitingPopup("hide"); 
                this.element.find(".e-form-title")[0].innerText = "Details of" + " " + data.FirstName; 
 
            }, this)); 
 
        } 
    } 
</script> 

Please refer the following link for sample: 


Please refer the following link to know about action-complete event of the Grid: 


Please refer the following link to know about executeQuery method of the ejDataManager: 


If you need further assistance please get back to us, 

Regards, 
Kuralarasan M. 


CH Chris April 5, 2018 02:37 PM UTC

Hi,

Perfect, that worked great.

Thank You,
Chris

KM Kuralarasan Muthusamy Syncfusion Team April 6, 2018 01:14 PM UTC

Hi Chris, 
We are happy to hear that your problem has been solved.  Please let us know if you need further assistance.  
 
Regards, 
Kuralarasan M. 



Loader.
Up arrow icon