MVC Grid DataSource Change Event

3 posts, 0 answers
  1. Lee
    Lee avatar
    31 posts
    Member since:
    Jun 2014

    Posted 05 Oct 2017 Link to this post

    When the field Changed is a certain field ("WelderStencil").  I want to get the value of the field and got the server to retrieve additional data.  I want to then plug the data into the next cell in the grid "WelderName".  Then tab to the next cell where the user is going to do some data entry.  This is proving extremely complex for some reason.  I was using the selectedDataItems but then realized that when adding a new row nothing is selected.  

    1) How do I get to the modified data on the DataSource Change Event

    2)  After Making a call to the Server and returning the data needed.  How do I plug it into the datasource and have it refresh immediately

    3)  Then how do I tab or set focus to the 3rd column.

    Thanks

    Lee

  2. Lee
    Lee avatar
    31 posts
    Member since:
    Jun 2014

    Posted 05 Oct 2017 Link to this post

     function gridChange(e) {
            editsMade = true;

            try {

                var fieldName = e.field;

                if (fieldName == "WelderStencil") {

                    var stencil = e.items[0].WelderStencil;

                    //Get Welder Information for Stencil
                    var url = '@Url.Action("GetWelderByStencil", "ContinuityLog", "Yes")';
                    $.post(url, { stencil: stencil },
                    function (data) {
                        if (data.Success != true) {

                            var confirmation = confirm("This Stencil does not exist.  Do you want to add a new Welder?", "Yes", "No")
                            if (confirmation) {
                                $("#new_welder_window").data("kendoWindow").center().open();
                                $("#new_welder_window").data("kendoWindow").refresh();
                            } // end of confirmation is true
                        } // End Get Welder Information
                        else {
                            e.items[0].WelderName = data.WelderName;
                         }
                    }); // end of function

                }
            }

     

    ....

    I figured it out.  Everything accept the tab.  And the WelderName isn't visible until after I tab off of the cell.  But I'm getting close.

    Thanks.  Hope this maybe helpful to someone else having similar issue.

     

  3. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 09 Oct 2017 Link to this post

    Hello, Lee,

    I'm glad that most of the requirements are completed.

    I can suggest using the edit event of the Grid to retrieve the cell index of the currently edited cell:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-closeCell

    Then once the value is set, to add the ".k-state-focused" class to the closest td element of the one retrieved on the edit event. Please have in mind that indexes have to be used, as when the Grid is refreshed the reference to the DOM element will be lost, as the DOM element will be different.

    If additional assistance is needed, please provide a fully runnable example and I will gladly assist further.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top