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

Grid doesn't trigger save when only timepicker field is edited in dialog template mode

Hi,

I've configured a grid to display a dialog template while editing the values and I've a field that uses ej timepicker. When i edit the time picker field and save it, the save method is not triggered but it gets triggered when the time picker value is edited along with other fields.

Code:

function actionComplete(args) {
            if (args.requestType === "add") {
                //Initialize Time Picker
                $("#DisplayTime").ejTimePicker({ timeFormat: "hh:mm tt" });

                //Set Current Time
                $("#DisplayTime").data("ejTimePicker").setCurrentTime();

            } else if ((args.requestType === "beginedit" && args.model.editSettings.editMode === "dialogtemplate")) {
                const selectedRecord = this.getSelectedRecords()[0];

                //Initialize Time Picker
                $("#DisplayTime").ejTimePicker({ timeFormat: "hh:mm tt", value: selectedRecord.DisplayTime });

            }
}

Also, please let me know if i can use two field names for the dialog template title while editing.

.EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#editTemplate").TitleColumn("Name");  // Can i use Name and DisplayTime Here?

Thanks,
Ajay

7 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team April 24, 2017 03:02 PM UTC

Hi Ajay, 

Thanks for contacting Syncfusion support. 

Before we proceed with your query, we need some clarifications. 

1. In this you have mentioned that save method is not triggered while edit the timepicker and save it. Here, are you mentioning server-side is not triggered while edit the timepicker? 

2. Share the type of adaptor that you are using in your sample(URL, remoteSave, webapi etc.,) 

3. Share the code example of a Grid. 

4. Essential Studio Version details.  

Regards, 
Prasanna Kumar N.S.V 



AJ Ajay April 24, 2017 07:52 PM UTC

Hi,

1. In this you have mentioned that save method is not triggered while edit the timepicker and save it. Here, are you mentioning server-side is not triggered while edit the timepicker? 

Yes, that's correct. If i edit only the timepicker value server side is not getting triggered.

2. Share the type of adaptor that you are using in your sample(URL, remoteSave, webapi etc.,) 

We are using RemoteSaveAdaptor

3. Share the code example of a Grid. 

@{ Html.EJ().Grid<InstAlertsModel>("Grid")
                    .Datasource(ds => ds.Json((IEnumerable<Model>)ViewBag.DataSource)
                        .InsertURL(Url.Action("Insert", "Controller"))
                        .UpdateURL(Url.Action("Update", "Controller"))
                        .RemoveURL(Url.Action("Delete", "Controller"))
                        .Adaptor(AdaptorType.RemoteSaveAdaptor)
                    )
                    .Mappers(map => map.ExportToExcelAction(Url.Action("ExportToExcel")))
                    .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowDeleting().ShowDeleteConfirmDialog(true).EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#editTemplate").TitleColumn("Name"); })
                    .Locale("en-IN")
                    .Columns(col =>
                    {
                        col.Field("Id").IsPrimaryKey(true).Visible(false).Add();                        
                        col.Field("Name").HeaderText("Recipient Name").ValidationRules(v => v.AddRule("required", true)).Add();                     
                        col.Field("DisplayTime").HeaderText("Schedule").Format("{0:hh:mm tt}").ValidationRules(v => v.AddRule("required", true)).Add();                       
                    })
                    .ToolbarSettings(toolbar =>
                    {
                        toolbar.ShowToolbar().ToolbarItems(items =>
                        {
                            items.AddTool(ToolBarItems.Search);
                            items.AddTool(ToolBarItems.Add);
                            items.AddTool(ToolBarItems.Edit);
                            items.AddTool(ToolBarItems.Delete);
                            items.AddTool(ToolBarItems.PrintGrid);
                            items.AddTool(ToolBarItems.ExcelExport);
                        });
                    })
                    .ScrollSettings(col => { col.Width("auto").Height(405); })
                    .FilterSettings(fltr => fltr.FilterType(FilterType.Excel))
                    .PageSettings(page => page.PrintMode(PrintMode.CurrentPage))
                    .ClientSideEvents(eve => { eve.ActionBegin("actionBegin").EndEdit("endEdit").EndAdd("endAdd").ActionComplete("actionComplete"); })
                    .AllowResizeToFit(true)
                    .AllowMultiSorting()
                    .AllowFiltering()
                    .AllowScrolling()
                    .AllowGrouping()
                    .AllowResizing()
                    .AllowSorting()
                    .AllowPaging()
                    .Render();
        }

4. Essential Studio Version details.  

15.1.0.41

Thanks,
Ajay


PK Prasanna Kumar Viswanathan Syncfusion Team April 25, 2017 09:49 AM UTC

Hi Ajay, 

We can reproduce the mentioned issue in our sample with the attached code example. We have confirmed the issue “Server side is not triggered while edit the timepicker value” is a defect and logged a defect report. The fix for this issue is estimated to be available on 2nd  May, 2017 and it will be included in our Volume 2, Service Pack 1 2017 which has been scheduled to be rolled out at the end of May 2017. 
As a workaround we suggest you to enable the this._isEditChangesApplied in the actionBegin event of ejGrid with the condition of requestType as save.  
Find the code example:  
 
