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. Image for the cookie policy date
close icon

Making the edit textboxes larger

Hi,

I'm using the grid with auto generated columns from dynamic data. So the code looks like this.



What I want is to make when in edit box much larger even change it to multi line so the user can see all of the text to edit.

At the moment the edit box is too small



Many Thanks




9 Replies

VN Vignesh Natarajan Syncfusion Team October 30, 2018 09:35 AM UTC

Hi David, 
 
Thanks for contacting Syncfusion support. We are happy to assist you. 
 
Query: What I want is to make when in edit box much larger even change it to multi line so the user can see all of the text to edit. 
 
From your query, we understand that you need increase the size of input text while editing a record. We have achieved your requirement using the edit template feature of ejGrid. Since you are using auto-generated column, we suggest you use the databound event to update the editTemplate. 
 
By default editform will appear as input text box, using edit template we have rendered the editform as TextArea for that column and updated the changes using columns() method. 
 
Please refer the below code example and sample link, 
 
   <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" > 
           <ClientSideEvents DataBound="ondatabound" /> 
            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
        </ej:Grid> 
     <script type="text/javascript"> 
 
         function ondatabound(args) { 
             this.model.columns[1].editTemplate = { create: "create", write: "write", read: "read" }; 
             this.columns(this.model.columns); 
         } 
 
 
        function create() { 
            return "<textarea style='resize:none; width:100%'>{{:CustomerID}}</textarea>"; 
        } 
 
        function write(args) { 
        } 
 
        function read(args) { 
            return args.val(); 
        } 
        
    </script> 
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
 
Refer our help documentation for you reference 
 
 
 
 
Please get back to us if you have any further queries. 
 
Regards, 
Vignesh Natarajan  
 



DP David Price October 30, 2018 01:03 PM UTC

Thank, but its not really working. My issue is that there isn't a unique id for each column .

The datasource is bound 



The order object look like this




Your grid works by autogenerating each row




So to turn each edit box into a textarea

I can run a loop as per your example



The issue is I need to run a loop inside create



Since at the moment when I press edit all the boxes have the same first element of data in it. All the boxes are the same .









VN Vignesh Natarajan Syncfusion Team October 31, 2018 09:40 AM UTC

Hi David, 
 
Thank for the update. 
 
From your query, we understand that you are facing issue while implementing our solution for complex column. While editing the record, we suggest you to pass the value of the respective column from the rowData of edit template. We have achieved your requirement by defining the value for the column in the write function of edit template.  
 
Please refer the below code example. 
 
 
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"> 
        <ClientSideEvents DataBound="ondatabound" /> 
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
    </ej:Grid> 
    <script type="text/javascript"> 
 
        function ondatabound(args) { 
            for (var i = 2; i < this.model.columns.length; i++) { 
                this.model.columns[i].editTemplate = { create: "create", write: "write", read: "read" }; 
            } 
            this.columns(this.model.columns); 
        } 
 
 
        function create() { 
            return "<textarea style='resize:none; width:100%'></textarea>"; 
        } 
 
        function write(args) { 
            var colname = args.element.attr("name").split("."); 
            $(args.element).val(args.rowdata[colname[0]][colname[1]]); 
        } 
 
        function read(args) { 
            return args.val(); 
        } 
 
    </script> 
 
We have prepared a sample for your reference. Please refer the below link for the sample. 
 
 
If you still face the issue , kindly share more details regarding the issue you are facing. 
 
Regards, 
Vignesh Natarajan 



DP David Price October 31, 2018 07:09 PM UTC

Hi,

Thank you for your reply and yes its working and now I can see all boxes are larger in edit mode. But it seems when I edit a box and hit save the code behind function EditEvents

e.Arguments["data"]

this used to give me all the data in the edit boxes so I could loop though and see all the edits the user has made.





Now with using the template all I get is OrderID and ColumnName. How can I get the data that the user entered from the edit box ?






VN Vignesh Natarajan Syncfusion Team November 1, 2018 10:23 AM UTC

Hi David, 
 
Thanks for the update. 
 
Query: How can I get the data that the user entered from the edit box ? 
 
From your query, we understand that you need to get the value for complex column in the server edit events arguments. As per your suggestion we have prepared a sample with complex data and server edit events and achieved your requirement using OnServerEditRow , OnServerAddRow and OnServerDeleteRow. Kindly refer the below code example for your reference 
 
 
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"   
        OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow" OnServerDeleteRow="EditEvents_ServerDeleteRow"     > 
        <ClientSideEvents DataBound="ondatabound" /> 
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
    </ej:Grid> 
 
