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

How to rebind datasource from server without page redirect?

Thread ID:

Created:

Updated:

Platform:

Replies:

141262 Nov 30,2018 05:00 PM UTC Dec 3,2018 10:27 AM UTC ASP.NET MVC 1
loading
Tags: Grid
Emil
Asked On November 30, 2018 05:00 PM UTC

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 [Syncfusion]
Replied On December 3, 2018 10:27 AM UTC

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 
 
  
Refer our help documentation for you reference 
 
 
Regards, 
Vignesh Natarajan 
 
 


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

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

Live Chat Icon For mobile
Live Chat Icon