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

Field with Dropdownlist in Grid doesn't show Text but only Value, and how to localize HeaderText

I have the following Grid definition. Everything works fine except for 2 things:
  1. for the column "EntityId" I use a Dropdownlist and when the grid is in read mode the Id (Value) is displayed instead of the Name (Text). In Edit mode it works fine. See first 2 attached screenshots. I have tried removing the defaultValue and foreignKey properties but that doesn't make a difference.
  2. I want to localize the HeaderText of the columns. When I use @Localizer["Type"] the text Microsoft.AspNetCore.Mvc.Localization.LocalizedHtmlString is shown. See 3rd attached screenshot. Using @Localizer works fine for everything else in Views (see green marking at bottom of screenshot). Any idea? I have tried a number of variations but same result:
  3. headerText="@Localizer["Type"]"
  4. headerText=@Localizer["Type"]
  5. headerText=@Localizer["'Type'"]

This is my Grid definition:

@{
    var attributeTypes = ViewData["attributeTypes"];
    var entityLookupDM = new Syncfusion.EJ2.DataManager { Url = "LibMan/EntityLookupDatasource", Adaptor = "UrlAdaptor" };
    var entityLookupDDL = new Syncfusion.EJ2.DropDowns.DropDownList()
    {
        DataSource = entityLookupDM,
        Query = "new ej.data.Query().addParams('CatalogGuid', '" + @ViewData["catalogGuid"] + "')",
        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Id", Text = "Name" },
        AllowFiltering = true
    };
}

<div style="height:calc(100% - 206px)">
    <ejs-grid id="attributeGrid" load="loadCustomAdaptor" actionComplete="actionComplete"
              toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel", "ExcelExport" })" toolbarClick="toolbarClick"
              allowExcelExport="true" allowPaging="true" allowSelection="true" allowSorting="true" allowFiltering="true" allowMultiSorting="false" allowResizing="true" showColumnMenu="true"
              query="new ej.data.Query().addParams('CatalogGuid', '@ViewData["catalogGuid"]').addParams('EntityGuid', '@ViewData["entityGuid"]')" width="100%" height="100%">
        <e-data-manager url="/LibMan/AttributeDatasource" adaptor="UrlAdaptor" insertUrl="/LibMan/AttributeInsert" updateUrl="/LibMan/AttributeUpdate" removeUrl="/LibMan/AttributeDelete"></e-data-manager>
        <e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Normal" allowEditOnDblClick="true" showConfirmDialog="true" showDeleteConfirmDialog="true"></e-grid-editSettings>
        <e-grid-pagesettings pageCount="5" pageSize="50" pageSizes="@(new string[] { "15", "25", "50", "100", "All" })"></e-grid-pagesettings>
        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
        <e-grid-columns>
            <e-grid-column field="Id" isPrimaryKey="true" defaultValue="00000000-0000-0000-0000-000000000000" visible="false" showInColumnChooser="false"></e-grid-column>
            <e-grid-column field="MdxCatalogGuid" defaultValue="@ViewData["catalogGuid"]" visible="false" showInColumnChooser="false"></e-grid-column>
            <e-grid-column field="MdxEntityGuid" defaultValue="@ViewData["entityGuid"]" visible="false" showInColumnChooser="false"></e-grid-column>
            <e-grid-column field="Name" headerText="@Localizer["Name"]" width="150" minWidth="8" clipMode="EllipsisWithTooltip" validationRules="@(new { required=true })"></e-grid-column>
            <e-grid-column field="MdxAttributeType" headerText="@Localizer["Type"]" width="100" minWidth="8" clipMode="EllipsisWithTooltip" validationRules="@(new { required=true })"
                           editType="dropdownedit" edit="@(new { @params = new Syncfusion.EJ2.DropDowns.DropDownList() { Select = "attributeTypeSelected" }})" foreignKeyField="Key" foreignKeyValue="Value" dataSource="attributeTypes"></e-grid-column>
            <e-grid-column field="IsMandatory" width="100" minWidth="8" clipMode="EllipsisWithTooltip" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
            <e-grid-column field="RequiresValidation" width="100" minWidth="8" clipMode="EllipsisWithTooltip" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
            <e-grid-column field="TextLength" width="100" minWidth="8" clipMode="EllipsisWithTooltip" defaultValue="0" format="N0" validationRules="@(new { required=false, min=0 })"></e-grid-column>
            <e-grid-column field="NumberDecimals" width="100" minWidth="8" clipMode="EllipsisWithTooltip" textAlign="Right" defaultValue="0" format="N0" validationRules="@(new { required=false})"></e-grid-column>
            <e-grid-column field="DateTimeFormat" width="100" minWidth="8" clipMode="EllipsisWithTooltip" textAlign="Right" validationRules="@(new { required=false})"></e-grid-column>
            <e-grid-column field="EntityId" headerText="Lookup from" width="125" minWidth="8" clipMode="EllipsisWithTooltip" defaultValue="00000000-0000-0000-0000-000000000000" validationRules="@(new { required=false})"
                           editType="dropdownedit" edit="new {@params = entityLookupDDL }" foreignKeyField="Id" foreignKeyValue="Name"></e-grid-column>
            <e-grid-column field="LookupFilter" width="125" minWidth="8" clipMode="EllipsisWithTooltip" validationRules="@(new { required=false})"></e-grid-column>
            <e-grid-column field="ChangeTrackingEnabled" width="100" minWidth="8" clipMode="EllipsisWithTooltip" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
            <e-grid-column field="ChangeTrackingGroup" width="100" minWidth="8" clipMode="EllipsisWithTooltip" textAlign="Right" format="N0"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
    <ejs-scripts></ejs-scripts>
