Add Grid on a Dialog

[Lory]

Hi Team,

I have a grid that is on a dialog. When I click on add the width of the columns didn't apply properly. This only applies when I click Add. work fine when on edit.

[VIEW]

<div id="dlgItemUnitSearch">

    <div id="SearchItemUnitGrid" style="width:100%"></div>

</div>

[Javascript]

 $("#dlgItemUnitSearch").ejDialog({

        "width": 750,

        title: "Item Unit Search",

        showOnInit: false,

        enableResize: false,

        close: "onDialogClose",

    });

 $("#SearchItemUnitGrid").ejGrid({

        dataSource: [],  // datasource is loaded dynamically

        allowPaging: true,

        pageSettings: { pageSize: 5 },

        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, },

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

        allowSorting: true,

        enableTouch:false,

        columns: [

                { field: "PKId", headerText: "Item Unit Id", width: 50, allowEditing: false, isPrimaryKey: true, visible: false },

                { field: "ItemNo", headerText: "Item No.", width: 80, allowEditing: false },

                { field: "Unit", headerText: "Unit", width: 90, editType: ej.Grid.EditingType.Dropdown, dataSource: Units },

                { field: "AmountEachFactor", headerText: "Factor", width: 80, editType: ej.Grid.EditingType.Numeric, validationRules: { required: true, min: 1 } },

                { field: "IsDefault", headerText: "Default", width: 50, editType: ej.Grid.EditingType.Dropdown, dataSource: [{ text: "No", value: "No" }, { text: "Yes", value: "Yes" }] },

        ],

       

        endEdit: "SaveItemUnit",        

    });

Attachment: add_grid_on_dialog_93b6be47.rar

[Lory]

Second Requirement: How to automatically insert a value on a column upon clicking toolbar item add?  Thanks.

[Seeni Sakthi Kumar Seeni Raj]

Hi Kimye,

Query1: When I click on add the width of the columns didn't apply properly.

We are unable to reproduce the issue at our end. We have rendered a Grid with empty dataSource inside a dialog and tried to replicate the issue by adding a new record. Please refer to the below sample link.

http://jsplayground.syncfusion.com/klge01sj

Please share the below details

1)      The Essential studio version that you have installed in your machine

2)      Stack trace of script error thrown(if any)

The above information will be helpful for us to analyze about the cause of the issue and update you the response based on that. Or you may also replicate the issue in above sample link and revert back to us.

Query2: How to automatically insert a value on a column upon clicking toolbar item add?

defaultValue property of essential Grid will fulfil your requirement. On adding a new record, default values given in column will be updated in a new row. Please refer to the below code example.

$("#Grid").ejGrid({

                dataSource: [],

                allowPaging: true,

                editSettings: {llowEditing: true, allowAdding: true, allowDeleting: true},

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add]},

                columns: [

                  {  field: "OrderID", defaultValue: 10249, isPrimaryKey: true, headerText: "Order ID",  },

                  {field: "CustomerID", defaultValue: "VICTE", headerText: 'Customer ID', width: 80} ,

                 . . . .

                ]
            });

For your convenience, we have prepared a sample with the above requirement that can be referred in below Sample link.
http://jsplayground.syncfusion.com/i2fa0ko2

Please refer to the Help document for other Column properties of Essential Grid.

http://help.syncfusion.com/js/api/ejgrid#members:columns

Regards,
Seeni Sakthi Kumar S.

---

LO Lory October 22, 2015 07:11 PM UTC

I'm using version 13.2.0.29. There is no stack trace error. I found out that the culprit  for the error is setting the visible : false on field "PKId"

 { field: "PKId", headerText: "Item Unit Id", width: 50, allowEditing: false, isPrimaryKey: true, visible: false },

Query 2: Specifically, how to insert a DYNAMIC default value upon clicking add?

Thanks

---

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 23, 2015 01:12 PM UTC

Hi Kimye,

Query: Specifically, how to insert a DYNAMIC default value upon clicking add?

We can add values dynamically using toobarClick event and the columns property. Please refer to the below code example.

$("#Grid").ejGrid({

                dataSource: window.ordersView,

                toolbarClick: function (args){

                    if(args.itemName =="Add"){

                        //Based on some conditions here we can update values

                        this.model.columns[1].defaultValue="VICTE"; //CustomerID column

                    }

                },

                editSettings: {allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: {showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] },

                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID",width: 90 },

                        {field: "CustomerID",headerText: 'Customer ID', width: 80 },

                      . . . .

                ]
            });

For your convenience, we have prepared a sample with above requirement that can be referred in below jsPlayground link.

http://jsplayground.syncfusion.com/xhtcfrjz

Query: When I click on add the width of the columns didn't apply properly.

We are unable to reproduce the issue in the reported version 13.2.0.29 at our end. The reported issue has been fixed in the version 12.3.0.36 and it is not replicated in the latest versions such as 13.3.0.7 and 13.2.0.39. so I suggest you to ensure the scripts and css files referred in the application which belongs to same version. The above sample also prepared in a 13.2.0.29 version and so you can also replicate the issue in the same sample which will help us to analyze the issue.

If you are still facing the difficulties, we would like to set up a web meeting with you to look into this issue and provide resolution. Could you please let me know your availability for this? Our team will make every effort to have this scheduled on a date and time according to your convenience.

Regards,
Seeni Sakthi Kumar S.

[Lory]

I'm using version 13.2.0.29. There is no stack trace error. I found out that the culprit  for the error is setting the visible : false on field "PKId"

 { field: "PKId", headerText: "Item Unit Id", width: 50, allowEditing: false, isPrimaryKey: true, visible: false },

Query 2: Specifically, how to insert a DYNAMIC default value upon clicking add?

Thanks

[Seeni Sakthi Kumar Seeni Raj]

Hi Kimye,

Query: Specifically, how to insert a DYNAMIC default value upon clicking add?

We can add values dynamically using toobarClick event and the columns property. Please refer to the below code example.

$("#Grid").ejGrid({

                dataSource: window.ordersView,

                toolbarClick: function (args){

                    if(args.itemName =="Add"){

                        //Based on some conditions here we can update values

                        this.model.columns[1].defaultValue="VICTE"; //CustomerID column

                    }

                },

                editSettings: {allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: {showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] },

                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID",width: 90 },

                        {field: "CustomerID",headerText: 'Customer ID', width: 80 },

                      . . . .

                ]
            });

For your convenience, we have prepared a sample with above requirement that can be referred in below jsPlayground link.

http://jsplayground.syncfusion.com/xhtcfrjz

Query: When I click on add the width of the columns didn't apply properly.

We are unable to reproduce the issue in the reported version 13.2.0.29 at our end. The reported issue has been fixed in the version 12.3.0.36 and it is not replicated in the latest versions such as 13.3.0.7 and 13.2.0.39. so I suggest you to ensure the scripts and css files referred in the application which belongs to same version. The above sample also prepared in a 13.2.0.29 version and so you can also replicate the issue in the same sample which will help us to analyze the issue.

If you are still facing the difficulties, we would like to set up a web meeting with you to look into this issue and provide resolution. Could you please let me know your availability for this? Our team will make every effort to have this scheduled on a date and time according to your convenience.

Regards,
Seeni Sakthi Kumar S.