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.
Unfortunately, activation email could not send to your email. Please try again.

Foreign Key column with row data

Thread ID:

Created:

Updated:

Platform:

Replies:

127099 Oct 26,2016 02:53 AM Oct 31,2016 12:26 AM JavaScript 5
loading
Tags: ejGrid
Daniel Plawgo
Asked On October 26, 2016 02:53 AM

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 [Syncfusion]
Replied On October 27, 2016 08:22 AM

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> 


Regards, 
Seeni Sakthi Kumar S. 


Daniel Plawgo
Replied On October 27, 2016 08:52 AM

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 [Syncfusion]
Replied On October 27, 2016 11:48 PM

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> 


Refer to the following API reference Help Documents. 


Regards, 
Seeni Sakthi Kumar S. 


Daniel Plawgo
Replied On October 28, 2016 01:09 AM

Thanks!!

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 31, 2016 12:26 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;