</div>
<div><span>Locale: @Localizer["Type"]</span></div>


Thanks
Ronald

Attachment: 019_Dropdown_displays_Id_3f6ae47.zip

26 Replies

MS Madhu Sudhanan P Syncfusion Team January 16, 2019 09:18 AM UTC

Hi Ronald, 

Thanks for contacting Syncfusion support. 

Query: For the column "EntityId" I use a Dropdownlist and when the grid is in read mode the Id (Value) is displayed instead of the Name (Text). In Edit mode it works fine. See first 2 attached screenshots. I have tried removing the defaultValue and foreignKey properties but that doesn't make a difference. 

We suggest you to use the Foreign key column feature to achieve your requirement. When setting foreign key column there is no need to customize the dropdownlist editor separately, it will be handled in-built. For setting the foreign key column, we need to specify the foreignKeyField, foreignKeyValue and dataSource property. 

Please go through the below documentation for using foreign key column in your grid. 

In the above documentation FirstName is the foreign key column which showed as the result of comparing EmployeeID from the foreign data source.  


In your code example we can see that DataSource is not provided at the column level hence the mapping is not happened. Please go through the above link to enable foreign key column in grid. 

Query: I want to localize the HeaderText of the columns. When I use @Localizer["Type"] the textMicrosoft.AspNetCore.Mvc.Localization.LocalizedHtmlString is shown. 

Please modify the sample code to get the locale string value from the Localizer as follow to resolve this problem. 


<e-grid-column field="Name" headerText="@Localizer["Name"].Value" width="150" minWidth="8" clipMode="EllipsisWithTooltip" validationRules="@(new { required=true })"></e-grid-column> 



Regards, 
Madhu Sudhanan P 



RD Ronald Dirkx January 16, 2019 01:10 PM UTC

Hi Madhu,

thanks for the reply.

Query 1
I used the edit property so that I can define additional parameters in the query used by the dropdownlist, see below:

