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

Grid with autocomplete and datetimepicker null

Thread ID:

Created:

Updated:

Platform:

Replies:

146708 Aug 15,2019 12:28 AM UTC Aug 19,2019 03:43 PM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Alfonso
Asked On August 15, 2019 12:28 AM UTC

Good day.

I need your support in a couple things with app we developing.

1.- How fill a column with datetime field with "null" data, by default i fill with date of present day for don´t show dates like 01/01/1900 i want show something like 00/00/0000 00:00 on the grid field.

2.- The other thing is: how make an autocomplete for an column and fill the column that is autocompleted and other column are that stay hidden to user?.
The column name is strCarrierId and i want fill this column and other column called intCarrierId.

Add code and image for this case.

Thanks for your attention and support us.

Best Regards.



Attachment: VisitPool_d41dfcb9.7z

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On August 15, 2019 10:33 AM UTC

Hi  Alfonso, 

Thanks for contacting syncfusion Support. 

Query#1.- How fill a column with datetime field with "null" data, by default i fill with date of present day for don´t show dates like 01/01/1900 i want show something like 00/00/0000 00:00 on the grid field. 
 
We have achieved your requirement through QueryCellInfo event of the Grid. Using queryCellInfo event we have changed the value using args.cell.textContent.  In this you can change the value as per your requirement. 

Refer to the code example:- 
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True" AllowScrolling="True" AllowFiltering="False" AllowReordering="False" AllowSorting="True" AllowSelection="True" Selectiontype="Multiple" > 
       <ClientSideEvents QueryCellInfo="queryCellInfo" /> 
           <Columns> 
                <ej:Column Field="Id" HeaderText="Order ID" Width="90"  IsPrimaryKey="True" Visible="false" /> 
                <ej:Column Field="Name" HeaderText="Customer ID" Width="85"/> 
                <ej:Column Field="OrderDate" HeaderText="Employee ID" Width="70"/> 
                
               
            </Columns> 
 
  </ej:Grid> 
 
<script> 
         function queryCellInfo(args) { 
              if (args.column.field == "OrderDate") { 
                   if (args.cell.textContent == null || args.cell.textContent == ""){ 
                       var val = "00/00/0000 00:00"; 
                      args.cell.textContent = val; 
                                     } 
                 } 
              } 
 
 
         </script> 

Refer to the API Link:- 

Query#2:-  The other thing is: how make an autocomplete for an column and fill the column that is autocompleted and other column are that stay hidden to user?. The column name is strCarrierId and i want fill this column and other column called intCarrierId. 

You can achieve your requirement using EditTemplate property of the Grid. We can render any other controls such as  (Eg: textarea /colorpicker/dropdown/autocomplete) in Grid column using Edittemplate property. 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" > 
            <Columns> 
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"> 
                  </ej:Column> 
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90"> 
                   <EditTemplate Create="create" Read="read" Write="write" /> 
                </ej:Column> 
                .     .     . 
           <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
        </ej:Grid> 
    </div> 
 
 
<script>  
       function create() { 
            return $("<input>"); 
        } 
 
        function write(args) { 
 
            var proxy = args; 
            var record = args.data; 
            if (!args.element.closest("#gridEditForm").hasClass("e-waitingpopup")) 
                args.element.closest("#gridEditForm").ejWaitingPopup(); 
            args.element.closest("#gridEditForm").ejWaitingPopup("show") 
            $.ajax({ 
                type: "POST", 
                url: "/Default.aspx/Data2", 
                dataType: "json", 
                contentType: 'application/json; charset=utf-8', 
 
                success: function (data) { 
                    var dropData = data.d; 
                    var dropData = data.d; 
                    args.element.ejAutocomplete({ 
                        width: "100%", dataSource: dropData, emptyResultText: 'No hay sugerencias', enableAutoFill: false, highlightSearch: true, allowFiltering: true, filterType: "Contains", fields: { text: "text", key: "value" },  
,value: proxy.rowdata.CustomerID , watermarkText: "Select Product Code" 
                    }); 
 
                } 
  
            }); 
                                                  
 
        } 
                                                    
        function read(args) { 
 
            args.ejAutocomplete('suggestionList').css('display', 'none'); 
            return args.ejAutocomplete("getValue"); 
        } 
        
</script> 


In your code example you doesn’t define EditTemplate property for strCarrierId column. Please ensure to follow the steps in demo Link.  We need some more additional information to achieve your requirement. Share us the following details. 

  1. Do you want to hide intCarrierId from the user but need that value as autoComplete.
  2. We are unclear about your requirement. Do you want that field value on autoComplete?
  3. Share screenshot if any script Error occurs.

Regards, 
Farveen sulthana T 


Alfonso
Replied On August 17, 2019 07:22 PM UTC

