Grid editmode classic

[steve mangelschots]

Hi

I've added an add, edit, delete button to my grid.

Is it possible to let the grid editmode to work like a

Url.Action so that I can go to a view just like the basic mvc.

                     

.EditSettings(edit =>

{

edit.AllowDeleting().AllowEditing().AllowAdding().EditMode(?);

})

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Delete);

items.AddTool(ToolBarItems.Edit);

});

})

[Ragavee U S]

Hi Steve

 

Thanks for your interest in Syncfusion products.

 

We have analyzed your requirement and we don’t have inbuilt support to achieve your requirement. But we can achieve it using the ToolbarClick event of the grid. Please refer the below code snippet.

 

[MVC]

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

        .EditSettings(edit => { edit.AllowDeleting().AllowEditing().AllowAdding().AllowEditOnDblClick(false); })

        .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items =>

              {

              items.AddTool(ToolBarItems.Add);

              items.AddTool(ToolBarItems.Edit);

              items.AddTool(ToolBarItems.Delete);

              });

        })

        . . . .

        .ClientSideEvents(eve => eve.ToolbarClick("toolbarClick"))

)

 

[JavaScript]

<script type="text/javascript">   

    function toolbarClick(args) {   

//in the toolbarClick event checking the name of the icon clicked and performing actions accordingly   

        switch (args.itemName) {

            case "Edit": //if the name of the icon clicked is edit

                args.cancel = true; //cancelling the default action and overriding

                if (args.model.selectedRowIndex == -1)

                    alert("No records selected to perform edit operation");//if no record is selected warning message is thrown

                else {

                    var ord = args.model.currentViewData[args.model.selectedRowIndex].OrderID; //get the primary key value of the record selected 

//args.model.currentViewData[args.model.selectedRowIndex] is used to get the details of the selected record/row               

                    location.rel='nofollow' href = '/Home/Edit/?orderID=' + ord//pass the primary key value to the controller action

                }

                break;

            case "Add"://if the name of the icon clicked is add

                args.cancel = true; //cancelling the default action and overriding

                location.rel='nofollow' href = '/Home/Add'; //triggering the controller action Add

                break;            

        }

    }

</script>

 

[CS]

public ActionResult Edit(int orderID) //the passed parameter from the view code is obtained

        {

            var data = new NorthwindDataContext().OrdersViews.Where(e => e.OrderID == orderID).FirstOrDefault();//getting the record values corresponding to the record selected using the primary key.

            return View(data);   //pass the JSON object to perform model binding       

        }

public ActionResult Add()

        {

//code snippet for add query

            return View();

        }

 

In the above code snippet, we have cancelled the default edit and add operation on ToolbarClick event of the grid and thus have performed custom operation by using location.rel='nofollow' href. On editing, we have passed the OrderID value to the controller action and have filtered the data and thus use it in the corresponding view page.

 

Please get back to us if you need any further assistance.

 

Regards

Ragavee U S