Create new tab-item to edit treegrid's selected row

[Kalai Sirajeddine]

Hi,

I have a treegrid contained in a Tab and I want, by clicking in a row in the grid or click the add button, create a new Tab-item containing row details in textboxes, datetimepicker,....(empty if I click on add).

Think edit can be done with beginEdit function but dont know how add could work.

To send row's details to the other Tab-item, I have to get the Id, findbyId in controller and display details in the the new Tab-item.

after saving changes the new Tab-item is closed and changes are saved in database and treegrid(without actualize). 

Save button in new Tab-item to save changes needs to be implemented in controller.

Here's my endEdit function:

function endEdit(args) {

var editedRecord = (args.requestType == "update") ? args.currentValue : args.data.item;

//This varible holds the data of the edited record. You can updated it to your remote datasource

$.ajax({

type: "POST",

url: "/Tab/Update", //Update is Server side method

data: editedRecord,

dataType: "json",

});

}

Update in controller:

[HttpPost()]

public ActionResult Update(Orders param)

{

var db = _context;

db.Entry(param).State = EntityState.Modified;

db.SaveChanges();

return Json(param);

}

Regards,

Kalai Sirajeddine

[Jayakumar Duraisamy]

Hi Kalai, 

We have prepared a sample based on your requirement. In the TreeGrid sample, we have added two button like Add, Edit and in its click action, we have created a new tab for adding and editing the TreeGrid record. 

In the Add/Edit tab, we have input elements for the TreeGrid columns. On Edit button click action, we need to select specific row then selected row values is populated on the dynamically created tab. For Add button click action, We have created tab with empty input elements. 

Once after complete the editing, we have save button on the same page and it will closed the tab then update the changes on the TreeGrid. 

We have modified your existing sample for your reference. Please find the sample location as below, 

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

Please let us know, if you require any other assistance. 

Regards, 

Jayakumar D 

[Kalai Sirajeddine]

Hi Jayakumar,

Thanks for the sample it's solving lots of issues.

I actually have some questions about the sended code:

*Couldn't found documentation about "ajax-Success" attribute in treegrid, I've understood the function but when exactly do we need to use this attribute?

*Is it possible to call "editRecord" function by directly clicking in the row?

*Instead of using buttons, is it possible to work with toolbar items? since I am already using "endEdit" and "ActionComplete" to save changes in database and I can't see clearly how to do it with this method.

Regards,

Kalai Sirajeddine

[Jayakumar Duraisamy]

Hi Kalai, 

Please find the response below. 

Query 1: Couldn't found documentation about "ajax-Success" attribute in treegrid, I've understood the function but when exactly do we need to use this attribute? 

Answer: Ajax-success method is used to return data from the server-side to validate after data has been successfully updated. It is optional and we can use it based on our requirement.

  

Query 2: Is it possible to call "editRecord" function by directly clicking in the row?

 

Answer: In TreeGrid, we have “record-double-click” event. It will be trigger, when double click on the record. By using this event, we have called dynamic edit tab method. To prevent default TreeGrid editing, we have set “allow-editing” as false in the editing settings property. 

 

<ej-tree-grid id="TreeGridContainer" 

//… 

record-double-click="editRecord"> 

<e-tree-grid-edit-settings allow-deleting="true" allow-adding="true" 

                                                   allow-editing="false" /> 

</ej-tree-grid> 

 

<script> 

function editRecord(args) {                 

                var data = args.data; 

                if (!ej.isNullOrUndefined(data)) { 

                    var tabobj = $("#tabSample").data("ejTab"); 

                    var index = tabobj.items.length; 

                    tabobj.addItem("/Tab/TabContent", "Edit", index, "", "new");                     

                } 

            } 

</script> 

 

Query 3: Instead of using buttons, is it possible to work with toolbar items? 

Answer: In TreeGrid, we have custom toolbar support to add custom toolbar items and “toolbar-click” event support is used to trigger method when click on the toolbar item. We have added “add” & “edit” custom toolbar icons instead of buttons and we have update data in the toolbar click event method. 

<ej-tree-grid id="TreeGridContainer" 

