Kendo Grid Custom Editor for Foreign Key Field...

[Robin]

I have a table that has a foreign key to another table, and I would like to provide a dropdownlist as the editor for the foreign key field and then save the object back to the database using oData.
I can get the grid to create just fine, and CRUD operations work great on the main set of data.  
This leaves with me a couple of options.
I can simply bind the column to the foreign key field int field, and use a custom editor to create the dropdownlist to provide the id from the lookup table on, but leaves me displaying a simple int in the grid instead of a more meaningfull property of the lookup table.
Or I can use the $expand in the Read of the DataSource, include a field bound to the more meaningfull property, but can't get the editor to work quite right or the Update postback to work.

I have made some fiddles to try to show my point.
http://jsfiddle.net/giltnerj0/h4wx5/ 
http://jsfiddle.net/giltnerj0/h4wx5/1/ 
(These won't work for actual CRUD operations due to the JSONP from using demos.kendoui.com as the service)

[Rosen]

Hi Robin,

You should bind the editor to the whole Supplier object and use a template to display the CompanyName. Here is a modified version of one of the jsFiddles you have provided.

All the best,
Rosen
the Telerik team

[Robin]

Thank you for the reply, that works great.  I am still having an issue with the actual PUT (Update) and POST (Create) service calls.  I get an error 400, Response body has message "Error processing request stream. Binding to new entities is not supported in PUT operations."  The Request body looks to be including the entire Supplier object when it sends the Product instead of just including SupplierID : 4 etc.

If I go back to showing the int value of SupplierID and not expanding the Supplier on READ, PUT and POSTS work as expected.

The oData CRUD operations sample you put on Github works great (https://github.com/telerik/kendo-examples-asp-net/blob/master/grid-odata-crud/Northwind.svc.cs), I just keep running into issues when I start expanding the odata calls to include child records.

[Rosen]

Hello Robin,

Unfortunately, as far as I'm aware, oData does not support updating related entities through single request. Therefore, you may need to use a custom parameterMap to alter the format  of the changed data a bit.
Similar to the following:

parameterMap: function(options, type) {
    if (type !== "read") {
        options.SupplierID = options.Supplier.SupplierID;
        delete options.Supplier;
    }
    return kendo.data.transports["odata"].parameterMap(options, type);
}

Regards,
Rosen
the Telerik team

[Robin]

Thank you. That works perfectly.

[Ambica]

Hi Rosen,

I have checked this link  "http://jsfiddle.net/h4wx5/3/" for adding new row with foreign key relation. its working fine for other fields but not for Supplier field its updating Undefined. Please help me out

Thanks in advance

[Robin]

Ambica,
I had to take care of that in my Parameter Map on the dataSource.

parameterMap: function(options, type) {
if(type == "update') {
options.supplier_id = options.Supplier.id;
delete options.Supplier;
}
else if(type == "create") {
options.supplier_id = options.Supplier;
delete options.Supplier;
}
return kendo.data.transports["odata"].parameterMap(options, type);
}

For some reason, when creating a new record, the id for the foreign key was stored as the Object, but when updating, it was stored properly as the Object.id.  Hope this makes sense.  You should be able to put a stop in the parameterMap function, and inspect the options object.

[Ambica]

Hi Robin,
Thank you for replay.

I have tried with ParameterMap,its not working (Grid itself not binding, without Parameter Map its binding) 
I have debugged , when type=read, options object contains  as below.

1. $expand: "ProductGroup"
2. group: Array[0]
3. __proto__: Object
4. 
   

is I am missing any thing ? below is my Code :

    _ProductDS = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: {             
                dataType: 'json',
            data: {
                $expand: "ProductGroup"
                   }                
            },
            create: {
                url: _WebServiceAddress + "dataapi/FieldForceProductGroups",
                contentType: 'application/json;odata=verbose',                
                complete: function (jqXHR, textStatus) {               
                    if (textStatus == "success") {                         
                        DisplayStatusMessage(_UpdatedSuccessful, StatusType.Confirmation, true);
                    }
                }
            },
            update: {
                url: function (data) {
                    return _WebServiceAddress + "dataapi/FieldForceProductGroups(guid'" + data.Id + "')";
                },
                contentType: 'application/json;odata=verbose',                
                complete: function (jqXHR, textStatus) {                    
                    if (textStatus == "success") {
                        DisplayStatusMessage(_UpdatedSuccessful, StatusType.Confirmation, true);
                    }
                }
            },
            destroy: {
                url: function (data) {
                    return _WebServiceAddress + "dataapi/FieldForceProductGroups(guid'" + data.Id + "')";
                },
                contentType: 'application/json;odata=verbose',                
                complete: function (jqXHR, textStatus) {                     
                    if (textStatus == "success") {                        
                        DisplayStatusMessage(_UpdatedSuccessful, StatusType.Confirmation, true);
                    }
                }
            } 
            parameterMap: function (options, type) {
                if (type == "update") {
                    options.ProductGroupId = options.ProductGroup.Id;
                    delete options.ProductGroup;
                }
                else if (type == "create") {                   
                    options.ProductGroupId = options.ProductGroupId;
                    delete options.ProductGroup;
                }
                return kendo.data.transports["odata"].parameterMap(options, type);
            }
   
        },
        schema: {
            total: function (data) {
                if (data != null || data.length > 0)
                    return data.totalCount;
                else
                    return 1;
            },
            data: function (data) {
                if (data.d != null) {
                    return data.d.results;
                }
            },
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: false },                  
                    Priority:{editable: true,  type: "number", validation: { required: true, min: 1}   },
                    CreatedDateTime: { editable: true, type: "date", nullable: false, defaultValue: new Date() },
                    ProductGroupId:{ editable: true},
                    ProductGroup: {}
                }
            }
        }
});

