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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add other controls in edit dialog as a template

Thread ID:

Created:

Updated:

Platform:

Replies:

131305 Jul 4,2017 02:44 AM UTC Jul 10,2017 08:40 AM UTC ASP.NET MVC 5
loading
Tags: Gantt
Jacob
Asked On July 4, 2017 02:44 AM UTC

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 [Syncfusion]
Replied On July 4, 2017 12:55 PM UTC

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>  


 
KanbanFeature.cs  
 
<script id="template" style="display: none" type="text/template">  
  
    <table cellspacing="10" style="border-spacing: 11px;">  
        <tr>  
            <td style="text-align: right;">  
                Id  
            </td>  
            <td style="text-align: left">  
                <input id="Id" name="Id" value="{{: Id}}" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 175px; height: 28px"disabled="disabled" />  
            </td>  
            <td style="text-align: right;">  
                Status  
            </td>  
            <td style="text-align: left">  
                <select id="Status" name="Status">  
                    <option value="Close">Close</option>  
                    <option value="InProgress">InProgress</option>  
                    <option value="Open">Open</option>  
                    <option value="Testing">Testing</option>  
                </select>  
            </td>  
        </tr>  
        <tr>  
            <td style="text-align: right;">  
                Estimate  
            </td>  
            <td style="text-align: left">  
                <input type="text" id="Estimate" name="Estimate" value="{{:Estimate}}"/>  
            </td>  
            <td style="text-align: right;">  
                Assignee  
            </td>  
            <td style="text-align: left">  
                <select id="Assignee" name="Assignee">  
                    <option value="Nancy Davloio">Nancy Davloio</option>  
                    <option value="Andrew Fuller">Andrew Fuller</option>  
                    <option value="Janet Leverling">Janet Leverling</option>  
                    <option value="Margaret hamilt">Margaret hamilt</option>  
                    <option value="Steven walker">Steven walker</option>  
                    <option value="Michael Suyama">Michael Suyama</option>  
                    <option value="Robert King">Robert King</option>  
                    <option value="Laura Callahan">Laura Callahan</option>  
                </select>  
            </td>  
        </tr>  
        <tr>  
            <td style="text-align: right;">  
                Tags  
            </td>  
            <td style="text-align: left">  
                <input id="Tags" name="Tags" value="{{: Tags}}" class="e-field e-ejinputtext valid" style="width: 175px; height: 28px" />  
            </td>  
            <td style="text-align: right;">  
                Priority  
            </td>  
            <td style="text-align: left">  
                <select id="Priority" name="Priority">  
                    <option value="Low">Low</option>  
                    <option value="High">High</option>  
                    <option value="Critical">Critical</option>  
                    <option value="Normal">Normal</option>  
                    <option value="Release Breaker">Release Breaker</option>  
                </select>  
            </td>  
        </tr>  
        <tr>  
            <td style="text-align: right;">  
                Summary  
            </td>  
            <td style="text-align: left">  
                <textarea id="Summary" name="Summary" class="e-ejinputtext" value="{{:Summary}}" style="width: 270px; height: 95px">{{: Summary}}</textarea>  
            </td>  
        </tr>  
    </table>  
  
</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
Replied On July 5, 2017 06:38 AM UTC

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 [Syncfusion]
Replied On July 6, 2017 12:52 PM UTC

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
Replied On July 7, 2017 10:08 AM UTC

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 [Syncfusion]
Replied On July 10, 2017 08:40 AM UTC

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


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

or the page will be automatically redirected to 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

;