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.

Add Grid on a Dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

120845 Oct 21,2015 04:38 PM Oct 23,2015 09:12 AM JavaScript 4
loading
Tags: ejGrid
Lory
Asked On October 21, 2015 04:38 PM

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
Replied On October 21, 2015 06:21 PM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 22, 2015 08:38 AM

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.

Lory
Replied On October 22, 2015 03:11 PM

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 [Syncfusion]
Replied On October 23, 2015 09:12 AM

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.

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.

;