@{
    var attributeTypes = ViewData["attributeTypes"];
    var entityLookupDM = new Syncfusion.EJ2.DataManager { Url = "LibMan/EntityLookupDatasource", Adaptor = "UrlAdaptor" };
    var entityLookupDDL = new Syncfusion.EJ2.DropDowns.DropDownList()
    {
        DataSource = entityLookupDM,        
        Query = "new ej.data.Query().addParams('CatalogGuid', '" + @ViewData["catalogGuid"] + "')",
        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Id", Text = "Name" },
        AllowFiltering = true
    };
}

How can I achieve this if I use only dataSource and the foreignKey fields?


Query 2
Works perfectly, thanks.

Ronald


MS Madhu Sudhanan P Syncfusion Team January 17, 2019 05:39 AM UTC

Hi Ronald, 
 
Thanks for the update. 
 
You can still use the edit params to customise the dropdownlist whereas the data source and mapping works will be handled in-built. In your case the dropdown params will be changed as follows. 
 
 
var entityLookupDDL = new Syncfusion.EJ2.DropDowns.DropDownList() { 
    Query = "new ej.data.Query().addParams('CatalogGuid', '" + @ViewData["catalogGuid"] + "')", 
    AllowFiltering = true 
};  
 
 
Removed the data source and fields as the mapping is handled by the grid itself. 
 
Regards, 
Madhu Sudhanan P 



RD Ronald Dirkx January 17, 2019 02:01 PM UTC

Hi Madhu

I modified my code as per your suggestion but encounter another issue.
My controller method cannot return the correct data as the additional parameter which I add using Query is not added (correctly). Using debug I can see it has a null value.

This is an extract from my modified View:

@{
    var entityLookupDM = new Syncfusion.EJ2.DataManager { Url = "LibMan/EntityLookupDatasource", Adaptor = "UrlAdaptor" };
    var entityLookupDDL = new Syncfusion.EJ2.DropDowns.DropDownList()
    {
        Query = "new ej.data.Query().addParams('CatalogGuid', '" + @ViewData["catalogGuid"] + "')",
        AllowFiltering = true
    };
}

<e-grid-column field="EntityId" headerText="@Localizer["Lookup from"].Value" width="125" minWidth="8" clipMode="EllipsisWithTooltip" defaultValue="00000000-0000-0000-0000-000000000000" validationRules="@(new { required=false})" editType="dropdownedit" edit="new {@params = entityLookupDDL }" dataSource="entityLookupDM" foreignKeyField="Id" foreignKeyValue="Name"></e-grid-column>


Extract from my Controller:

