Grid with autocomplete and datetimepicker null

[Alfonso]

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]

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:- 

https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

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> 

Refer to the demo Link:- https://asp.syncfusion.com/demos/web/grid/edittemplate.aspx 

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]

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]

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> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1018983110.zip  

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.