@(Html.EJ().Grid<object>("FlatGrid") 
    .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.DataSource) 
          .InsertURL(Url.Action("Insert", "Grid")) 
          .UpdateURL(Url.Action("Update", "Grid")) 
          .RemoveURL(Url.Action("Delete", "Grid")) 
          .Adaptor(AdaptorType.RemoteSaveAdaptor) 
    ) 
      
   .ClientSideEvents(eve => { eve.ActionBegin("actionBegin").EndEdit("endEdit").EndAdd("endAdd").ActionComplete("actionComplete"); }) 
    ----------------------- 
   .Columns(col => 
    { 
      col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
      col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
      col.Field("OrderDate").HeaderText("Order Date").Format("{0:hh:mm tt}").Width(80).Add(); 
    })) 
 
    <script type="text/javascript"> 
        function actionBegin(args) { 
            if (args.requestType == "save") { 
                this._isEditChangesApplied = true; 
            } 
        } 
        function actionComplete(args) { 
            if (args.requestType === "add") { 
                //Initialize Time Picker 
                $("#DisplayTime").ejTimePicker({ timeFormat: "hh:mm tt" }); 
 
                //Set Current Time 
                $("#DisplayTime").data("ejTimePicker").setCurrentTime(); 
 
            } else if ((args.requestType === "beginedit" && args.model.editSettings.editMode === "dialogtemplate")) { 
                const selectedRecord = this.getSelectedRecords()[0]; 
 
                //Initialize Time Picker 
                $("#DisplayTime").ejTimePicker({ timeFormat: "hh:mm tt", value: selectedRecord.DisplayTime, width: "100%" }); 
 
            } 
        } 
</script> 
    <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
            <tr> 
                ------------------------------- 
               <td style="text-align: right;"> 
                    OrderDate 
                </td> 
                <td style="text-align: left"> 
                    <input id="DisplayTime" name="OrderDate"  /> 
                </td> 
            </tr> 
        </table> 
    </script> 
 
 
Regards, 
Prasanna Kumar N.S.V 



AJ Ajay replied to Prasanna Kumar Viswanathan May 5, 2017 07:06 AM UTC

Hi Ajay, 

We can reproduce the mentioned issue in our sample with the attached code example. We have confirmed the issue “Server side is not triggered while edit the timepicker value” is a defect and logged a defect report. The fix for this issue is estimated to be available on 2nd  May, 2017 and it will be included in our Volume 2, Service Pack 1 2017 which has been scheduled to be rolled out at the end of May 2017. 
As a workaround we suggest you to enable the this._isEditChangesApplied in the actionBegin event of ejGrid with the condition of requestType as save.  
Find the code example:  
 
@(Html.EJ().Grid<object>("FlatGrid") 
    .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.DataSource) 
          .InsertURL(Url.Action("Insert", "Grid")) 
          .UpdateURL(Url.Action("Update", "Grid")) 
          .RemoveURL(Url.Action("Delete", "Grid")) 
          .Adaptor(AdaptorType.RemoteSaveAdaptor) 
    ) 
      
   .ClientSideEvents(eve => { eve.ActionBegin("actionBegin").EndEdit("endEdit").EndAdd("endAdd").ActionComplete("actionComplete"); }) 
    ----------------------- 
   .Columns(col => 
    { 
      col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
      col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
      col.Field("OrderDate").HeaderText("Order Date").Format("{0:hh:mm tt}").Width(80).Add(); 
    })) 
 
    <script type="text/javascript"> 
        function actionBegin(args) { 
            if (args.requestType == "save") { 
                this._isEditChangesApplied = true; 
            } 
        } 
        function actionComplete(args) { 
            if (args.requestType === "add") { 
                //Initialize Time Picker 
                $("#DisplayTime").ejTimePicker({ timeFormat: "hh:mm tt" }); 
 
                //Set Current Time 
                $("#DisplayTime").data("ejTimePicker").setCurrentTime(); 
 
            } else if ((args.requestType === "beginedit" && args.model.editSettings.editMode === "dialogtemplate")) { 
                const selectedRecord = this.getSelectedRecords()[0]; 
 
                //Initialize Time Picker 
                $("#DisplayTime").ejTimePicker({ timeFormat: "hh:mm tt", value: selectedRecord.DisplayTime, width: "100%" }); 
 
            } 
        } 
</script> 
    <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
            <tr> 
                ------------------------------- 
               <td style="text-align: right;"> 
                    OrderDate 
                </td> 
                <td style="text-align: left"> 
                    <input id="DisplayTime" name="OrderDate"  /> 
                </td> 
            </tr> 
        </table> 
    </script> 
 
 
Regards, 
Prasanna Kumar N.S.V 


Hi,

Is it possible to include it in Volume 2 release?

Thanks,
Ajay.


PK Prasanna Kumar Viswanathan Syncfusion Team May 8, 2017 08:28 AM UTC

Hi Ajay,
We regret for the inconvenience. 
The mentioned issue will not be included in Volume 2, 2017. We will provide a patch in the mentioned version if you need the solution sooner. 
Regards,
Prasanna Kumar N.S.V



AJ Ajay May 8, 2017 06:20 PM UTC

Hi,

I will wait till the service pack release. Btw, may i know if volume 2 release is being delayed?

Thanks,
Ajay.


PK Prasanna Kumar Viswanathan Syncfusion Team May 9, 2017 12:29 PM UTC

Hi Ajay,
 
We are glad to announce that our Essential Studio 2017 Volume 2 Release v15.2.0.40 is rolled out and is available for download under the following link.
 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.
 
Regards,
Prasanna Kumar N.S.V


Loader.
Up arrow icon