Foreign Key column with row data

[Daniel Plawgo]

Hi!!

I use javascript grid in my application (I love it!) but I have one problem and I didn't find solution on your site.

I want use Foreign Key column in my grid. On site http://js.syncfusion.com/demos/web/#!/bootstrap/grid/columns/foreignkeycolumn is example how use this column but in example all row have the same data in Foreign Key column but I need show difference values for each row.

Now I am using json to populate grid:

{"result":[
{"Id":2, "UserName":"daniel", Permission:"CanEdit", Permissions:[{"Value":"CanEdit", "Display":"Can Edit"}, {"Value":"CanShow", "Display":"Can Show"}]},
{"Id":3, "UserName":"john", Permission:"CanManage", Permissions:[{"Value":"CanEdit", "Display":"Can Edit"}, {"Value":"CanShow", "Display":"Can Show"}, {"Value":"CanManage", "Display":"Can Manage"}]}
], "count":2}

Permission is Foreign Key column and I want populate dropdownlist with data from Permissions field. How I should configure datasource to use row data.

Thanks for help!!
Daniel Plawgo

[Seeni Sakthi Kumar Seeni Raj]

Hi Daniel, 

We suspect that you would like to bind the different dataSource for the editing columns. We can use the dataSource (of columns) property to place the value. Refer to the following code example and sample. 

    <div id="Grid"></div> 

    <script type="text/javascript"> 

        $(function () { 

 

            // the datasource "window.gridData" is referred from jsondata.min.js 

            var data = [ 

                        {"Id":2, "UserName":"daniel", Permission:"CanEdit", }, 

                        {"Id":3, "UserName":"john", Permission:"CanManage" } 

            ]; 

            var dropData = [{"Value":"CanEdit", "Display":"Can Edit"}, {"Value":"CanShow", "Display":"Can Show"}, {"Value":"CanManage", "Display":"Can Manage"}]; 

            $("#Grid").ejGrid({ 

                dataSource: data, 

                allowPaging: true, 

                allowSorting: true, 

                allowGrouping: true, 

                allowMultiSorting: true, 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "normal" }, 

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

                columns: [ 

                        { field: "Id", isPrimaryKey: true, textAlign: ej.TextAlign.Right, headerText: "Order ID" }, 

                        { field: "Permission", headerText: "Permission", editType: "dropdownedit", dataSource: dropData, editParams: {fields: {text: "Display", value: "Value"}} } 

                ], 

            }); 

        }); 

    </script> 

http://jsplayground.syncfusion.com/atxiyc0f 

Regards, 

Seeni Sakthi Kumar S. 

[Daniel Plawgo]

Hi Seeni Sakthi Kumar!

Thanks for quick answer but We need something a little different. In your solution grid has two rows where all rows have the same options in dropdownlist control ("Can Edit", "Can Show", "Can Manage"). We need have in first row only two values ("Can Edit", "Can Show") and second row should have three values
("Can Edit", "Can Show", "Can Manage"). Please see json:

{"result":[
{"Id":2, "UserName":"daniel", Permission:"CanEdit", Permissions:[{"Value":"CanEdit", "Display":"Can Edit"}, {"Value":"CanShow", "Display":"Can Show"}]},
{"Id":3, "UserName":"john", Permission:"CanManage", Permissions:[{"Value":"CanEdit", "Display":"Can Edit"}, {"Value":"CanShow", "Display":"Can Show"}, {"Value":"CanManage", "Display":"Can Manage"}]}
], "count":2}

Thanks for help!!
Daniel Plawgo

[Seeni Sakthi Kumar Seeni Raj]

Hi Daniel, 

We are sorry for the inconvenience. 

We have modified your solution as follows. We have achieved your requirement using the column template and editTemplate features of the Grid. Using the Column Template, we have referenced the Persmission field with Permission field and displayed the “Display” field with the corresponding value. In the editTemplate, write event rendered the DropDownList control and therefore read event returns the value to the Grid for saving the records. Refer to the following code example. 

    <div id="Grid"></div> 

    <script id="columnTemp" type="text/x-jsrender"> 

        <span></span> 

    </script> 

    <script type="text/javascript"> 

        $(function () { 

            var gridData = [ 

                        { 

                            "Id": 2, "UserName": "daniel", Permission: "CanEdit", 

                            Permissions: [ 

                                { "Value": "CanEdit", "Display": "Can Edit" }, 

                                     . . . 

                            ] 

                        }, 

                                . .  

            ] 

 

            $("#Grid").ejGrid({ 

                dataSource: gridData, 

                   . . . 

                columns: [ 

                        { field: "Id", isPrimaryKey: true }, 

                        { 

                            field: "Permission", headerText: "Permission", template: "#columnTemp", 

                            editTemplate: { 

                                create: function (args) { 

                                    return "<input>"; 

                                }, 

                                read: function (args) { 

                                    return args.val(); 

                                }, 

                                write: function (args) { 

                                    args.element.ejDropDownList({ 

                                        fields: { text: "Display", value: "Value" }, 

                                        dataSource: args.rowdata.Permissions 

                                    }).ejDropDownList("instance").selectItemByValue(args.rowdata.Permission); 

                                } 

                            } 

                        } 

                ], 

                templateRefresh: function (args) { 

                    var text = ej.DataManager(args.data.Permissions).executeLocal(new ej.Query().where("Value", "equal", args.data.Permission))[0].Display; 

                    $(args.cell).find("span").text(text); 

                } 

            }); 

        }); 

    </script> 

http://jsplayground.syncfusion.com/3zkapdlj 

Refer to the following API reference Help Documents. 

https://help.syncfusion.com/api/js/ejgrid#members:columns-edittemplate 

https://help.syncfusion.com/api/js/ejgrid#members:columns-template 

Regards, 

Seeni Sakthi Kumar S. 

[Daniel Plawgo]

Thanks!!

This is what we need. Thank you very much for help.

[Seeni Sakthi Kumar Seeni Raj]

Hi Daniel, 

Thanks for the update. We are happy to hear that your requirement has been achieved. Please get back to us, if you require further assistance on this. 

Regards, 

Seeni Sakthi Kumar S.