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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Format Grid Column: INR Rs in grid column

Thread ID:

Created:

Updated:

Platform:

Replies:

128179 Jan 6,2017 10:55 AM UTC Jan 9,2017 01:52 PM UTC ASP.NET Web Forms 1
loading
Tags: Grid
Avishake Attari
Asked On January 6, 2017 10:55 AM UTC

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 [Syncfusion]
Replied On January 9, 2017 01:52 PM UTC

 
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. 
 
 
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, 
 
 
 
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. 
 
 
(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     
 
 
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. 
 
 
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. 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;