//.. 

toolbar-click="toolbarClick" 

> 

<e-tree-grid-toolbar-settings show-toolbar="true" custom-toolbar-items="ViewBag.toolbarItems"></e-tree-grid-toolbar-settings>  

</ej-tree-grid> 

 

Query 4: since I am already using "endEdit" and "ActionComplete" to save changes in database and I can't see clearly how to do it with this method. 

Answer: As TreeGrid don’t have method to update existing data, so we have manually update to the respective record and refreshing the UI using “refreshRow” method. Hence, it will not trigger endEdit method as default so we can write  db update code in the “refreshRecord” method. 

We have method called “addRow” to add record dynamically and it will trigger action-complete event as default. 

We have modified the sample as per your requirement. Please find the sample location as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample_Custom_Editing-806059359 

Please let us know, if you require any other assistance. 

Regards, 

Jayakumar D 

[Kalai Sirajeddine]

Hi,

thanks for help, you've actually gave all the codes Ive been lookin for thats saving me a lot of time.

I'll soon be testing all these tips in my project and let you know if I still need help, but for now I need to know:

Action-complete event will work and make the difference between add and delete if I use the normal toolbarItems to add the simple delete button + the custom one?

Action-complete event:

function actionComplete(args) {

                        var record = args.data;

                        if (args.requestType === 'addNewRow') {

                            //Newly Added Record is obtained here , which can be updated to database

                            addedRecord = args.addedRow;

                            $.ajax({

                                type: "POST",

                                url: "/Tab/Insert",//Add is Server side method

                                data: addedRecord,

                                dataType: "json",

                            });

                        } else if (args.requestType === 'delete') {

                            var deletedRecord = args.data.item; //This is the deleted item.

                            $.ajax({

                                type: "POST",

                                url: "/Tab/Delete",  //Delete is Server side method

                                data: deletedRecord,

                                dataType: "json",

                            });

                            if (args.data.hasChildRecords) {

                                deleteChildRecords(args.data);

                            }

                            //If deleted item has child records, we need to delete that too

                        }

                    }

Same for edit function :

                    function endEdit(args) {

                        var editedRecord = (args.requestType == "update") ? args.currentValue : args.data.item;

                        //This varible holds the data of the edited record. You can updated it to your remote datasource

                        $.ajax({

                            type: "POST",

                            url: "/Tab/Update",  //Update is Server side method

                            data: editedRecord,

                            dataType: "json",

                        });

                        var data = args.data,

                            updatedRecords = this.model.updatedRecords,

                            index = updatedRecords.indexOf(data),

                            record = updatedRecords[index],

                            Sum = data.OrderID + data.EmployeeID;

                        record.Sum = record.item.Sum = Sum;

                        this.refreshRow(index);

                    }

Thanks again for the awesome work

Regards,

Kalai Sirajeddine

[Punniyamoorthi Elangovan]

Hi Kalai, 

Thank you for your update. 

In TreeGrid, the actionComplete and endEdit client side events will be triggered separately when performing the add, edit and delete actions using built-in toolbar buttons. Do you want to use custom toolbar buttons instead of built-in buttons and want to trigger the events , can you please provide more details regarding this, so that we could provide you a better solution. 

Regards, 

Punniyamoorthi 

[Kalai Sirajeddine]

Hi Punniyamoorthi,

This time I'm not using a Tab, it's just redirection. So instead of creating a new tab item, there's no tab and buttons will just redirect me to another page to rather edit or add. Then after saving, no tab-item to close, just redirect back to grid with changes saved (database saveChange will not occur in grid ).

Actually I'm not testing this event in treegrid, I started with grid and I'm facing the DB issue:

