Refreshing Telerik Grid with a button after updating the DataSource

2 Answers 150 Views
AutoComplete Grid TextBox
GORAN
Top achievements
Rank 1
Iron
GORAN asked on 02 May 2023, 08:13 PM

Hello folks

 

I got this one nearly done. I can see that it is hitting my controller in the background but the refresh just keeps spinning :)


@model myHinkleyWebApp.Models.ItemInventory <div id="table_data"><hr /><div class="row"><div class="col-12 padding-0"><h5>Check Product Availability</h5><div class="k-d-flex k-justify-content-left" style="padding-top: 54px;"><div class="k-w-100 text-left"> @{Html.RenderPartial("../Shared/EditorTemplates/Item_Search_Editor");} </div><div class="k-w-200 text-left"><input id="btnSubmit" type="submit" style="margin-left: 25px;" value="Submit" class="btn btn-outline-primary" name="submit" /></div></div> @(Html.Kendo().Grid<myHinkleyWebApp.Models.ItemInventory>() .Name("ItemInventory") .Columns(columns => { columns.Bound(p => p.Item_no); columns.Bound(p => p.Family); columns.Bound(p => p.Status); columns.Bound(p => p.DNPrice); columns.Bound(p => p.MapPrice); columns.Bound(p => p.QuantityAvailable); columns.Bound(p => p.QuantityConfirmed); columns.Bound(p => p.ConfirmedPromiseDate); //columns.Bound(p => p.inventory_id).Title("").ClientTemplate("<a href='" + Url.Action("Delete", new { id = "#=inventory_id#", m_id = "#=customer_id#" }) + "'>Delete</a>"); //columns.Command(command => command.Destroy()).Width(150); }) .ToolBar(tools => tools.Excel()) //.Editable(editable => editable.Mode(GridEditMode.InCell)) .Pageable() .Navigatable() .Sortable() //.Scrollable() .DataSource(dataSource => dataSource .Ajax() .PageSize(10) .Batch(true) .ServerOperation(false) .Events(events => events.Error("error_handler")) //.Model(model => { model.Id(p => p.inventory_id); model.Field(p => p.inventory_id).DefaultValue(Guid.Empty); model.Field(p => p.customer_id).DefaultValue(Guid.Empty); }) //.Create("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo }) //.Read("SearchItems_ByNameOrFamily", "ItemInventory", new {search_phrase = ViewBag.SearchPhrase}) //.Update("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo }) //.Destroy("Item_Destroy", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo }) ) ) </div><br /><br /></div></div><script> function error_handler(e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } } $("#btnSubmit").click(function () { var ItemInventory = $("#ItemInventory").data("kendoGrid"); $filter = new Array(); var ITEM = $("#item_no").val(); $.ajax({ type: "POST", url: "/ItemInventory/SearchItems_ByNameOrFamily", data: { search_phrase: ITEM }, dataType: "json", success: function (result) { var ds = new kendo.data.HierarchicalDataSource({ data: result }); ItemInventory.setDataSource(ds); ItemInventory.read(); ItemInventory.refresh(); } }); //ItemInventory.dataSource.read(); }); </script>

 

After I click the button the grid is just spinning here is a view of that:

So really the help I need is with this javascript here:


$("#btnSubmit").click(function () {
        var ItemInventory = $("#ItemInventory").data("kendoGrid");
       
        $filter = new Array();
        var ITEM = $("#item_no").val();

        $.ajax({
            type: "POST",
            url: "/ItemInventory/SearchItems_ByNameOrFamily",
            data: { search_phrase: ITEM },
            dataType: "json",
            success: function (result) {
                var ds = new kendo.data.HierarchicalDataSource({
                    data: result
                });

                ItemInventory.setDataSource(ds);
                ItemInventory.read(); 
                ItemInventory.refresh(); 
            }
        });   

        //ItemInventory.dataSource.read();
        
    });

To summarize I have a auto complete text box where I am entering an item. Then i want to push the button and refresh my grid which will pass the

item number and search for it and bring it back down in the grid!

Any help would be greatly appreciated!


Anyways here is my front end code here

2 Answers, 1 is accepted

Sort by
0
Accepted
GORAN
Top achievements
Rank 1
Iron
answered on 11 May 2023, 01:28 PM

The fix here is to add .Data button at the end of the code for the DataGrid AjaxCall. Here it is highlighted: 

 


    $("#btnSubmit").click(function () {
        var ItemInventory = $("#ItemInventory").data("kendoGrid");
       
        //$filter = new Array();
        var ITEM = $("#item_no").val();
        //ItemInventory.refresh();
        $.ajax({
            type: "POST",
            url: "../ItemInventory/SearchItems_ByNameOrFamily",
            data: { search_phrase: ITEM },
            dataType: "json",
            success: function (result) {
                var ds = new kendo.data.DataSource({
                    data: result.Data
                });


                ItemInventory.setDataSource(ds);
                //ItemInventory.dataSource.read();
                ItemInventory.refresh();
            }
        });

        //ItemInventory.dataSource.read();
        
        
    });

0
Eyup
Telerik team
answered on 05 May 2023, 09:29 AM

Hi Goran,

 

I have already replied to this query in your formal ticket. Let's continue our technical conversation there. Let me know if the suggested solution works properly.

 

Regards,
Eyup
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
GORAN
Top achievements
Rank 1
Iron
commented on 05 May 2023, 03:38 PM

Thanks Eyup I can post the solution once we reach it here :) 

I sent you a message back so hear from you soon! Thanks! 

Tags
AutoComplete Grid TextBox
Asked by
GORAN
Top achievements
Rank 1
Iron
Answers by
GORAN
Top achievements
Rank 1
Iron
Eyup
Telerik team
Share this question
or