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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Edit Mode only

Thread ID:

Created:

Updated:

Platform:

Replies:

147893 Sep 26,2019 10:27 PM UTC Oct 11,2019 10:11 AM UTC ASP.NET Web Forms 5
loading
Tags: Grid
Jeesoo Kim
Asked On September 26, 2019 10:27 PM UTC

Hi!

I am wondering if it is possible to have a grid with edit mode only.
Or, as an alternative option, can I have a grid with input box(es) when it is created/loaded?

Thanks!

Padmavathy Kamalanathan [Syncfusion]
Replied On September 27, 2019 01:24 PM UTC

Hi Jeeso, 
 
Thanks for contacting Syncfusion Forums. 
 
QUERY:  Can i have a grid with input boxes when created  
 
From your query we understand that you need to have input boxes in the grid when it’s been created. And on adding data to the input box you need to add record to the grid. 
 
We have achieved this query by creating and appending “tr” element to the grid in grid’s “Create” event. You can type your data in it and click save button. In that button click event, we have added the record to the grid using “addRecord” method. 
 
Please refer the below help documentations, 
 
Please refer the below code snippet, 
 
 
<ej:Grid ID="EmployeesGrid" runat="server"   MinHeigh="600" MinWidth="500"   AllowPaging="true" > 
     <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
                <ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel,search"></ToolbarSettings> 
            <ClientSideEvents Create="create"  /> 
            <Columns> 
                ---- 
            </Columns> 
             </ej:Grid> 
     <ej:Button ID="ButtonNormal" runat="server" Type="Button" Text="Save" Size="Normal" ShowRoundedCorner="true" ContentType="TextOnly" PrefixIcon="e-icon e-uiLight e-handup" ClientSideOnClick="btnClick" ></ej:Button> 
 
<script> 
        
 function btnClick(args) { 
        var gridObj = $("#MainContent_EmployeesGrid").ejGrid("instance"); 
         gridObj.addRecord({ "EmployeeID": 1000, "FirstName": $("#text1").val(), "LastName": $("#text2").val(), "Title": $("#text3").val() }); 
        } 
 
        function create(args) { 
             var newTr = '<tr class="e-row" data-role="row"><td class="e-rowcell" data-role="gridcell" ><input id="text1" type="text"></td><td class="e-rowcell" data-role="gridcell"> <input id="text2" type="text"></td><td class="e-rowcell" data-role="gridcell"><input id="text3" type="text"></td></tr>'; 
            this.getContentTable().append(newTr); 
 
            $('#text1').ejAutocomplete({ 
                dataSource: window.gridData, 
                fields: { key: "OrderID", text: "CustomerID" }, 
            }); 
            $('#text2').ejAutocomplete({ 
                dataSource: window.gridData, 
                fields: { key: "OrderID", text: "ShipCity" }, 
            }); 
            $('#text3').ejAutocomplete({ 
                dataSource: window.gridData, 
                fields: { key: "OrderID", text: "ShipCountry" }, 
            }); 
        } 
 
 
    </script> 
 
In the above example, we have created “AutoComplete” input in grid’s  create event. 
 
Please refer the below sample, 
 
If we have mis interpreted your query , please let us know with your actual requirement with more clarity. 
 
If you have further queries, please get back to us. 
 
Regards, 
Padmavathy Kamalanathan 
 


Jeesoo Kim
Replied On October 9, 2019 05:35 PM UTC

Hi Padmavathy Kamalanathan,

Thanks for your reply and sorry for a late reply! 
(I was trying to run the sample first before replying to you. I finally had time to do that.)

Actually, I do not need to create a new record, but need to "only edit" for the existing records/data.
That is, when the grid is created(or loaded), what I need is only "edit".

When I double click one of fields, that text is turned into edit mode.
That is, when I click , e.g. "Nancy", I can type in any text. I think this is edit mode. Is this right?

But how can I get this updated value?
That is, how can I save (or pass) this updated value to the code-behind with "button click"(e.g. submit or save)?
In other words, I am wondering how I can get the updated grid data ?

Thanks again for your support!

Jeesoo


Padmavathy Kamalanathan [Syncfusion]
Replied On October 10, 2019 01:21 PM UTC

Hi Jeesoo, 
 
Thanks for your update. 
 
From your query we understand that you need to edit the row in single click and you can use toolbar to save it. 
 
QUERY1: when I click , e.g. "Nancy", I can type in any text 
 
You need to set the allowEditOnDblClick to false and call startEdit method in recordClick event. 
 
Please refer the below code snippet, 
 
 
 
        <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"  > 
            <ClientSideEvents RecordClick="recordClick" /> 
            <EditSettings AllowEditOnDblClick="false" AllowEditing="True" AllowAdding="true" AllowDeleting="True"></EditSettings> 
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
            <Columns> 
              ----- 
            </Columns> 
        </ej:Grid> 
 
 
        <script type="text/javascript"> 
            function recordClick(args) { 
                if (this.model.editSettings.editMode == "normal") { 
                    this.startEdit(args.row);  //trigger to edit the row  
                } 
            }    </script> 
 
QUERY2: how I can get the updated grid data 
 
You can get grid’s updated value in arguments(args.data) of “actionBegin” event with requestType as “save”. 
 
Please refer the below code, 
 
 
 
            function actionBegin(args) { 
                if (args.requestType == "save") { 
                    var data = args.data; 
                } 
            } 
 
 
Please refer the below help documentations, 

If you have further queries, please get back to us. 

Regards, 
Padmavathy Kamalanathan 


Jeesoo Kim
Replied On October 10, 2019 01:58 PM UTC

Hi Padmavathy Kamalanathan,

Thank you so much!

Have a great day!

Jeesoo

Padmavathy Kamalanathan [Syncfusion]
Replied On October 11, 2019 10:11 AM UTC

Hi Jeeso, 

We are happy to hear that you have achieved your requirement. 

If you have further queries, please get back to us. 

Regards, 
Padmavathy Kamalanathan 


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

This page will automatically be redirected to the 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

Live Chat Icon For mobile
Live Chat Icon