// Bind Grid

$("#divProduct").kendoGrid({
        autobind: false,
        scrollable: { virtual: true },
        height: 333,
        serverSorting: false,
        pageSize: 10,
        dataSource: _ProductDS,      
        toolbar: ["create"],
        columns: [          
        {
        field: "Priority",
        title: "Priority"
	}, 
         {
             field: "Name",
             width: "150px",
             template: "#=ProductGroup.Name#",           
             editor: ProductGroupDropDownEditor
         },   
       {command: ["edit", "destroy"] }
        ],
    editable: "inline"    
});

  function ProductGroupDropDownEditor(container, options)
  {
   $('<input data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>"')
 
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "odata",  
                                   transport: {
                                            read: {
                                                url: _WebServiceAddress + "dataapi/ProductGroups",
                                                dataType: 'json'
                                            }
                                        }
                                      }
                        });

  }
    

Please do me a need full.

Thank you

[Robin]

Maybe I am just not seeing it, but I can't find where you are setting the URL for the read command in your datasource.

[Ambica]

Hi Robin,

I have a Listview, which shows all field Force (Sales Rep details) , On selection of list view item , am binding grid by passing selected Field Force (Sales rep) ID. as  below.

ListView Binding

   $("#divFieldForceListView").kendoListView({  
       template: "<div id=${Id} style='width:100%;height:24px;cursor:pointer'><span style='padding-left:9px;line-height:24px;'>${Name} </span></div>", 
       pageable: true,    
       selectable: true,    
       autoBind: false,     
       dataSource: _FieldForceListDS,     
       columns: ["Id", "Name"],     
       change: OnFieldForceSelected  
   });

function OnFieldForceSelected(e) { 

 ReadDataSource(e.sender.dataSource.view()[e.sender.select().index()].Id); 
...
}

//--------------------------------------------------------------------------------------------- 
// Change Dynamically Datasource to get data from the roster having id of pGUID
 //--------------------------------------------------------------------------------------------- 
function ReadDataSource(pGuid) {  
    _FieldForceDetailsDS.transport.options.read.url = _WebServiceAddress + "dataapi/FieldForces?$filter=Id eq guid'" + pGuid + "'"; 
    _FieldForceDetailsDS.read();
}