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

Different Datasource for cells in a grid column.

Hi, 

I have this Grid:

                            @(Html.EJ().Grid<SlimHub.Models.WorkLocation>("LocationsGrid")
                          .Datasource(ds => ds.Json((IEnumerable<WorkLocation>)Model.WorkLocations.ToList()).UpdateURL("../NormalLocationUpdate").InsertURL("../NormalLocationInsert").RemoveURL("../NormalLocationDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))
                          .EditSettings(edit =>
                          {
                              edit.AllowAdding().AllowDeleting().AllowEditing();
                          })
                          .Locale("it-IT")
                          .ToolbarSettings(toolbar =>
                          {
                              toolbar.ShowToolbar().ToolbarItems(items =>
                              {
                                  items.AddTool(ToolBarItems.Add);
                                  items.AddTool(ToolBarItems.Edit);
                                  items.AddTool(ToolBarItems.Delete);
                                  items.AddTool(ToolBarItems.Update);
                                  items.AddTool(ToolBarItems.Cancel);
                              });
                          })
                          .AllowResizing()
                          .AllowSorting()
                          .SortSettings(sort => { sort.SortedColumns(col => { col.Field("AreaId").Direction(SortOrder.Ascending).Add(); col.Field("Prog").Direction(SortOrder.Ascending).Add(); }); })
                          .AllowFiltering()
                          .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
                          .AllowGrouping()
                          .GroupSettings(group => { group.GroupedColumns(col => { col.Add("AreaId"); }); })
                          .PageSettings(page => { page.PageSize(20); })
                          .AllowTextWrap(true)
                          .Columns(col =>
                          {
                              col.Field("WorkLocationId").HeaderText("ID Riga Rilevamento Lavoro").HeaderTextAlign(TextAlign.Center).IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(5).Visible(false).Add();
                              col.Field("WorkId").DefaultValue(@Model.WorkId).HeaderText("ID Lavoro").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(5).Visible(false).Add();
                              col.Field("LocationId").HeaderText("Postazione").ForeignKeyField("LocationId").ForeignKeyValue("LocationCode").DataSource((IEnumerable<object>)ViewBag.ContractLocations).HeaderTextAlign(TextAlign.Center).Width(10).Add();
                              //col.Field("LocationId").HeaderText("Attrezzatura").ForeignKeyField("LocationId").ForeignKeyValue("EquipmentDesc").DataSource("../GetLocationsDetails").HeaderTextAlign(TextAlign.Center).Width(10).Add();
                              col.Field("AreaId").HeaderText("Area").ForeignKeyField("AreaId").ForeignKeyValue("AreaDescription").DataSource((IEnumerable<object>)ViewBag.Areas).HeaderTextAlign(TextAlign.Center).Width(10).Add();
                              col.Field("Prog").HeaderText("Num. Post.").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(10).Add();
                              col.Field("UnavailableLocation").HeaderText("Non Rev.").HeaderTextAlign(TextAlign.Center).EditType(EditingType.Boolean).TextAlign(TextAlign.Center).Width(10).Add();
                              //col.Field("LocationTypeCode").HeaderText("Posiz.").ForeignKeyField("LocationTypeCode").ForeignKeyValue("LocationTypeDesc").DataSource((IEnumerable<object>)ViewBag.LocationTypes).HeaderTextAlign(TextAlign.Center).Template("<img style='width: 24px; height: 24px' src='../../images/LocationTypes/{{:LocationTypeCode}}.png' alt='{{:LocationTypeCode}}.png' />").TextAlign(TextAlign.Center).Width(10).Add();
                              col.Field("LocationTypeCode").HeaderText("Tipo").ForeignKeyField("LocationTypeCode").ForeignKeyValue("LocationTypeDesc").DataSource((IEnumerable<object>)ViewBag.LocationTypes).HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(10).Add();
                              col.Field("UsageValueCode").HeaderText("Riscontro").ForeignKeyField("UsageValueCode").ForeignKeyValue("UsageValueDesc").DataSource((IEnumerable<object>)ViewBag.UsageValues).HeaderTextAlign(TextAlign.Center).Template("<img style='width: 24px; height: 24px' src='../../images/UsageValues/{{:UsageValueCode}}.png' alt='{{:UsageValueCode}}.png' />").TextAlign(TextAlign.Center).Width(10).Add();
                              col.Field("IntVal1").HeaderText("Catture").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(10).Add();
                              col.Field("LocationTag").HeaderText("Tag Postazione").HeaderTextAlign(TextAlign.Center).Width(30).Add();
                              col.Field("Annotations").HeaderText("Note").HeaderTextAlign(TextAlign.Center).Width(50).Add();
                          })
                          .ClientSideEvents(eve =>
                          {
                              eve.ActionComplete("complete").ActionBegin("LocationsGridActionBegin").EndEdit("endEdit").EndAdd("endAdd");
                              eve.QueryCellInfo("onQueryCelInfo");
                          })
                            )

PROBLEM 1: I would like to add a column (the first highlightened) with the foreign key that takes value from a controller method. I have defined the following method in the controller but I receive an error.

        [HttpPost]
        public ActionResult GetLocationsDetails(DataManager value)
        {
            List<LocationDataVM> locationsData = new List<LocationDataVM>();
            var locData = db.Locations.ToList();
            foreach (var l in locData)
            {
                var eq = db.Equipments.FirstOrDefault(i => i.EquipmentId == l.LocationEquipmentId);
                var ld = new LocationDataVM();
                ld.LocationId = l.LocationId;
                ld.EquipmentId = (int)l.LocationEquipmentId;
                ld.EquipmentDesc = eq.EquipmentDesc;
                ld.IsCapture = eq.IsCapture;
                locationsData.Add(ld);
            }
            return Json(new { result = locationsData, count = locationsData.Count() }, JsonRequestBehavior.AllowGet);
        }

PROBLEM 2: Suppose in column LocationId I select LOCATION 1. This location has some associated values (for example A,B,C) and in the second highlighted column I must select one of this values. When I select LOCATION 2, the possible values for the UsageValueCode column chenge to (A,B,C,D,E). In other words, the datasource of the column UsageValueCode depends on the choice of LocationId cell. How can I reach this goal? I have tried in some ways but without success...

Thanks

3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team July 17, 2017 11:52 AM UTC

Hi Claudio, 
 
Thanks for contacting Syncfusion support. 
 
Query #1:”I would like to add a column (the first highlightened) with the foreign key that takes value from a controller method. I have defined the following method in the controller but I receive an error. 

We went through your code example that you have shared for us and found that you are returning the response from server side as result and count. Maybe this is the cause of this issue, because we can return the response from server side as result and count only for URL adaptor.  

We have also prepared a sample based on your convenience which can be download from following link, 


In this sample, we have rendered the foreign key column data source from server side. Please refer to the following code example, 
Code example
@Grid 
 
@(Html.EJ().Grid<OrdersView>("Grid") 
                    . .  . 
                     
                    .AllowPaging() 
                     
                    .Columns(col => 
                    { 
                        col.Field(p => p.EmployeeID).ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource(ds => ds.URL(@Url.Action("ForeignData"))).HeaderText("FirstName").Add(); 
                    }) 
) 
 
 
@Server side 
 
public ActionResult ForeignData(DataManager dm) 
        { 
            IEnumerable data = EmployeeData; 
            
            int count = data.Cast<EmployeeView>().Count(); 
            
            return Json(dm.RequiresCounts ? new { result = data, count = count } : data as object, JsonRequestBehavior.AllowGet); 
        } 

Please let us know if you have any further assistance on this. 

Query #2:” In other words, the datasource of the column UsageValueCode depends on the choice of LocationId cell. How can I reach this goal? I have tried in some ways but without success... 

We have understood from your query, you want to change the data source based on the other column value and it can be achieved by using cascading Dropdown list as well as we have created a knowledge base documentation for this. Please refer to the following Knowledge base documentation, 

Refer to the below KB link for “how to change the selecteditem of one column dropdown based on the selection of another column”.

https://www.syncfusion.com/kb/5444/ 
Please let us know if you have any further assistance on this. 

Regards, 
Venkatesh Ayothiraman. 



CR CLAUDIO RICCARDI July 17, 2017 03:53 PM UTC

Hi,
thank you for the support.

I've used a "mixed solution" but I still encounter some problems.

the ActionComplete event is triggered and this is the javascript function:

<script type="text/javascript">


    function complete(args) {

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

            var locationId = args.rowData.LocationId;

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

                $.ajax({

                    url: '../../Work/GetUsageValues',

                    type: 'GET',

                    async: false,

                    data: { "LocationId": locationId },

                    dataType: 'json',

                    success: function (result)

                    {

                        $("#LocationsGridUsageValueCode").ejDropDownList({ dataSource: result });//assign the filtered dataSource obtained from serverSide

                    }

                })

            }

        }

    }

