Change Kendo Grid Cell With Ajax Response When Another Cell Changes

2 posts, 0 answers
  1. Tommy
    Tommy avatar
    1 posts
    Member since:
    Sep 2016

    Posted 05 Sep Link to this post

    Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data, I want to update the second column with the data returned but I'm not having any luck and I'm not sure if this is the correct approach.  The only examples I've seen only show changing another column with client side data, not data returned from the server.  Here's what I have so far:

     

            $("#manualStatsGrid").kendoGrid({
                dataSource: this.GetManualStatisticsDataSource(),
                sortable: true,
                pageable: false,
                filterable: true,
                toolbar: ["create"],
                editable: "inline",
                messages: {
                    commands: {
                        create: "Add New Statistic"
                    }
                },
                edit: function (e) {
                    var _this = _manualStats;
                    var input = e.container.find(".k-input");

                    var value = input.val();                

                    input.keyup(function(){
                        value = input.val();
                    });                

                    $("[name='Statistic']", e.container).blur(function(){
                        var input = $(this);
                        $("#log").html(input.attr('name') + " blurred " + value);
                        
                        //valid the GL account number
                        $.ajax({
                            type: "GET",
                            url: _this.ValidateGlUrl,
                            dataType: 'json',
                            data: { glNumber: value },
                            success: function (response) {
                                var newDescription = response.Data.description;
                                console.log(newDescription);
                                //change description column here?
                            },
                            error: function (response) {
                                console.log(response);
                            }
                        });


                    });
                },
                columns: [
                    { field: "Statistic" },
                    { field: "Description" },
                    { field: "Instructions" },
                    { command: ["edit", "destroy"], title: " ", width: "250px"}
                ]            
            });
        }

        this.GetManualStatisticsDataSource = function () {
            var _this = _manualStats;
            var dataSource = {
                type: "json",
                transport: {
                    read: {
                        type: "POST",
                        url: _this.GetManualStatisticsUrl,
                        dataType: "json"
                    },
                    update: {
                        type: "POST",
                        url: _this.UpdateManualStatisticsUrl,
                        dataType: "json"
                    },
                    create: {
                        type: "POST",
                        url: _this.CreateManualStatisticsUrl,
                        dataType: "json"
                    },
                    destroy: {
                        type: "POST",
                        url: _this.DeleteManualStatisticsUrl,
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "Statistic",
                        fields: {                        
                            Statistic: {
                                type: "string",
                                editable: true,
                                validation: { required: true, pattern: "[0-9]{5}.[0-9]{3}", validationmessage: "Please use the following format: #####.###" }
                            },
                            Description: { editable: false },
                            Instructions: { type: "string", editable: true }
                        }
                    }
                }
                //change: function (e) {
                //    if (e.action === "itemchange" && e.field === "Statistic") {                    
                //        var statistic = e.items[0].Statistic;

                //        $.ajax({
                //            url: this.ValidateGlUrl,
                //            data: { statistic: statistic },
                //            async: true,
                //            cache: false,
                //            contentType: "application/json; charset=utf-8",
                //            type: "GET",
                //            success: function (result) {
                //                debugger;
                //                console.log(result);
                //                var model = e.items[0],
                //                    type = model.Type,
                //                    currentValue = "new description";
                //                model.Description = currentValue;
                //                $("#manualStatsGrid").find("tr[data-uid='" + model.uid + "'] td:eq(1)").text(currentValue);
                //            },
                //            error: function (xhr) {
                //                console.log(xhr.error);
                //            }
                //        });
                //    }
                //}
            }
            return dataSource;
        };

    Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data. I want to update the second column with the returned data but I'm not having any luck and I'm not even sure if this is the correct approach. I can change the second column with static data by adding a change event to my datasource of my grid, but that of course doesn't help. The only examples I can seem to find show changing another column with client side data, not data returned from the server. Here's what I have so far:

    Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data. I want to update the second column with the returned data but I'm not having any luck and I'm not even sure if this is the correct approach. I can change the second column with static data by adding a change event to my datasource of my grid, but that of course doesn't help. The only examples I can seem to find show changing another column with client side data, not data returned from the server. Here's what I have so far:

    Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data. I want to update the second column with the returned data but I'm not having any luck and I'm not even sure if this is the correct approach. I can change the second column with static data by adding a change event to my datasource of my grid, but that of course doesn't help. The only examples I can seem to find show changing another column with client side data, not data returned from the server. Here's what I have so far:

    Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data. I want to update the second column with the returned data but I'm not having any luck and I'm not even sure if this is the correct approach. I can change the second column with static data by adding a change event to my datasource of my grid, but that of course doesn't help. The only examples I can seem to find show changing another column with client side data, not data returned from the server. Here's what I have so far:

    Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data. I want to update the second column with the returned data but I'm not having any luck and I'm not even sure if this is the correct approach. I can change the second column with static data by adding a change event to my datasource of my grid, but that of course doesn't help. The only examples I can seem to find show changing another column with client side data, not data returned from the server. Here's what I have so far:

  2. Stefan
    Admin
    Stefan avatar
    273 posts

    Posted 07 Sep Link to this post

    Hello Tommy,

    I can suggest two possible approaches in this scenario:

    1) Once you have the newDescription value, use logic similar to the one used to take the value of the input in the first column, to take the instance of the element in the second column and set its value to newDescription.

    2) Create a new function in the Model's definition that makes the calculations and bind to a certain column, as shown in this Dojo example:

    http://dojo.telerik.com/ecoPU

    I hope this is helpful.

    Regards,
    Stefan
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top