Good day.

Thankfully for your support than given to me, the first point works very fine. And now i have issues with the autocomplete as i wich explain on image.


1.- The autocomplete not filled correctly.
2.- This column is that want i fill together with autocomplete column, normally stay hidden to user.
3.-They are the results for the events cached using console.log() than the array binded used un behind code and the datasource than fill on memory and not on Grid (see point 1).


The code send me the autocomplete not works in my proyect, but i made necessary adaptaptions so that it works.
I send the code for you review.

Thanks for your support.

Attachment: VisitPool_7971b011.7z

Manivannan Padmanaban [Syncfusion]
Replied On August 19, 2019 03:43 PM UTC

Hi Alfonso, 

Thanks for the update. 

Query 1: The autocomplete not filled correctly. 

We are able to reproduce the reported issue at our end while using the shared code example, after validating the issue we could see that you have bind the autoComplete dataSource in the autoComplete change event. To avoid the reported issue we suggest you to set the dataSource and render autoComplete in the write function itself in ajax success. Refer the below code example, 

<ej:Grid ID="grdVisitPool" ………….> 
                <DataManager URL="Default.aspx/UrlDataSource" UpdateURL="Default.aspx/URLUpdate" InsertURL="Default.aspx/UrlInsert" Adaptor="WebMethodAdaptor" /> 
………………………………. 
                <EditSettings AllowEditing="true" /> 
                <Columns> 
                    <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 
                    <ej:Column Field="ShipCity" HeaderText="Linea Transportista" AllowEditing="true" Tooltip="#colTip"> 
                        <EditTemplate Create="create" Read="read" Write="write" /> 
                    </ej:Column> 
………………………. 
                </Columns> 
            </ej:Grid> 
            <script>   
                function create() { 
                    return $("<input>"); 
                } 
 
                function write(args) { 
                    $.ajax( 
                        { 
                            type: "POST", 
………………………………………. 
                            url: 'Default.aspx/GetCarriers', 
                            dataType: 'json', 
                            success: function (data) { 
                                args.element.ejAutocomplete({ 
                                    dataSource: data.d, 
                                    width: "100%", watermarkText: "Seleccione un Transportista", emptyResultText: 'Sin sugerencias', enableDistinct: true, 
                                    highlightSearch: true, enableAutoFill: true 
                                }); 
                            }, 
                        }); 
 
                } 
                function read(args) { 
                    args.ejAutocomplete('suggestionList').css('display', 'none'); 
                    return args.ejAutocomplete("getValue"); 
                } 
…………………… 
            </script> 

Query 2: This column is that want i fill together with autocomplete column, normally stay hidden to user. 

From the above query, we are able to understand that you want to update the intCarrierLineId field value while updating the autocomplete field. Set the allowEditing as “true”  for the field which you want to update along with autocomplete update and using actionComplete event we can disable editing of the particular column.  
we have achieved your requirement kindly refer the below code example, 


<ej:Grid ID="grdVisitPool" ClientIDMode="Static" runat='server' AllowSorting="true" AllowPaging="true" Locale="es-ES" AllowScrolling="true"> 
                ………………………….. 
                <ClientSideEvents ActionComplete="onActionComplete" ActionBegin="onActionBegin" QueryCellInfo="queryCellInfo" /> 
                <ScrollSettings Height="auto" Width="auto" EnableTouchScroll="true" /> 
                <EditSettings AllowEditing="true" /> 
                <Columns> 
                    <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 
                    <ej:Column Field="ShipCity" HeaderText="Linea Transportista" AllowEditing="true" Tooltip="#colTip"> 
                        <EditTemplate Create="create" Read="read" Write="write" /> 
                    </ej:Column> 
                    <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" AllowEditing="true" Width="75" /> 
……………………………….. 
                </Columns> 
            </ej:Grid> 
            <script>   
……………………………. 
                function onActionComplete(args) { 
                    if (args.requestType == "beginedit") { 
                        $("#<%= grdVisitPool.ClientID %>EmployeeID").addClass("e-disable"); // add the disable class. 
                        $("#<%= grdVisitPool.ClientID %>EmployeeID").attr("disabled", true) // set the disabled property as true. 
                    } 
                } 
 
                function onActionBegin(args) { 
                    if (args.requestType == "save") { 
                        if (args.rowData.ShipCity == "Berlin") { // check the autoComplete field data here. 
                            args.rowData.EmployeeID = 34; // based on the autoComplete field data set the desire value for another column here. 
                        } 
                    } 
                } 
            </script> 



If you have facing any issues, while implementing the above solutions kindly get back to us with the below details. 

  1. Reproduce the issue in the shared sample and revert back to us Or share the issue reproducible sample.

Regards, 
Manivannan Padmanaban.  


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