1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Edit Mode only

Edit Mode only

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!

5 Replies
PK Padmavathy Kamalanathan Syncfusion Team 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 
 


JK Jeesoo Kim 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


PK Padmavathy Kamalanathan Syncfusion Team 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 


JK Jeesoo Kim October 10, 2019 01:58 PM UTC

Hi Padmavathy Kamalanathan,

Thank you so much!

Have a great day!

Jeesoo

PK Padmavathy Kamalanathan Syncfusion Team 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 


Loader.
Up arrow icon