Add other controls in edit dialog as a template

[Jacob]

Hi,

First, thanks for the Tab control's solution, it's worked well.

These days I want add something in Grid, Gantt, Schedule, and Kanban details.

Yesterday, I referenced this solution:

https://www.syncfusion.com/forums/124985/add-fields-to-edit-dialog

I have use this solution add other Syncfusion controls or something plugin in datails by using EditSettings and  EditMode to import some template I made.

This demo code:

.EditSettings(edit => edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"))

In Grid controls is worked well, but in other controls it couldn't compile successful.

I know this issue is not suitable in this category but I don't know what is the correct category it should post.

I using ASP.NET MVC5 framework and Syncfusion frameworks version 15.2.0.43.

Forgive my bad english, it's not my first language.

Thanks a lot.

[Arun Palaniyandi]

Hi Jacob, 

 

Thanks for contacting Syncfusion Support.    

 

Please find the details for the Gantt, Schedule, and Kanban controls on how to use EditSettings and EditMode below. 

Gantt: 

In Gantt, we can’t import custom dialog template for add/edit operation but we can customize the fields and tabs in Add/Edit dialog by using an API’s called “AddDialogFields”, “EditDialogFields”.  

We can enable dialog editing support by set EditMode as “normal” in the EditSettings property.  

We also have “ActionBegin” client side event with some of requestType like “beforeOpenAddDialog”, ”openAddDialog”, ”beforeOpenEditDialog”, ”openEditDialog”. It will be triggered before opening the dialog box. In this event, we can get the current record and element of the dialog. So, we can also do customizations in data or elements of each field.  

Please refer following code snippet,  

@(Html.EJ().Gantt("GanttContainer")  

//…  

           .EditSettings(edit =>  

            {  

                edit.EditMode("normal");  

            }  

           .AddDialogFields(f=>  

                    {  

                        f.Field("TaskID").EditType("numericedit").Add();  

                        f.Field("TaskName").EditType("stringedit").Add();  

                        f.Field("Progresss").EditType("numericedit").Add();  

            })  

            .EditDialogFields(f =>  

                     {  

                        f.Field("TaskID").EditType("numericedit").Add();  

                        f.Field("TaskName").EditType("stringedit").Add();  

                        f.Field("Progresss").EditType("numericedit").Add();  

             })    

           .ClientSideEvents(cs =>  

                            {  

                                cs.ActionBegin("actionBegin"); // ActionBegin client side event  

                            })    

<script type="text/javascript">  

        function actionBegin(args) {  

          if(args.requestType == "beforeOpenAddDialog"){  

              // Get record data and dialog element  

           }  

        else if(args.requestType == "openAddDialog"){  

            // Get record data and each field element  

    }  

        } 

We have also prepared a MVC 5 Gantt sample in the version 15.2.0.43. Please find the sample location as below,  

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC5_GanttSample1435644213  

Schedule: 

We would like to inform that provided information is not sufficient for us to track the cause for the issue. We have prepared the sample by rendering both the Schedule and Grid inside the Tab control which can be download from the below location.  

http://www.syncfusion.com/downloads/support/forum/131305/ze/Sample-1171404704  

Kindly try the sample and if the issue persists, try to reproduce the error in a sample and revert it back to us. Or else you can share your code example/runnable sample (if possible) to proceed further.   

Kanban: 

We have created a kanban sample with editmode as dialogTemplate. Using this template support, you can edit the fields that are unbound to editItems.  Please refer to the following code.  

kanbanFeature.cs  

@(Html.EJ().Kanban("Kanban")  

   .EditSettings(edit =>  

                  {  

                      edit.AllowAdding(true)  

                          .AllowEditing(true)  

                          .EditMode(KanbanEditMode.DialogTemplate) // Dialog template  

                          .DialogTemplate("#template");  // Dialog template id  

                 })  

                  .ClientSideEvents(eve =>  

                  {  

                      eve.ActionComplete("complete"); // action complete event  

                  })  

)  

<script type="text/javascript">  

    function complete(args) {  

        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {  

            $("#Estimate").ejNumericTextbox({ value: parseFloat($("#Estimate").val()), width: "175px", height: "34px", decimalPlaces: 2 });  

            $("#Assignee").ejDropDownList({ width: '175px' });  

            $("#Status").ejDropDownList({ width: '175px' });  

            $("#Priority").ejDropDownList({ width: '175px' });  

            if (args.requestType == "beginedit" || args.requestType == "add") {  

                $("#Assignee").ejDropDownList("setSelectedValue", args.data['Assignee']);  

                $("#Priority").ejDropDownList("setSelectedValue", args.data['Priority']);  

                $("#Status").ejDropDownList("setSelectedValue", args.data['Status']);  

            }  

            $(".e-field").css({ 'width': '175px', 'text-align': 'left' });  

        }  

    }  

</script>  

Sample: http://www.syncfusion.com/downloads/support/forum/131305/ze/SyncfusionMvcApplication64_-_Copy2083495449   

UG link: https://help.syncfusion.com/aspnetmvc/kanban/editing#edit-modes   

API link: https://help.syncfusion.com/api/js/ejkanban#members:editsettings-editmode   

 

Regards, 

Arun P. 

[Jacob]

Sorry, it is a misunderstanding.

Forgive me that the information is not sufficient for your need, I will try to provide more detailed about the issue.

My requirement is to develop a partialview using Syncfusion Tab and other Syncfusion controls to combine a new pop-up page, and I want when I click the event detail, it could load that.

For example at Gantt, when the TaskDetails be clicked, it will load the Task Information as a pop-up page, and it seems like using Syncfusion Tab control.

I hope that when I click the TaskDetails, the pop-up page will load my partial view.

In other words, I want replaced the default Task Information pop-up page.

If the Syncfusion's EditSettings(or other ways) could specifying a partial view URL, I thought that could be with more elastic and I also could put more plugins or Syncfusion controls in the event details.

For example, I want add a Syncfusion Chart in event detail's pop-up page from Gantt, Schedule, Kanban, or Grid.

The Syncfusion Chart is very plentiful and multiform, if it could combine in event details, it is very useful.

Finally, the core issue is:

I want expand the Syncfusion event detail, include Gantt, Schedule, Kanban, and Grid.

What can I do that let the event's detail to load other partial view?

Or, Is there any way that I could expand the Syncfusion's default event pop-up page?

Thank you very much

Best regards

[Jayakumar Duraisamy]

Hi Jacob, 

Please find the response for each control given below. 

Grid: 

We have analyzed your query and we suspect that you would like to add chart control from partial view when editing the grid with template.   

We have also prepared a sample that can be downloaded from the below link  

Link: http://www.syncfusion.com/downloads/support/forum/131305/ze/MvcApplication66215545114  

In this sample we have rendered the chart control at the partial view page and we have shown in dialog template when we edit the grid rows.  

Refer the code example  

[Index.cshtml]  

@(Html.EJ().Grid<object>("Grid")  

        .Datasource(ds => ds.Json(ViewBag.datasource))  

        .AllowPaging()  

        .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowDeleting().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("template"); })  

        .Columns(col =>  

            {  

                ...  

            })  

            .ClientSideEvents(events => events.ActionComplete("actionComplete"))  

)  

<script>  

    function actionComplete(args) {  

        if ((args.requestType == "beginedit" || args.requestType == "add")) {  

            if (!ej.isNullOrUndefined(args.rowIndex))  

                var EmployeeID = this.model.currentViewData[args.rowIndex]["EmployeeID"];  

                 $.ajax  

                         ({  

                             url: args.requestType == "add" ? "/Home/EditPartial" : "/Home/EditPartial?EmployeeID=" + EmployeeID,  

                             type: 'GET',  

                             success: function (data) {  

                                 $("#GridEditForm").html(data);   //rendered the partial view that contains chart control  

                             }  

                         });  

        }  

    }  

</script>  

  

[_PartialPage1.cshtml]  

@model MvcApplication66.EmployeeView  

             

    <div id="template">  

        <b>Order Details</b>  

        <table cellspacing="10">  

            <tr>  

              <td style="text-align: left">  

                  @(Html.EJ().Chart("container")  

        ...  

                  )  

                </td>  

                

            </tr>  

       </table>  

    </div>  

@Html.EJ().ScriptManager()@*To render Syncfusion controls in partialview*@  

  

[HomeController.cs]  

[HttpGet]  

        public ActionResult EditPartial()  

        {  

            var DataSource = new NorthwindDataContext().EmployeeViews.ToList();  

            var id = 0;  

            Dictionary<string, string> dictionary = new Dictionary<string, string>();  

            if (Request.QueryString["EmployeeID"] != null)  

                id = int.Parse(Request.QueryString["EmployeeID"]);  

            var data = DataSource.Where(ID => ID.EmployeeID == id).SingleOrDefault();  

            return PartialView("_PartialPage1", data); //call the partial view page with model binding  

        }  

  

 

From the above code example using actionComplete event in grid we have passed an external AJAX post to render the chart control which is in the partial view page and shown it in the dialog template of grid.   

Please refer the API and UG documentation  

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

https://help.syncfusion.com/aspnetmvc/grid/editing#dialog-template-form  

Also please refer the below Syncfusion Knowledge base of how to render the control with model binding   

Link: https://www.syncfusion.com/kb/7746/how-render-ejcontrols-in-the-edit-form-template-of-the-mvc-grid  

 

Gantt: 

            In the Gantt “actionBegin” event of request type “beforeOpenEditDialog & beforeOpenAddDialog” will be trigger before open add/edit dialog with current data from its argument.  

By using this event request type, we can prevent the default dialog and open pop-up your partial view with current data values while editing. Once save a new/modifed data from the partial view, we have to construct the values getting the form into valid JSON data format.  

Later, pass the JSON data to the public methods called “addRecord & updateRecordByTask” to perform add/edit actions respectively. 

Please refer following code snippet, 

@(Html.EJ().Gantt("GanttContainer")   

//…  

.ClientSideEvents(cs =>   

    {   

      cs.ActionBegin("actionBegin"); // ActionBegin client side event   

    }) 

 

<script type="text/javascript"> 

function actionBegin(args) { 

            // Cancel the default Add/Edit dialog box 

            if (args.requestType == "beforeOpenEditDialog" || args.requestType == "beforeOpenAddDialog") 

                var data = args.data.item; 

                args.cancel = true 

        } 

// Public method for dynamically add record 

ganttObj.addRecord(data, rowPosition); 

 

//Public method for dynamically update record 

ganttObj.updateRecordByTaskId(data); 

 

Scheduler:  

            Currently there is no option to add a Syncfusion Chart in Scheduler event detail's pop-up page.  

Kanban: 

We have created Kanban sample with the chart control using partialView page.  When double click the kanban card, then chart was rendered inside the dialog template form.  Please refer to the following code.   

Index.cshtml  

  

@(Html.EJ().Kanban("Kanban")  

                      .EditSettings(edit =>  

                  {  

                      edit.AllowAdding(true)  

                          .AllowEditing(true)  

                          .EditMode(KanbanEditMode.DialogTemplate) // Specify editMode  

                          .DialogTemplate("template"); // Specify template id  

                  })  

          .ClientSideEvents(eve =>  

                  {  

                      eve.ActionComplete("actionComplete"); // Action complete event  

                  })  

)  

  

<script>  

    function actionComplete(args) {  

        if ((args.requestType == "beginedit")) {  

            if (!ej.isNullOrUndefined(args.data))  

                var CardID = args.data[this.model.fields.primaryKey]; // Get clicked card Id  

                         $.ajax  

                            ({  

                                url: "/Home/EditPartial?CardID=" + CardID, // Call EditPartial method in controller  

                                type: 'GET',  

                                success: function (data) {  

                                    $("#KanbanEditForm").html(data); // Get data from partialView page  

                                }  

                            });  

                          }  

    }  

</script>  

  

  

  

HomeController.cs  

  

[HttpGet]  

        public ActionResult EditPartial(int CardId)    

        {  

            var DataSource = new NorthwindDataContext().EmployeeViews.ToList();  

            var data = DataSource.Where(ID => ID.EmployeeID == CardId).SingleOrDefault();  // Filter Employee data using cardId  

            ViewBag.data = data;  

            return PartialView("_PartialPage1", data);  

        }  

  

  

  

_PartialPage1.cshtml  

  

         

    <div id="template">  // dialog template Id  

        <b>Order Details</b>  

        <table cellspacing="10">  

            <tr>  

              <td style="text-align: left">  

                  @(Html.EJ().Chart("container")  // Render chart control  

                           .Series(sr =>  

                              {  

                               sr.Type(SeriesType.Line).Add();  

                           })  

                          .Load("onchartload") // Load event  

                  )  

                </td>  

            </tr>  

       </table>  

    </div>  

  

<script>  

  

    function onchartload(sender) {   // Called when chart was loaded  

        if (@ViewBag.data.EmployeeID == 1){  // Based on cardID, chart data was loaded  

            var chartData = [  

                  { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, { month: 'Mar', sales: 34 },  

                  { month: 'Apr', sales: 32 }, { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },  

                  { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, { month: 'Sep', sales: 38 },  

                  { month: 'Oct', sales: 30 }, { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }];  

        }  

        ……………  

        sender.model.series[0].dataSource = chartData; // Assign data into data source  

        sender.model.series[0].xName = "month";  

        sender.model.series[0].yName = "sales";  

  

    }  

</script>  

  

 Sample: http://www.syncfusion.com/downloads/support/forum/131305/ze/MvcApplication6694600244    

Please let us know if you have any further assistance. 

Regards, 

Jayakumar D 

[Jacob]

Thanks,

I'm glad for this samples and solutions.

Now every Syncfusion controls are worked well and I already know how to change the control's event dialog pop-up page.

I'm impressed and Syncfusion teams really do a good job!

Best regards.

[Jayakumar Duraisamy]

Hi Jacob, 

We are glad that your requirement has been met. Please let us know, if you need any other assistance. 

Regards, 

Jayakumar D