Kendo Grid - Window template button with update functionality

Question

Right now I am using a window to view details that are not shown in the grid. I have made my own custom editor in the window as well which hides the details and replaces them with inputs.

Unfortunately I cannot get the Update button to have the same functionality as an update button in the kendo toolbar.

I am using transport and parameter map for my create which works perfectly. I just need to be able to hit the update, which I haven't been able to.

Here is a snippet of code for the template:

<li><b>Change Control Objective</b></li>
<li><textarea type="text" class="k-textbox k-input" data-bind="value:ChangeControlObjective">#= ChangeControlObjective #</textarea></li>
<li><b>Change Control Specifics</b></li>
<li><textarea type="text" class="k-textbox k-input" data-bind="value:ChangeControlSpecifics">#= ChangeControlSpecifics #</textarea></li> 
<a href="\\#" class="k-button k-button-icontext k-grid-update"><span class="k-update k-icon k-i-tick"></span>Save</a>

I can't show my JS code but it is based off this dojo: http://dojo.telerik.com/abUHI

UPDATE:

I am able to hit the update in the parametermap off of my save button click but it's sending the old data to the update instead of the new. Here is the button click code:

 $("#saveChanges").click(function () {
        dataItem.dirty = true;
       $("#ccrGrid").data('kendoGrid').saveChanges();
    });

Each input has a data-bind attribute and the parametermap looks like this:

case "update":
                        var changeControlRequestId = options.ChangeControlRequestID;
                        var changeControlObjective = options.ChangeControlObjective;
                        var changeControlSpecifics = options.ChangeControlSpecifics;
                        var productAssociation;
                        if (options.AccountChangeInfo.ProductAssocation == undefined) {
                            productAssociation = "";
                        } else { productAssociation = options.ProductAssocation; }
                        var amortization;
                        if (options.AccountChangeInfo.Amortization == undefined) {
                            amortization = "";
                        } else { amortization = options.Amortization; }
                        var productType;
                        if (options.ProductChangeInfo.ProductType == undefined) {
                            productType = "";
                        } else { productType = options.ProductType; }
                        var productName;
                        if (options.ProductChangeInfo.ProductName == undefined) {
                            productName = "";
                        } else { productName = options.ProductName; }
                        var productDescription;
                        if (options.ProductChangeInfo.ProductDescription == undefined) {
                            productDescription = "";
                        } else { productDescription = options.ProductDescription; }
                        var productContract;
                        if (options.ProductChangeInfo.ProductContractualFeatures == undefined) {
                            productContract = "";
                        } else { productContract = options.ProductContractualFeatures; }
                        var productBehavior;
                        if (options.ProductChangeInfo.ProductBehavioralAssumptions == undefined) {
                            productBehavior = "";
                        } else { productBehavior = options.ProductBehavioralAssumptions; }
                        var evaluationBehavior;
                        if (options.ProductChangeInfo.ProductEvaluationBehavior == undefined) {
                            evaluationBehavior = "";
                        } else { evaluationBehavior = options.ProductEvaluationBehavior; }
                        var productStratification;
                        if (options.ProductChangeInfo.ProductStratificationRoutines == undefined) {
                            productStratification = "";
                        } else { productStratification = options.ProductStratificationRoutines; }
                        if (content.isreadonly == "True") {
                            alert("you have readonly access");
                        }
                        else {
                            var urlString = "env=" + content.env + "&allyid=" + content.userId + "&changeRequestID" + changeRequestID + "&changeControlObjective=" + changeControlObjective + "&changeControlSpecifics=" + changeControlSpecifics +
                                               "&productAssociation" + productAssociation + "&amortization" + amortization +
                                               "&productType" + productType + "&productName" + productName + "&productDescription" + productDescription +
                                               "&productContract" + productContract + "&productBehavior" + productBehavior + "&evaluationBehavior" + evaluationBehavior +
                                               "&productStratification" + productStratification;
                            return urlString;

Turo Turo · Accepted Answer · 2016-12-07T23:33:07

I've been going through this a couple months ago. Per my extensive research there are 2 key sources for doing custom popup editing in Kendo in entire Internet ;) :

Custom editor template I aslo created a simplified version of this for you here: http://jsbin.com/qudotag/ to cut the elements which can be expanded once you grap the key concepts. Note that this does not work fully as changes are not persisted. It is expected behaviour, as you would need to define the CRUD operations for the grid (what happens when save, cancel etc. is done).

How to deal with CRUD is available in the second source: Crud with external form

Some heavy studying of these 2 along with going into some more depths of MVVM (which might be intimidating at first, but then really useful for much smoother work with Kendo) will get you going.

Edit: actually you could do with just first approach, which is easier and retain the state by refreshing the grid after cancel.

Kendo Grid - Window template button with update functionality

1 Answers