public async Task<IActionResult> EntityLookupDatasource([FromBody]ExtDataManagerRequest dmr)
        {
            MdsMetaData mdsMeta = new MdsMetaData(mdsProxy, _cache);
            List<MdxEntity> entities = await mdsMeta.GetEntityListByModelAsync(dmr.CatalogGuid);  // dmr.CatalogGuid is null


Thanks
Ronald



MS Madhu Sudhanan P Syncfusion Team January 18, 2019 04:56 AM UTC

Hi Ronald, 

Could you please share the screenshot of the network tab to check the request parameter posted by DropDownList to analyze further at our end. 

Regards, 
Madhu Sudhanan P   



RD Ronald Dirkx January 18, 2019 12:31 PM UTC

Hi Madhu,

please find attached the requested screenshots (_01 and _02). They don't show the Query parameters. I have added a third screenshot (_03) from another DataManager request where the parameters are passed correctly.

Ronald

Attachment: 022_NoParamsPassedbyDropdownQuery_f8ec2f62.zip


RN Rahul Narayanasamy Syncfusion Team January 21, 2019 01:14 PM UTC

Hi Ronald, 
 
We have validated the query with the provided screenshots and we have prepared a sample based on your requirement. Here, we have send additional parameters while editing dropdown column. Please find the below code example and sample for your reference. 
 
[code example] 
 
@{ 
    var entityLookupDM = new Syncfusion.EJ2.DataManager { Url = "Home/DropDatasource", Adaptor = "UrlAdaptor" }; 
    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() 
    { 
        Query = "new ej.data.Query().addParams('ej2-grid','true')", 
        AllowFiltering = true 
    }; 
} 
 
<div> 
    <ejs-grid id="Grid" allowPaging="true" allowSorting="true" allowFiltering="true" height="273" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
        <e-data-manager url="/Home/GridDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal" showConfirmDialog="true" showDeleteConfirmDialog="true"></e-grid-editSettings> 
        <e-grid-pagesettings pageSize="7"></e-grid-pagesettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 
            <e-grid-column field="ShipID" headerText="ShipCity" editType="dropdownedit" foreignKeyField="ShipID" foreignKeyValue="ShipCity" dataSource="entityLookupDM" edit="new {@params = DropDownList }" width="120"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
 
If you still face the same problem, please share the below details. It will be helpful to provide a better solution as early as possible. 
 
  • How do you pass parameters to controller? (both view and controller)
  • Share Essential studio 2 Package version details.
 
Regards, 
Rahul Narayanasamy. 



RD Ronald Dirkx January 23, 2019 10:19 AM UTC

Hi Rahul,

Your example is exactly the code I have been trying as per your previous suggestion. It fails to pass the additional parameter, please see attached screenschots _01, _02 and _03.

If I remove the datasource property from the field definition and add it back to the definition of the dropdownlist then the additional parameter is passed correctly (but I don't see the correct text when the grid is not in Edit mode which is the original request of this ticket), see attached screenshots _04, _05, _06 and _07

Besides the screenshots I have also added the Controller (024_LibManController.cs). The parameter ViewData["catalogGuid"] is passed from the Controller to the View in the method LoadMemberAttributeGridPartial which loads the View containing the grid as a Partial View.

You will also find 2 copies of the Partial View: 024_MemberAttributeGridPartial_OK.cshtml and 024_MemberAttributeGridPartial_NOT OK.cshtml. In the _OK version I have the datasource and fields defined in the definition of the dropdownlist and in the _NOT OK version the datasource is defined using the datasource property of the field.

I am always referring to <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" both for Development and non-Development environments (see screenshot _08).
The installed Nuget package of EJ2 is 16.3.0.29 (see screenshot _09)

regards
Ronald

Attachment: 024_NoParamsPassedbyDropdownQuery_692cf2ae.zip


MS Madhu Sudhanan P Syncfusion Team January 24, 2019 09:30 AM UTC

Hi Ronald, 
 
Query: Your example is exactly the code I have been trying as per your previous suggestion. It fails to pass the additional parameter, please see attached screenschots. 
 
We have validated your query and checked the reported problem at our end. It works fine. Please find the below sample and screenshot for your reference. 
 
 
[Screenshot] 
 
 
 
Could you please use the above sample as reference to check the problem in your application. 
 
Please get back to us for further assistance. 
 
Regards, 
Madhu Sudhanan P 



RD Ronald Dirkx January 24, 2019 11:19 AM UTC

Hi Madhu,

a strange situation. When I run your sample I get the exact same issue!! The additional parameter is Null (see attached screenshot).

As a next step in testing I made the following changes to your sample:
  1. Added DataSource property to definition of DropDownList variable
  2. Added Fields property to definition of DropDownList variable
  3. Removed datasource property from field definition
and then the value of the additional parameter is passed correct.

I experience the issue with both Chrome and Edge, I tried clearing the cache of the browser but that doesn't make a difference.

regards
Ronald

Attachment: 025_NoParamsPassedbyDropdownQuery_c3401b48.zip


MS Madhu Sudhanan P Syncfusion Team January 25, 2019 12:28 PM UTC

Hi Ronald, 
 
Query: a strange situation. When I run your sample I get the exact same issue!! The additional parameter is Null 
 
We have validated your query and checked the reported problem at our end. It works fine. We have checked your reported problem in the following scenarios. 
 
  • While editing dropdown column.
  • When searching fields in dropdown list column.
 
In both cases, the parameter is passed correctly to the controller. Please find the below screenshots for your reference. 
 
[screenshot] [while start editing dropdown column] 
 
 
[screenshot] [while performing filtering in dropdown column values] 
 
 
Could you please share the below details, it will be helpful to analyze the reported problem further. 
 
  • Share the replication procedure for the reported problem.
  • Share the console(network tab) window to check the request and responses.
 
Regards, 
Madhu Sudhanan P 



RD Ronald Dirkx February 7, 2019 03:37 PM UTC

Hi,

I have found the reason for the issue.
The Dropdownlist's datasource is executed by 2 different events:
  1. when data is loaded to populate the grid the datasource is executed with a Where-clause containing a DISTINCT list of all values which occur in the rows. The Additional Parameters of the Query are NOT passed with the request which is the issue I faced
  2. when an Edit action is started on the Dropdownlist the datasource is executed to get the list of all values for the Dropdownlist. This time the Additional Parameters of the Query are passed with the request as expected.
I have implemented a workaround for the first event where the parameters are not passed but this means I cannot apply a valuable filter for the backend database so the query returns all values from the database table instead of the relevant subset.

Is there really no way that I can get the additional parameter(s) in the first event because my current solution is not good from a performance point of view? Is it possible to define the additional parameter(s) for the dataSource (DataManager object) itself?

regards
Ronald


MS Madhu Sudhanan P Syncfusion Team February 8, 2019 12:19 PM UTC

Hi Ronald, 

Thanks for the update. 

We are able to reproduce the reported problem and logged “Need to add column level query property for foreign key column” as bug. The fix for this bug will be available in our February 27, 2019 patch release. Until then we suggest you to use the workaround to resolve this problem.  

You can track the status of the bug using the below feedback link. 


Regards, 
Madhu Sudhanan P 



RD Ronald Dirkx February 11, 2019 01:31 PM UTC

Thanks, that will be very helpful.
Do I need to follow the Feedback ticket or do I get an update when the bug fix is available?

Thanks
Ronald


MS Madhu Sudhanan P Syncfusion Team February 12, 2019 06:08 AM UTC

Hi Ronald, 

Thanks for the update. 

Please track the feedback report for the status of the bug and we will also update you once the fix is available. 

Regards, 
Madhu Sudhanan P 



MS Madhu Sudhanan P Syncfusion Team March 1, 2019 09:34 AM UTC

Hi Ronald, 

Due to difficulty in providing this support, we have postponed “Need to add column level query property for foreign key column” to Volume 1, 2019 release which is expected to rolled out by the mid of March. Until then we appreciate your patience. 

Regards, 
Madhu Sudhanan P 



HJ Hariharan J V Syncfusion Team April 10, 2019 09:16 AM UTC

Hi Ronald, 
 
Thanks for your patience. 
We are glad to announce that our Essential JavaScript 2 patch release (17.1.40) has been rolled out successfully and in that release, we have added the fix for an issue “Need to add column level query property for foreign key column”. 
  
Regards, 
Hariharan 



RD Ronald Dirkx April 14, 2019 02:08 PM UTC

Hi Hariharan

I have tested this and can confirm that the bug is fixed: additional parameters are correctly sent when loading the grid.

I have one other question regarding the Dropdownlist. I have enabled filtering on the Dropdownlist but when the user types text in the filterbar the filter is passed to the server with "startswith" condition. the users want this to be the "contains" condition.
I can see 2 options:
  1. can I send the "contains" condition to the server?
  2. can I use JS on client using Filtering event (overriding the DataManager)?

Do you have a solution for this (or maybe a better solution than the 2 options I listed above?)

thanks
Ronald


HJ Hariharan J V Syncfusion Team April 15, 2019 12:33 PM UTC

Hi Ronald, 
 
Query: I have one other question regarding the Dropdownlist. I have enabled filtering on the Dropdownlist but when the user types text in the filterbar the filter is passed to the server with "startswith" condition. the users want this to be the "contains" condition. 
 
We have validated your query and created sample based on your requirement. Here, we have created a sample with filtering with contains operator in the dropdown editing(EmployeeID column). Please find the below code example and sample for your reference. 

@{  
    var dropdownlist = new Syncfusion.EJ2.DropDowns.DropDownList() { AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "EmployeeID", Text = "Name" }, Filtering = "onFiltering" }; 
} 
<div> 
    <div id="modalDialog"></div> 
        <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowResizing="true" allowPaging="true" allowSorting="true" toolbar="@(new List<string>() {"Nuovo","Add", "Edit", "Delete", "Cancel", "Update"})" 
                  > 
            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
            <e-grid-columns> 
                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column> 
                <e-grid-column field="EmployeeID" foreignKeyField="EmployeeID" foreignKeyValue="Name" dataSource="@(new Syncfusion.EJ2.DataManager() { Url = "Home/GetForeignKetData", Adaptor="UrlAdaptor" })" headerText="Employee ID" editType="dropdownedit" edit="@(new {@params=dropdownlist })" width="120"></e-grid-column> 
                <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column> 
                <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column> 
                <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column> 
            </e-grid-columns> 
        </ejs-grid> 
    </div> 
 
    <script> 
        function onFiltering(e) {             
        var query = new ej.data.Query().select(['Name', 'EmployeeID']); 
        query = (e.text !== '') ? query.where('Name', 'contains', e.text, true) : query; // The query based on search string with filter type 
            e.updateData(this.dataSource, query); // pass the filter data source, filter query to updateData method 
        } 
    </script> 
public IActionResult GetForeignKetData([FromBody]Data dm) { 
            var val = Customer.GetDropData().ToList(); 
            var Data = val.ToList(); 
            var count = val.Count(); 
            if (dm.where != null && dm.where[0].Operator !=null) 
            { 
                string querystring = dm.@where[0].value.ToString(); 
                // Here, Handle the contains query on the foreignKey data source 
                Data = (from cust in Data 
                        where cust.Name.ToLower().Contains(querystring) 
                        select cust).ToList(); 
            } 
            if (dm.take != 0) 
                Data = Data.Take(dm.take).ToList(); 
            return Json(Data); 
        } 
 
 

Please get back to us if you need further assistance. 

Regards, 
Hariharan 



RD Ronald Dirkx April 17, 2019 10:20 AM UTC

Hi Hariharan

thanks, I solved it slightly different but the example surely helped.

One last remark about behaviour of the Dropdownlist with UrlAdaptor: I noticed with the VS Debugger and with the Chrome Devtools that the Datasource (Controller's method) is executed twice (with the same values for the DataManagerRequest) when the data is loaded in the grid. This happens only with the initial load of the grid, not when you change page or change the page size for example.
Is this by design? Because from a performance point of view this is an unnecessary call to the database.

**EDIT**
I just noticed that the Grid's datasource (UrlAdaptor) is executed twice as well during the initial load. Maybe this is the reason that the Dropdownlist's datasource is executed twice? Why is the Grid's datasource executed twice? Can this be caused by the fact that I have a Custom Adaptor defined in my View? (see script below). The function is called from the Grid's load event: 


Thanks for checking.

Ronald


RD Ronald Dirkx April 17, 2019 10:28 AM UTC

The Edit function on a forum post isn't working very well so I added a new reply.
Please read my previous reply first!!

This just shows the function of my custom adaptor which I mentioned in my previous reply. I also want to add that besides a custom adaptor I also have a child grid defined in the grid.

<ejs-grid id="columnGrid" load="loadCustomAdaptor"  … >

<script>
    function loadCustomAdaptor(args) {
        @* 1. assign Custom Datasource adaptor to grid to send additional parameters with database update actions *@
        this.dataSource.adaptor = customAdaptor;
        @* 2. load ML Captions in child grid *@
        this.childGrid = {
            dataSource: new ej.data.DataManager({
                url: "/LibMan/MLCaptionsDatasource",
                adaptor: new ej.data.UrlAdaptor(),
                insertUrl: "/LibMan/MLCaptionInsert",
                updateUrl: "/LibMan/MLCaptionUpdate",
                removeUrl: "/LibMan/MLCaptionDelete",
                crossDomain: true
            }),
            queryString: 'Id',
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
            columns: [
                { field: 'Id', headerText: 'Id', visible: false, isPrimaryKey: true },
                { field: 'MdxColumnId', headerText: 'MdxColumnId', visible: false },
                { field: 'Culture', headerText: '@Localizer["Culture"]', width: 120 },
                { field: 'Caption', headerText: '@Localizer["Caption"]', width: 180 }
            ],
            actionBegin(args) {
                if (args.requestType === 'add') {
                    @* get the parentID value and assign it to the equivalent field in the child grid *@
                    args.data.MdxColumnId = this.parentDetails.parentKeyFieldValue;
                }
            }
        };
    }
    window.customAdaptor = new ej.data.UrlAdaptor(); @* extend url adaptor *@
    customAdaptor = ej.base.extend(customAdaptor, {
        processResponse: function (data, ds, query, xhr, request, changes) {
            request.data = JSON.stringify(data);
            return ej.data.UrlAdaptor.prototype.processResponse.call(this, data, ds, query, xhr, request, changes);
        },
        insert: function (dm, data, tableName) {
            return {
                url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,
                data: JSON.stringify({
                    @* sends the params when inserting a record *@
                    params: { libraryId: '@ViewData["libraryId"]', entityId: '@ViewData["entityId"]' },
                    value: data,
                    table: tableName,
                    action: 'insert'
                }),
            }
        },
        update: function (dm, keyField, value, tableName) {
            return {
                type: 'POST',
                url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,
                data: JSON.stringify({
                    @* sends the params when updating a record *@
                    params: { 'libraryId': '@ViewData["libraryId"]', 'entityId': '@ViewData["entityId"]' },
                    value: value,
                    action: 'update',
                    keyColumn: keyField,
                    key: value[keyField],
                    table: tableName
                })
            };
        },
        remove: function (dm, keyField, value, tableName) {
            return {
                type: 'POST',
                url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,
                data: JSON.stringify({
                    @* sends the params when deleting a record *@
                    params: { 'libraryId': '@ViewData["libraryId"]', 'entityId': '@ViewData["entityId"]' },
                    key: value,
                    keyColumn: keyField,
                    table: tableName,
                    action: 'remove'
                })
            };
        }
    });
</script>

thanks
Ronald


HJ Hariharan J V Syncfusion Team April 24, 2019 04:51 PM UTC

Hi Ronald, 
 
We have validated your query and by default, one request will be sent to controller side when using URL adaptor. If you are using foreign key column also, then there will be two request are sent to controller side. If you have provided dropdown datasource as external remote data, then it also sent a request to controller side. 
 
Could you please provide the below details, it will be helpful to provide a better solution. 
 
  • Share full grid code example.
  • Share video demonstration of the reported problem.
 
Regards, 
Hariharan 



RD Ronald Dirkx May 3, 2019 02:02 PM UTC

Hi Hariharan

I'll provide the requested documentation next week

regards
Ronald


HJ Hariharan J V Syncfusion Team May 6, 2019 04:03 PM UTC

Hi Ronald,

Thanks for your update.

We will be wait to hear from you.

Regards,
Hariharan


RD Ronald Dirkx June 4, 2019 09:43 AM UTC

Hi Hariharan

reading your previous reply again I think it is clear. I have a grid with URL adaptor, foreign keys and dropdowns with URL adaptor so that explains why I have multiple calls to the server by design.
For me this is solved.

thanks again
Ronald


MS Manivel Sellamuthu Syncfusion Team June 5, 2019 05:25 AM UTC

Hi Ronald, 

Thanks for your update.   
   
We are happy to hear that your problem has been resolved.  

Please contact us if you need any further assistance. As always, we will be happy to assist you.    
   
Regards,  
Manivel 


Loader.
Live Chat Icon For mobile
Up arrow icon