</script>

below is the controller method:

        public ActionResult GetUsageValues(int LocationId)

       {

            var location = db.Locations.Find(LocationId);

            Equipment equipment = null;

            if (location != null)

            {

                equipment = db.Equipments.FirstOrDefault(i => i.EquipmentId == location.LocationEquipmentId);

            }


            var eq = db.Equipments.FirstOrDefault(i => i.EquipmentId == location.LocationEquipmentId);


            var usageValues = db.UsageValues.Where(uv => uv.IsCapture == eq.IsCapture).ToList();


            return Json(usageValues, JsonRequestBehavior.AllowGet);

        }

PROBLEM: the controller method is correclty called and it returns the correct datasourse. But in the dropdownlist I see the correct number of items but the description for all the items is "undefined". So I see <undefined<,<undefined>,... as text of the dropdownlist items.

Claudio



VA Venkatesh Ayothi Raman Syncfusion Team July 18, 2017 12:46 PM UTC

Hi Claudio, 

Thanks for the update. 

We went through your code example that you have shared for us and found that you are binding the Dropdown datasource without fields property. Because Dropdown data source should be a text and value pair. This is the cause of the issue and we suggest you to mentioned the fields property for assign the text and value pair. Please refer to the following code example and Help documentation for more information, 
Code example
$("#LocationsGridUsageValueCode").ejDropDownList({ dataSource: result, fields: { text: "Field is shown for Display purpose", value: "This field value is foreignkey field" } });//assign the filtered dataSource obtained from serverSide 
 
        //For example we have foreign key field is EmployeeID and foreign key value is FirstName 
        $('#EmployeeID').ejDropDownList({ 
            dataSource: result, 
            fields: { text: "FirstName", value: "EmployeeID" }, //here we have mentioned text as FirstName and value as EmployeeID 
        }); 

Help documentation:  


Regards, 
Venkatesh Ayothiraman. 
  


Loader.
Live Chat Icon For mobile
Up arrow icon