Format Grid Column: INR Rs in grid column

[Avishake Attari]

I have a Main grid with columns Product, Quantity, Price and Amount

1. On click of a unbounded column button in the Main Grid I want to open a dialog that will show the grid of various products present in the database. 

      and on selecting any of the product in the dialog grid , the dialogue gets closed and values of selected row gets filled in the Main Grid. 

2. Now the Main  grid is in batch edit mode and when I change the Quantity or Price, the amount gets changed automatically.

      Also I want to show the total of all rows { Amount} column  of Main Grid in a label outside grid . and this label value should change depending upon the             change in value of Quantity or Price

3. Currently the Price and Amount  is displaying the values in the column as $200.00

       but I want to display it as Rs. 200.00

can you please help me with these issues

[Jayaprakash Kamaraj]

 

Hi Avishake, 

 

Thank you for contacting Syncfusion support. 

 

Query1 :  On click of a unbounded column button in the Main Grid I want to open a dialog that will show the grid of various products present in the database and on selecting any of the product in the dialog grid , the dialogue gets closed and values of selected row gets filled in the Main Grid.  

 

Based on your requirement we have created a sample that can be downloaded from the following link. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/128179/ze/sample-720086845 

 

In the DataBound event of the Grid, data for the Relation Grid (to be placed in the Dialog) will be collected using the DataManager (WebMethodAdaptor). These Data will be filtered in the click event of the command button . Refer to the following code example.  

 

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 

       <div id="commanddialog"><div id="detailGrid1"> 

 

 

</div></div> 

    <ej:Grid ID="Grid" ClientIDMode="Static" runat="server" AllowPaging="True"> 

        <ClientSideEvents ActionComplete="complete" DataBound="dataBound" /> 

        <Columns> 

.. 

                    <Command> 

                        <ej:Commands Type="detail"> 

                            <ButtonOptions Text="Details" Width="100" Click="onClick"></ButtonOptions> 

                        </ej:Commands> 

                    </Command> 

                </ej:Column> 

        </Columns> 

        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings> 

        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 

    </ej:Grid> 

 

    <script type="text/template" id="template"> 

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

                <td style="text-align: right;">Employee ID 

                </td> 

                <td style="text-align: left"> 

                    <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" disabled="disabled" 

                        class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" /> 

                </td> 

                <td style="text-align: right;">First Name 

                </td> 

                <td style="text-align: left"> 

                    <input id="FirstName" name="FirstName" value="{{: FirstName}}" class="e-field e-ejinputtext valid" 

                        style="width: 116px; height: 28px" /> 

                </td> 

            </tr> 

            <tr> 

                <td style="text-align: right;">Last Name 

                </td> 

                <td style="text-align: left"> 

                    <input id="LastName" name="LastName" value="{{: LastName}}" class="e-field e-ejinputtext valid" 

                        style="width: 116px; height: 28px" /> 

                </td> 

                <td style="text-align: right;">Birt hDate 

                </td> 

                <td style="text-align: left"> 

                    <input id="BirthDate" name="BirthDate" class="e-field e-ejinputtext valid" 

                        style="width: 116px; height: 28px" value="{{:BirthDate}}" /> 

                </td> 

            </tr> 

            <tr> 

                <td style="text-align: right;">Country 

                </td> 

                <td style="text-align: left"> 

                    <select id="Country" name="Country"> 

                        <option value="Germany">Germany</option> 

                        <option value="Mexico">Mexico</option> 

                        <option value="UK">UK</option> 

                        <option value="Sweden">Sweden</option> 

                        <option value="Colchester">France</option> 

                        <option value="Denmark">Italy</option> 

                        <option value="Spain">Spain</option> 

                        <option value="USA">USA</option> 

                    </select> 

                </td> 

            </tr> 

        </table> 

         

 

 

    </script> 

    <script type="text/javascript"> 

        var PopupData = []; 

        $("#commanddialog").ejDialog({ 

            "width": 650, 

            title: "Details of employee", 

            showOnInit: false, 

            enableResize: false 

 

        }); 

        function onClick(args) { 

            var grid = $("#Grid").ejGrid("instance"); 

            var index = this.element.closest("tr").index(); 

            var record = grid.getCurrentViewData()[index]; 

            //filtering the data with the help of EmployeeID a primaryKey of parent Grid 

            var data = ej.DataManager(PopupData).executeLocal(new ej.Query().where("EmployeeID", "equal", record.EmployeeID)); 

 

            $("#detailGrid1").ejGrid({ 

                //binding filtered data to Grid 

                dataSource: data, 

                allowPaging: true, 

                pageSettings: { pageSize: 4 }, 

                columns: [ 

                    { field: "OrderID" }, 

                    { field: "CustomerID" } 

                ] 

            }) 

            $("#commanddialog").ejDialog("open"); 

        } 

        function dataBound(args) { 

            var elem = $("#Grid_externalEdit").detach(); 

            this.element.prepend(elem); 

            var dataManager = ej.DataManager({ url: "/Default.aspx/Data", adaptor: new ej.WebMethodAdaptor() }); 

            var query = ej.Query(); 

            //using DataManager to collect the all data for Popup Grid 

            var execute = dataManager.executeQuery(query) // executing query 

                   .done(function (e) { 

                       PopupData = e.result.Data; 

                   }); 

        } 

 

    </script> 

 

</asp:Content> 

 

Help document for, 

 

Databound : https://help.syncfusion.com/api/js/ejgrid#events:databound 

 

getCurrentViewData  : https://help.syncfusion.com/api/js/ejgrid#methods:getcurrentviewdata 

 

Query 2: Now the Main  grid is in batch edit mode and when I change the Quantity or Price, the amount gets changed automatically 

 

In batch edit mode, we can change cell value using setCellValue method of ejGrid. Please refer to the below help document. 

 

https://help.syncfusion.com/api/js/ejgrid#methods:setcellvalue 

 

(or) 

 

We can create computed column(Amount) using SQL queries and also we can calculate Amount as Quantity * Price using SQL queries. It will automatically calculate the value when you change the values in relational columns (Quantity / Price) in Grid. Please refer to the below document     

 

https://msdn.microsoft.com/en-IN/library/ms188300.aspx  

 

ALTER TABLE dbo.OrderTables DROP COLUMN Amount;    

GO    

ALTER TABLE dbo.OrderTables ADD Amount AS (Quantity * Price );  

 

Query3 : I want to show the total of all rows { Amount} column  of Main Grid in a label outside grid . and this label value should change depending upon the change in value of Quantity or Price 

 

We have already discussed the same in following knowledge base document. 

 

https://www.syncfusion.com/kb/3830/how-to-sum-all-the-values-in-a-column-and-display-it-in-an-external-input-box-in-the-batchediting 

 

Query 4: Currently the Price and Amount  is displaying the values in the column as $200.00 but I want to display it as Rs. 200.00 

 

If you are using default English culture in Grid, we suggest to change n2(number format) instead of C2( currency format) and set prefix as RS in Format property . 

 

<ej:Grid ID="Grid" ClientIDMode="Static" runat="server" AllowPaging="True"> 

        <ClientSideEvents ActionComplete="complete" DataBound="dataBound" /> 

        <Columns> 

            <ej:Column Field="EmployeeID" HeaderText="Employee ID" Format="Rs {0:n2}" TextAlign="Right" Width="100" /> 

.. 

                </ej:Column> 

        </Columns> 

        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch" ></EditSettings> 

        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 

    </ej:Grid> 

 

 

Regards, 

 

Jayaprakash K.