How to rebind datasource from server without page redirect?

[Emil]

I cant figure out how to rebind the data clicking custom toolbar item from the server without having a redirect. below is how my grid looks like. 

So I created a customer toolbar button as below. I want to get the data from controller when button is clicked and button text changed at the same time? is it possible?

@(Html.EJ().Grid<.Models.Db.FeedBack>("Grid")

                                            .Datasource((IEnumerable<.Models.Db.FeedBack>)Model)

                                       .Datasource(dataSource => dataSource.Json((IEnumerable<.Models.Db.FeedBack>

            )Model).UpdateURL("/FeedBacks/Edit")

            .InsertURL("/FeedBacks/Create").RemoveURL("/FeedBacks/Delete").Adaptor(AdaptorType.RemoteSaveAdaptor))

            .AllowSorting()

            .AllowFiltering()

            .AllowResizeToFit()

            .AllowResizing()

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

            .ToolbarSettings(toolbar =>

            {

                toolbar.ShowToolbar().ToolbarItems(items =>

                {

                    items.AddTool(ToolBarItems.Add);

                    items.AddTool(ToolBarItems.Edit);

                    items.AddTool(ToolBarItems.Delete);

                    items.AddTool(ToolBarItems.Update);

                    items.AddTool(ToolBarItems.Cancel);

                }).CustomToolbarItems(new List<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Details" } });

            }).ClientSideEvents(eve => eve.Create("create").ToolbarClick("ToolBarClick"))

            .Columns(col =>

            {

                col.Field("id").HeaderText("ID").Width(50).IsPrimaryKey(true).Add();            

                col.Field("Text").HeaderText("Text").ValidationRules(v => v.AddRule("required", true)).Add();              

                col.Field("IsCompleted").HeaderText("Done").EditType(EditingType.BooleanEdit).Width(70).Add();               

            })

)

<script type="text/x-jsrender" id="Details">

   

    <button class="btn btn-info" type="button" id="showopen"

                onclick="location.rel='nofollow' href='@Url.Action("ShowOpen", "FeedBacks")'">

            Show Open

        </button>

</script>

 

[Vignesh Natarajan]

Hi Emil, 

 

Thanks for contacting Syncfusion support. We are happy to assist you. 

 

Query : How to rebind datasource from server without page redirect? 

 

From your query, we understand that you need to update the dataSource of Grid on button click in the toolbar. We have achieved your requirement by sending AJAX from client to server side and retrieve the data from server side and update the dataSource using DataSource method of ejGrid and changed the button text. 

 

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

               …………………. 

                    .ToolbarSettings(toolbar => 

                    { 

                        toolbar.ShowToolbar().ToolbarItems(items => 

                        { 

                              ……….. 

                        }).CustomToolbarItems(new List<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Details" } }); 

 

 

                    }).ClientSideEvents(eve => eve.Create("create").ToolbarClick("ToolBarClick")) 

                    .Columns(col => 

                    { 

                        ………….. 

                   }) 

 

) 

 

 

<script> 

 

    function ToolBarClick(args) { 

        if (args.itemName == "Details") { 

            $.ajax({ 

                type: "POST", 

                url: "/Grid/GetData", 

                datatype: "json", 

                contentType: "application/json; charset=utf-8", 

                success: function (data) { 

                    var gridObj = $("#Grid").ejGrid('instance'); // create grid instance using grid ID 

                    gridObj.dataSource(data); 

                   $("#showopen").html('Updated'); // Use button ID here. 

                    alert("data source refreshed and button text changed")                }, 

            }); 

 

        } 

    } 

</script> 

<script type="text/x-jsrender" id="Details"> 

 

    <button class="btn btn-info" type="button" id="showopen"> 

        Show Open 

    </button> 

</script> 

 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Exportinginmvc683443571.zip  

  

Refer our help documentation for you reference 

 

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

 

Regards, 

Vignesh Natarajan