// ServerSide 
   protected void EditEvents_ServerEditRow(object sender, GridEventArgs e) 
        { 
            EditAction(e.EventType, e.Arguments["data"]); 
        } 
 
        protected void EditEvents_ServerAddRow(object sender, GridEventArgs e) 
        { 
            EditAction(e.EventType, e.Arguments["data"]); 
        } 
 
        protected void EditEvents_ServerDeleteRow(object sender, GridEventArgs e) 
        { 
            EditAction(e.EventType, e.Arguments["data"]); 
        } 
 
        protected void EditAction(string eventType, object record) 
        { 
             
            List<Orders> data = order; 
            Dictionary<string, object> KeyVal = record as Dictionary<string, object>; 
            if (eventType == "endEdit") 
            { 
                Orders value = new Orders(); 
                foreach (KeyValuePair<string, object> keyval in KeyVal) 
                { 
                    if (keyval.Key == "OrderID") 
                    { 
                        value = data.Where(d => d.OrderID == (int)keyval.Value).FirstOrDefault(); 
                        value.OrderID = Convert.ToInt32(keyval.Value); 
                    } 
                    else if (keyval.Key == "CustomerID") 
                        value.CustomerID = Convert.ToString(keyval.Value); 
                    else if (keyval.Key == "DatarowElement") 
                    { 
                        Dictionary<string, object> chec = keyval.Value as Dictionary<string, object>; 
                        foreach (KeyValuePair<string, object> keyvalue in chec) 
                        { 
                            if (keyvalue.Key == "FirstName") 
                                value.DatarowElement.FirstName = Convert.ToString(keyvalue.Value); 
                            else if (keyvalue.Key == "LastName") 
                                value.DatarowElement.LastName = Convert.ToString(keyvalue.Value); 
                            else if (keyvalue.Key == "EmployeeID") 
                               value.DatarowElement.EmployeeID = Convert.ToInt32(keyvalue.Value); 
                        } 
                    }                
                } 
            } 
            else if (eventType == "endAdd") 
            { 
                Orders newRecord = new Orders(); 
                Employee complexrecord = new Employee(); 
                foreach (KeyValuePair<string, object> keyval in KeyVal) 
                { 
 
                    if (keyval.Key == "OrderID") 
                        newRecord.OrderID = Convert.ToInt32(keyval.Value); 
                    else if (keyval.Key == "CustomerID") 
                        newRecord.CustomerID = Convert.ToString(keyval.Value); 
                    else if (keyval.Key == "DatarowElement") 
                    { 
                        Dictionary<string, object> chec = keyval.Value as Dictionary<string, object>; 
                        foreach (KeyValuePair<string, object> keyvalue in chec) 
                        { 
                            if (keyvalue.Key == "FirstName") 
                                complexrecord.FirstName = Convert.ToString(keyvalue.Value); 
                            else if (keyvalue.Key == "LastName") 
                                complexrecord.LastName = Convert.ToString(keyvalue.Value); 
                            else if (keyvalue.Key == "EmployeeID") 
                                complexrecord.EmployeeID = Convert.ToInt32(keyvalue.Value); 
                            newRecord.DatarowElement = complexrecord; 
                        } 
                    } 
                } 
                data.Insert(0, newRecord); 
            } 
            else if (eventType == "endDelete") 
            { 
                foreach (KeyValuePair<string, object> keyval in KeyVal) 
                { 
                    if (keyval.Key == "OrderID") 
                    { 
                        Orders value = data.Where(d => d.OrderID == (int)keyval.Value).FirstOrDefault(); 
                        data.Remove(value); 
                    } 
                } 
            } 
            this.OrdersGrid.DataSource = data; 
            this.OrdersGrid.DataBind(); 
        } 
 
 
 
 
 
Refer the below screenshot for the output 
 
 
 
 
    
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
 
If you are facing the issue please get back to us with the following details. 

  1. Share the Essential studio version.
  2. Share the complete grid code example.
 
Regards, 
Vignesh Natarajan 



DP David Price November 1, 2018 03:14 PM UTC

Hello I have submitted an example page , which clearly shows that the text from the edit box isn't getting passed back to the code behind.

as you can see i'm not getting the values from the edit boxes



I'm not sure why I can't upload code pages , here is a link to the test file I created for you - http://viewo.com/Test.aspx.zip



Attachment: Test.aspx_edc727cc.zip


VN Vignesh Natarajan Syncfusion Team November 2, 2018 05:46 AM UTC

Hi David, 


Thanks for the update.  


We have prepared a sample using the shared code example in version 16.1.0.24 and still we are unable to reproduce the reported issue at our end. For your convenience we have attached a sample and video demonstration which can be downloaded from below link 



Refer the below screenshot for the output 

 


If you still face the issue kindly get back to us with following details 


  1. You have referred the 16.1.0.24 dll and 16.1.0.37 scripts. Kindly share your essential studio version
  2. Ensure to refer the scripts, css and dll in same version.
  3. If possible try to reproduce the reported issue in provided sample.
  4. Also ensure to clear the cache.


Regards, 
Vignesh Natarajan 



DP David Price November 2, 2018 07:57 AM UTC

Thank you for you help it was a mismatch in js files that caused the issue.




VN Vignesh Natarajan Syncfusion Team November 2, 2018 08:30 AM UTC

Hi David, 

Thanks for the update. 


We are glad to hear that your query has been resolved by our solution. 


Please get back to us if you have further queries. 


Regards, 
Vignesh Natarajan  


Loader.
Live Chat Icon For mobile
Up arrow icon