in treegrid I used actionComplete and EndEdit, but in grid I use this:

        $("#grid").ejGrid({

            dataSource: ej.DataManager({

             json: @Html.Raw(Json.Serialize(ViewBag.datasource)),

                adaptor: "remoteSaveAdaptor",

                 updateUrl: "/Admin/Update",

                 insertUrl: "/Admin/Insert",              

                 removeUrl: "/Admin/Delete"                                          

                            }),

So to edit for example in treegrid I just added in refreshRecord(this time no refresh record because there's redirection):

var args = {data : record};

endEdit(args);

but for grid, that won't work. Could you please tell me what are the changes that I should make to call the insert,update and delete action after redirect from grid

Regards,

Kalai Sirajeddine

[Renjith Singh Rajendran]

Hi Kalai, 

We suggest you to use any one of the following two solutions to achieve your requirement. 

Solution 1 : Use URLAdaptor 

 

We suggest you to use the UrlAdaptor instead of remoteSaveAdaptor. In UrlAdaptor, link to server-side will be provided as data and so grid will fetch data from server-side mapped path.  

Please refer the code example below, 

<div id="Grid"></div> 

    $(function () { 

        $("#Grid").ejGrid({ 

            dataSource: ej.DataManager({ 

                url: "UrlDataSource", 

                updateUrl: "UrlUpdate", 

                insertUrl: "UrlInsert", 

                removeUrl: "UrlDelete", 

                adaptor: "UrlAdaptor" 

            }),             

            ... 

}); 

So after to refresh the grid with updated data in server-side DB, refreshContent method could be called. 

https://help.syncfusion.com/js/datamanager/data-adaptors#url-adaptor 

https://help.syncfusion.com/api/js/ejgrid#methods:refreshcontent 

Please refer the code example below, 

function refreshRecord(args) {   

                 . . . 

                         var obj =$("#Grid").ejGrid(”instance") 

            obj.refreshContent();    

 }  

Solution 2 : Use dataSource method of Grid 

 

If you want to use remoteSaveAdaptor, we cannot refresh the grid using “refreshContent” method since it uses local data as grid datasource. Since local data does not contain the updated values, it would not be refreshed in grid. 

So you need to use the dataSource method of Grid. You need to send a manual ajax post to server-side to retrieve the updated data from db and refresh it to grid using dataSource method 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource 

function refreshRecord(args) { 

            $.ajax({ 

                type: "post", 

                url: "UrlDataSource", 

                ... 

                success: function (data) { 

                    $("#Grid").ejGrid("dataSource", data); 

                }, 

 

            }); 

 

        } 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Kalai Sirajeddine]

Hi, 

I'm using remoteSaveAdaptor and like I said before, no need to refresh since I use redirections

I'm missing the part how can I, in the edit or add form, save changes in Db and if its an edit how to get selected row data and display them in my form

After saving changes, it will redirect back to grid so no need to use refrech method(wich was necessary while in tab content)

Also I can't really get the methods with only the code, could please send sample so I can see it working and try to do same?

Regards,

Kalai Sirajeddine

[Kalai Sirajeddine]

Hi,

"and if its an edit how to get selected row data and display them in my form"

this query was done in tab by ajax-Success="activeElement" in tab:

function activeElement(args) {                

                var index = this.items.length;

                if (this.items[index - 1].textContent == "Edit") {

                    var treeObj = $("#TreeGridContainer").data("ejTreeGrid"),

                        model = treeObj.model,

                        selectedItem = model.selectedItem;

                    var item = selectedItem.item;

                    $("#" + treeObj._id + "_TaskId").ejNumericTextbox({ value: item["TaskId"] });

                    $("#" + treeObj._id + "_TaskName").val(item.TaskName);

                    $("#" + treeObj._id + "_FilterStartDate").ejDatePicker({ value: item["FilterStartDate"] });

                    $("#" + treeObj._id + "_FilterEndDate").ejDatePicker({ value: item["FilterEndDate"] });

                    $("#" + treeObj._id + "_Progress").ejNumericTextbox({ value: item["Progress"] });

                }

            }

Since I got no more tab just redirection this method cant be used now.

Regards, 

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

Sorry for the inconvenience caused. 

We have analyzed your query (“in the edit or add form, save changes in Db and if its an edit how to get selected row data and display them in my form”) and we suspect that you want to display the record details new view page while editing and adding a record. We have created two view pages one for edit and another for adding a records. These are created based on the model class (OrderRepository in our sample). 

The sample can be downloaded from below link 

Sample: 

Refer the below code snippet 

  .ClientSideEvents(e=>e.RowSelected("rowSelected").ActionBegin("Begin").QueryCellInfo("cellInfo")) 

) 

<script type="text/javascript">    

    function Begin(args) { 

        var type = args.requestType; 

        if (type == "beginedit" || type == "add") { 

            args.cancel = true; 

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

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

            this.element.ejWaitingPopup("show"); 

            if (type == "beginedit") 

                var url = "/GridEdit/Edit?OrderID=" + OrderID; 

            else if(type == "add") 

                var url = "/GridEdit/Create";             

            location.assign(url); 

        } 

    }     

</script> 

In the new view pages button will be there for saving the edited record and creating the new records. Clicking on these button will hit the corresponding the controller (GridEditcontroller) and data are saved in database. 

Please get back to us if have any queries. 

Regards, 

Vignesh Natarajan 

[Kalai Sirajeddine]

Hi Vignesh,

You forget to send the sample so I didn't get well the sended code snippet, also:

*I see "beginedit" in the sended code but like I said before, I changed to grid now not treegrid anymore

*If it's possible, could you please like "activeElement" method from before, test if it's "add" or "edit" (both cutom toolbaritems in grid) and create only one view page filled with record details if its "edit" or empty fields if its "add".(If it can't be done two view pages would be great as well)

Thanks for help.

Regards,

Kalai Sirajeddine.

[Vignesh Natarajan]

Hi Kalai, 

Sorry for the inconvenience caused. 

Kindly download the sample from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/136462/ze/SyncfusionMvcApplication401558353974.zip  

Regards, 

Vignesh Natarajan 

[Kalai Sirajeddine]

Hi, 

there's an "also" in my message can you please answer it

Regards.

[Vignesh Natarajan]

Hi Kalai, 

 

Sorry for the inconvenience caused. 

 

Query: “I see "beginedit" in the sended code but like I said before, I changed to grid now not treegrid anymore” 

 

In EJ Grid also we have many client side events like ActionComplete,ActionBegin etc which has arguments as beginedit,save , cancel etc. So we have provided the solution for EJ Grid only. 

 

Query: “test if it's "add" or "edit" (both cutom toolbaritems in grid) and create only one view page filled with record details if its "edit" or empty fields if its "add"” 

 

 

We have achieved your requirement by passing value 0 when requestType is add and in the server side we have checked the condition to check whether the OrderID is present in the database to perform add. 

 

Refer the below code snippet 

CSHTML 

  if (type == "beginedit") 

                var url = "/GridEdit/Edit?OrderID=" + OrderID; 

            else if(type == "add") 

                var url = "/GridEdit/Edit?OrderID=" + 0;             

            location.assign(url); 

 

C# 

 

public ActionResult Edit(int OrderID, EditableOrder collection) 

        { 

            var check = OrderID; 

            var Data = OrderRepository.GetAllRecords().Where(o => o.OrderID == check);// check whehte r the new record exist in database.  

            if (Data.Count() > 0) 

            { 

                OrderRepository.Update(collection); 

                var data = OrderRepository.GetAllRecords(); 

            }  

            else 

            { 

                OrderRepository.Add(collection); 

                var data = OrderRepository.GetAllRecords();                

            } 

            return Redirect("/Grid/GridFeatures"); 

 

        } 

 

For your convenience we have modified the provided sample which can be downloaded form below link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/136462/ze/SyncfusionMvcApplication40400688709  

 

Regards, 

Vignesh Natarajan 

[Kalai Sirajeddine]

Hi Vignesh,

I'm trying to understand the project but its an mvc project and I couldn't run it.

I usually work on js or core.

Regards,

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

 

Sorry for the inconvenience caused 

 

We have modified the sample to render the Grid using JavaScript code and at the back end we have used controller page to redirect the different view page to perform editing and Addition. 

 

Refer the below code snippet 

 

$(function () { 

        $("#Grid").ejGrid({ 

            dataSource: ej.DataManager({  

                json: @Html.Raw(Json.Encode(@ViewBag.DataSource)),                

                removeUrl: "/Grid/UrlDelete",  

                adaptor: new ej.remoteSaveAdaptor() 

            }), 

            allowPaging: true, 

            actionBegin: "Begin", 

   

                     . 

                     . 

                     . 

            ] 

        }); 

    });      

</script> 

<script type="text/javascript">    

    function Begin(args) { 

        var type = args.requestType; 

        if (type == "beginedit" || type == "add") { 

            args.cancel = true; 

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

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

            this.element.ejWaitingPopup("show"); 

            if (type == "beginedit") 

                var url = "/GridEdit/Edit?OrderID=" + OrderID; 

            else if(type == "add") 

                var url = "/GridEdit/Edit?OrderID=" + 0;             

            location.assign(url); 

        } 

    }     

</script> 

Kindly download the modified sample from below link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/136462/ze/SyncfusionMvcApplication40-1615306341.zip  

 

Refer the help documentation for your reference 

 

https://help.syncfusion.com/js/grid/editing#remotesave-adaptor  

 

Regards, 

Vignesh Natarajan  

[Kalai Sirajeddine]

Hi Vignesh,

only the grid is rendered in js,

I also need to understand Edit.cshtml, but it's an mvc project and I can't run it since every file got red lines(errors)

Grid features is good but I need to know what really happen in Edit.cshtml(how to get record from grid and fill textboxes then save changes in db) 

Regards,

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

Query: “(how to get record from grid and fill textboxes then save changes in db)” 

We have analyzed your query and kindly share the following details to provide solution to your query. 

1. In MVC there is default option to show the edit form in another view page. So in Edit.cshtml, we have created the EditForm using the MVC scaffolding controller read/write actions. In Scaffolding HTML elements are rendered based on the Model Class we provide.

 

2. Do you want to show that edit form in another view or using JS code and assign values to it?.

 

3. Do you want to show the edit form using another html file with JavaScript code?

 

4. To save the file in the Db we have used MVC as the backend to perform CRUD operation. If you do not want to use MVC at back how do you want to save the values in DB?

 

5. Or do you want to use Javascript with ASP CORE?

 

6. Share more details how you want perform editing in grid. We have different mode of editing

 

Refer the UG documentation for your reference 

https://help.syncfusion.com/js/grid/editing#edit-modes  

https://help.syncfusion.com/js/grid/editing#persisting-data-in-server  

  

Regards, 

Vignesh Natarajan

[Kalai Sirajeddine]

Hi Vignesh,

I got two cshtml views: GridView.cshtml and FormView.chtml. Both contained components(grid,input,..) are made in js with core not mvc.

If I click on cutomtoolbaritem "Add" or if I doubleclik a row in my grid in GridView to edit it, I'll be sended to FormView via controller ActionResult(with record details if its edit).

Once I'm in FormView, I must fill textboxes if I clicked add, or edit textboxes if I doubleclicked before. Once clicking in save button, changes are saved(or added)in DB and I'll be redirected back to GridView. Since its a redirection and grid records are filled from DB, grid would be automatically modified.

Theres no editing in grid so no edit-mode.

I was using remoteSaveAdaptor with a normal toolbar but now add is in customtoolbar and edit replaced by doubleclick, don't know if it needs to be changed:

$(function () {

        $("#grid").ejGrid({

            dataSource: ej.DataManager({

                json: ej.parseJSON(@Html.Raw(Json.Serialize(ViewBag.datasource))),

                adaptor: "remoteSaveAdaptor",

                 updateUrl: "/Admin/Update",

                 insertUrl: "/Admin/Insert",

                 removeUrl: "/Admin/Delete"

            }),.....

Regards,

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

 

Sorry for the inconvenience caused. 

 

In the Edit.cshtml view page, we have created the input elements using the Model class EditableOrder . Based on the model class input elements are created and values are passed on to it from controller while editing.  

 

In the GridEditContoller, Edit method, we return the values in form of the EditableOrder class values. So that view page (Edit.cshtml) can get values what we return from controller.    

 

We suspect that you want to get the values from the controller and assign it to view page’s input elements. Kindly refer the below code to get the values passed form the controller to model class while editing. 

 

<form asp-action="Edit"> 

            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 

            <div class="form-group"> 

                OrderID 

                <input asp-for="OrderID" value=@Html.Raw(Json.Encode(Model.OrderID)) class="form-control" /> 

                <span asp-validation-for="OrderID" class="text-danger"></span> 

            </div> 

            <div class="form-group"> 

                CustomerID 

                <input asp-for="CustomerID" value=@Html.Raw(Json.Encode(Model.CustomerID)) class="form-control" /> 

                <span asp-validation-for="CustomerID" class="text-danger"></span> 

            </div> 

            <div class="form-group"> 

                EmployeeID 

                <input asp-for="EmployeeID" value=@Html.Raw(Json.Encode(Model.EmployeeID)) class="form-control" /> 

                <span asp-validation-for="EmployeeID" class="text-danger"></span> 

            </div> 

            <div class="form-group"> 

                ShipCity 

                <input asp-for="ShipCity" value=@Html.Raw(Json.Encode(Model.ShipCity)) class="form-control" /> 

                <span asp-validation-for="ShipCity" class="text-danger"></span> 

            </div> 

            <div class="form-group"> 

                <div class="col-md-offset-2 col-md-10"> 

                    <input type="submit" value="Save" class="btn btn-default" /> 

                </div> 

            </div> 

 

Refer the below screenshot for the output 

 

 

 

 

 

Regards, 

Vignesh Natarajan 

[Kalai Sirajeddine]

Hi Vignesh,

What you said is nearly what I intend to do, still missing the Edit method code in controller( that will send the detail record from grid to Edit.cshtml) and save button code in Edit.cshtml( that will call "GridEditContoller/Add" or "GridEditContoller/Edit" to savechanges in DB and redirect back to grid).

Can you please send me a .net Core sample containing these views so I can understand it once it run.

Regards,

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

As per your request we have prepared a sample using JavaScript code with ASP.NET core at the back end and while clicking on the Edit/Add button in toolbar another edit view page will be rendered with the values. On saving record will be updated in the dataBase. 

Kindly download the sample from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/136462/ze/WebApplication1_(3)-1389282963  

Please get back to us if you have any queries. 

Regards, 

Vignesh Natarajan  

[Kalai Sirajeddine]

Hi Vignesh,

I'm sorry but I can't get the project working, it's structure is a bit different from what I know, WebApplication1.sln is not in project file, instead I found WebApplication1.csproj.user file (changed WebApplication1.sln location still not working)

When I open the project I get "E:\source trunk EJ\Src\Syncfusion.EJ_Core.csproj : error  : file of project not found"

I can't migrate the project to 16.1.0.24 version, also there's no references to update

Regards,

Kalai Sirajeddine

[Sathyanarayanamoorthy Eswararao]

Hi Kalai, 

Sorry for the inconvenience caused. 

As per your requirement we have prepared a sample in version 16.1.0.24. Please refer the below link to download the sample. Also you need not change the location of (.sln) file you can run it from where it was. 

Sample: http://www.syncfusion.com/downloads/support/forum/136462/ze/Editing-1385119339.zip 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy  

[Kalai Sirajeddine]

Hi Sathyanarayanamoorthy,

thanks for update, I runned project and everything is working as expected. Still have last questions:

*You only put asp-action="Index" in Back to List link, but when testing it I got this error:

InvalidOperationException: The view 'Index' was not found. The following locations were searched:
/Views/GridEdit/Index.cshtml
/Views/Shared/Index.cshtml

I added asp-controller="Home" and it worked, but why /Views/Home/Index.cshtml wasn't searched?

*I didn't understand in Edit.cshtml :

@section Scripts {

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

Also [ValidateAntiForgeryToken] in controller, they seem related for me.

*Last in Edit view I got GridEdit/Edit?OrderID=.... in link, is it possible to make onlyGridEdit/Edit visible in browser?

Thanks for help, That's all I needed, will start testing it

Regards,

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

 

Thanks for the update 

 

Query1: “*You only put asp-action="Index" in Back to List link, but when testing it I got this error:” 

 

Sorry for the inconvenience caused.  

 

While clicking on the “Back to List” hyperlink, control return to the GridEditcontroller Index page. it is the default behavior of the View page action. Now we have modified the Index method of the GridEdit Controller to redirect controller to Home Index. 

 

Refer the modified code 

 

  public class GridEditController : Controller 

    { 

        // GET: GridEdit 

        public NORTHWNDContext _context; 

        public GridEditController(NORTHWNDContext context) 

        { 

            _context = context; 

        } 

        public ActionResult Index() 

        { 

           return Redirect("/Home/Index"); 

        } 

 

 

Now the control will be passed to Home Index so the Grid will rendered.  

Query2 : “I didn't understand in Edit.cshtml :@section Scripts {    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} 

} 

” 

We suspect that you need clarification why we have referred the scripts section in the Edit.cshtml file. If you have removed those scripts, form will be rendered but validation message or DataAnnotation will not be applied to form. So kindly refer those scripts.   

Query 3: “*Last in Edit view I got GridEdit/Edit?OrderID=.... in link, is it possible to make onlyGridEdit/Edit visible in browser?” 

 

We have analyzed your query and it is default behavior of the Core / MVC  view page edit using scaffolding to show the queryString in the url.  

 

Kindly refer the below link how to remove the querysting from the url in ASP core. 

 

https://stackoverflow.com/questions/13020202/passing-a-model-object-to-a-redirecttoaction-without-polluting-the-url  

https://www.codeproject.com/Questions/1036066/How-to-hide-Url-parameter-ASP-Net-MVC  

 

 

Regards, 

Vignesh Natarajan 

 

 

[Kalai Sirajeddine]

Hi Vignesh,

Thanks for help, All seems working fine so far, I checked on the form in Edit.cshtml, all componants are labels or inputs even for date field.

The date input adapted itself for this case but it's still not as good as an ej-date-picker, is there a way to replace inputs in form by syncfusion componants or is "asp-for" working only with these inputs?

Regards,

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

Query: “is there a way to replace inputs in form by syncfusion componants or is "asp-for" working only with these inputs?” 

Yes, It is possible to render the Syncfusion components into the Edit.cshtml and values can be assigned using ej-for tag.  

Refer the below code snippet 

<div class="form-group"> 

                <label asp-for="EmployeeID" class="control-label"></label> 

                <ej-numeric-text-box id="numeric" width="360" ej-for="EmployeeID"/>                

                <span asp-validation-for="EmployeeID" class="text-danger"></span> 

            </div> 

            <div class="form-group"> 

                <label asp-for="Freight" class="control-label"></label> 

                <input asp-for="Freight" class="form-control" /> 

                <span asp-validation-for="Freight" class="text-danger"></span> 

            </div> 

            <div class="form-group"> 

                <label asp-for="OrderDate" class="control-label"></label>       

                <ej-date-picker id="startDate" width="360" ej-for="OrderDate"></ej-date-picker> 

                <span asp-validation-for="OrderDate" class="text-danger"></span> 

            </div> 

Refer the below screenshot for the output 

 

Note: similarly you can render other custom editors. 

Refer the help documentation for your reference 

https://help.syncfusion.com/aspnet-core/numerictextbox/getting-started  

https://help.syncfusion.com/aspnet-core/datepicker/getting-started#datepicker-initialization  

https://help.syncfusion.com/aspnet-core/datepicker/getting-started#strongly-typed-tag-helper  

Please get back to us if you have any queries 

Regards, 

Vignesh Natarajan 

[Kalai Sirajeddine]

Hi Vignesh,

tried it and all working fine thanks.

Regards,

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

  

Thanks for the update. 

  

We are happy to hear that your query has been ressovled by our solution. 

  

Please get back to us if have further queries. 

  

Regards, 

Vignesh Natarajan 

[Kalai Sirajeddine]

Hi Vignesh,

In my DB, I have two table; option and deal; and one associative table opt_deal

When trying to edit, in deal's form I'm using an ejDropDownList containing all options:

<div class="form-group">

                    <div class="col-xs-6 col-sm-3">

                        <label asp-for="opt_deals" class="control-label">Option</label>

                    </div>

                    <div class="col-xs-6 col-sm-3">

                        <input asp-for="opt_deals" type="text" id="drop-down-list2" style="width:150px" />

                        <span asp-validation-for="opt_deals" class="text-danger"></span>

                        <script>

                            $(function () {

                        $("#drop-down-list2").ejDropDownList({

                            fields: { text: "Name", value: "Name" },

                            enableFilterSearch: true,

                            dataSource: @Html.Raw(Json.Serialize(ViewBag.option)),

                            showCheckbox: true

                                });

                            var obj = $("#drop-down-list2").data("ejDropDownList");

                            obj.option("selectedIndices", @Html.Raw(Json.Serialize(ViewBag.index)));

                            var items = obj.model.selectedItems; // get the selected items

                    });

                        </script>

                    </div>

                </div>

In this List,  selectedIndices means that opt_deal element exists (with the actual deal to edit and actual selected option in the list)

I managed to, when trying to edit a deal, have its options checked (associative table opt_deal exists).

Problem now, is when I check or uncheck options, I want these changes to be saved in a boolean list (created from "var items" I think) then sended to controller(action with the [HttpPost] and [ValidateAntiForgeryToken] annotation) where I will delete all opt_deal of the edited deal and recreate them depending on the sended list.

Regards,

Kalai Sirajeddine

[Vignesh Natarajan]

Hi Kalai, 

Sorry for the inconvenience caused.  

Before proceeding with your query we need some clarification regarding your requirement.  

1. Is Opt_deal column contains list values (ie) numbers or string  in database?

 

2. Do you want to send the selected Items (all selected) to controller to save in the database or you want to send the selected indices to the  controller and based on the indices you want to select values from datasource and update.?  Because you have updated the Selected Indices in setmodel.

  

3. Again in the database you have mentioned that you will delete all the values in database and recreate them with sended list. But from Edit view page you are sending the Indices alone you cannot get the record at controller page.. So kindly explain more clearly about your requirement. ?

 

4. Share the what issue your facing while trying to achieve mentioned behavior.

 

5. If possible try to provide the sample explaining your requirement

 

 

 

 

Regards, 

Vignesh Natarajan 

[Kalai Sirajeddine]

Hi Vignesh,

1. Opt_deal column contains only the two foreign keys and its own primary key. 

2 and 3. I added in deal a not mapped element optionList{bool selected, string text}(for checked and option name) and it's rendering with right checked options: .

<div class="form-group">

                    <div class="col-xs-6 col-sm-3">

                        <label asp-for="optionList" class="control-label">Option</label>

                    </div>

                    <div class="col-xs-6 col-sm-3">

                        <input asp-for="optionList" id="drop-down-list2" style="width:150px" />

                        <span asp-validation-for="optionList" class="text-danger"></span>

                        <script>

                            $(function () {

                        $("#drop-down-list2").ejDropDownList({

                            fields: { text: "Text", value: "Text", selected:"Selected" },

                            enableFilterSearch: true,

                            dataSource: @Html.Raw(Json.Serialize(ViewBag.optionList)),

                            showCheckbox: true

                                });

Still having only one problem, when I submit, Deal.optionList is sended empty to controller(count : 0) even if it was rendered okey in first place.

So I'm assuming that ejdropdownlist data (checked and unchecked items) is not automatically set in optionList

I can manage data once in controller, so I just need to know how to save it in optionList at first place so I don't find it empty in controller.

Regards,

Kalai Sirajeddine

[Kalai Sirajeddine]

Hi,

"it's rendering with right checked options" : this is due to the ViewBag.optionList but I should not be using it, ejdropdownlist should be synchronized with Deal.optionList attribute both while opening and submitting my form

Regards.

[Vignesh Natarajan]

Hi Kalai, 

 

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.   

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents  

 

 

Regards, 

Vignesh Natarajan