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
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Problem with grid in template form

Problem with grid in template form

Hi,

I've a kanban board, but I need a complex form edit. I need show common properties and a grid with subactivities. For this, I show common data in tab control. The common data works fine, but I have a problem with grid foreign key. I need pass a parameter in column's datamanager, but I get an error.

My grid:

 var dmProyectoSubactivities= ej.DataManager({
                    url: baseUrl + "Kanban/GetProjectSubactivities",
                    adaptor: new ej.UrlAdaptor(),
                });

                var queryProyectoSubactivity = new ej.Query().addParams("IdProjectActivity", 1);

                var dmSubactivities = ej.DataManager({
                    url: baseUrl + "Kanban/GetSubactivities",
                    adaptor: new ej.UrlAdaptor(),
                });
                var querySubActivity = new ej.Query().addParams("IdActivity", 1);

                $("#gridSubtactividades").ejGrid({
                    dataSource: dmProyectoSubactivities,
                    query: queryProyectoSubactivity,
                    locale: "es-ES",
                    isResponsive: true,
                    allowPaging: true,
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
                    toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
                    columns: [
                        { field: "ID", visible: false, isPrimaryKey: true },
                        { field: "IdSubactivity", headerText: "Subactivity", foreignKeyField: "ID", foreignKeyValue: "Name", dataSource: dmSubactivities, query: querySubActivity},
                        { field: "Date", format: "{0:dd/MM/yyyy}" },
                        { field: "Weeks"},
                        { field: "Finished"},
                    ]
                });

The field IdSubactivity is my problem! if I comment this line it works fine

Also, the grid visualization when it is inside a dialog form and tab is not correct. The column's caption is not correct, and the toolbar items are separated.




I attach an example

Thanks!

Attachment: SyncfusionMvcApplication6_6cb4a579.zip

3 Replies
MS Mani Sankar Durai Syncfusion Team July 4, 2017 12:32 PM UTC

Hi Manolo, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we are able to reproduce the reported issue. We found that you have used addParams for the column which does not have query as the property of columns in grid. Also we found that you are passing one additional data to server side to filter the data based on that. So instead of using addParams for the columns we suggest you to use headers for the column data source to pass the additional data to the server side using load event in grid. 
Refer the code example 
      var dmProyectoSubactivities= ej.DataManager({ 
                    url: baseUrl + "Kanban/GetProjectSubactivities", 
                    adaptor: new ej.UrlAdaptor(), 
                }); 
             var queryProyectoSubactivity = new ej.Query().addParams("IdProjectActivity", 1); 
            var dmSubactivities = ej.DataManager({ 
                    url: baseUrl + "Kanban/GetSubactivities", 
                    adaptor: new ej.UrlAdaptor(), 
                }); 
             
                $("#gridSubtactividades").ejGrid({ 
                    dataSource: dmProyectoSubactivities, 
                    query: queryProyectoSubactivity, 
... 
                    columns: [ 
                       
                        { field: "IdSubactivity", headerText: "Subactivity", foreignKeyField: "ID", foreignKeyValue: "Name", dataSource: dmSubactivities}, 
... 
                    ], 
                    load:"onLoad" 
                }); 
            } 
        } 
<script type="text/javascript"> 
 
    function onLoad(args) { 
        var len = this.model.columns.length; 
        for (var i = 0; i < len; i++) { 
            if (this.model.columns[i].field == "IdSubactivity") { 
                var IdActivity = 1; 
                 this.model.columns[i].dataSource.dataSource.headers = [{ data: IdActivity }]   //pass the additional parameter using headers only for columns. 
            }  
        } 
    } 
</script> 
 
[controller.cs] 
public JsonResult GetSubactivities(Syncfusion.JavaScript.DataManager dm) 
        { 
            var param = System.Web.HttpContext.Current.Request.Headers["data"]; 
//we will get the additional data here 
            ... 
        } 
 

From the above code example instead of using addParams for the columns in grid we have used headers to pass the additional value to server side. 
Also we found another issue when using dataSource as URLAdaptor for the columns. The cause of the issue is that you have returned the data to the client as object (result and count) while using the UrlAdaptor for the columns but the foreignkey column accepts dataSource as JSON array formatted data.  
So, we suggest you to use the customAdaptor feature for the column’s dataSource which is extending the processResponse method of UrlAdaptor. In the processResponse method, we have formatted that returned object as JSON data and return to the Grid control. Please refer to the below code example and online document links.  
               $("#gridSubtactividades").ejGrid({ 
                    dataSource: dmProyectoSubactivities, 
                    query: queryProyectoSubactivity, 
                    ... 
                    columns: [ 
... 
                        { field: "IdSubactivity", headerText: "Subactivity", foreignKeyField: "ID", foreignKeyValue: "Name", dataSource: dmSubactivities}, 
                        ... 
                    ], 
                    load:"onLoad" 
                }); 
            } 
        } 
 
</script> 
<script type="text/javascript"> 
  function onLoad(args) { 
        var len = this.model.columns.length; 
        for (var i = 0; i < len; i++) { 
            if (this.model.columns[i].field == "IdSubactivity") { 
                var IdActivity = 1; 
                 this.model.columns[i].dataSource.adaptor = new customAdaptor(); //define the custom adaptor in load event 
                 this.model.columns[1].dataSource.dataSource.headers = [{ data: IdActivity }] 
            } 
        } 
    } 
    var customAdaptor = new ej.UrlAdaptor().extend({ 
        processResponse: function (data, ds, query, xhr, request, changes) { 
            return data.result; 
        }, 
    }); 
 
</script> 
 
[controller.cs] 
public JsonResult GetSubactivities(Syncfusion.JavaScript.DataManager dm) 
        { 
            var param = System.Web.HttpContext.Current.Request.Headers["data"]; 
            DataOperations ds = new DataOperations(); 
            IEnumerable datos = GetSubactivities().Where(x => x.IdActivity == Convert.ToInt16(param)).ToList(); 
            ... 
            result.result = datos; 
            result.count = datos.AsQueryable().Count(); 
            return Json(result, JsonRequestBehavior.AllowGet); 
        } 


Refer the screenshot below  
 

We have also prepared a sample that can be downloaded from the below link. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


MA Manolo July 4, 2017 05:17 PM UTC

Hi again,

I already got pass parameter in headers, but now, when I need edit for add new item , the dropdown is empty


Also, the grid has a different style, why? How can I set the usual style?

Thanks!


MS Mani Sankar Durai Syncfusion Team July 5, 2017 12:15 PM UTC

Hi Manolo, 

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.   
 
Regards,   
Manisankar Durai 


Loader.
Live Chat Icon For mobile
Up arrow icon