how to edit a cells value when the editor is not focused on it

[steve]

I am wondering if the is a way to edit the value of a cell when the editor template is not focus on that cell while using batch editing.

For example, I have a drop-down in column A and depending on what I select from that drop-down I will send "Selection 1" to Column B's cell.
This works fine when using inline editing, but when using batch editing the value is never passed.  

Is this possible with the grid while in batch editing? If not is there a way to open the editor for the cell I want to add it to problematically?

Thanks

[steve]

Ok, I figured out how to open and close the cell and write to it. "grid.editCell" however, when when the cell closes the value is removed or not saved even though I am using " $('#DateOpened').val(newTimeCd).change();"

[Kiril Nikolov]

Hello Stephen,

The problem comes from the fact that you are not updating the model in the dataSource, so when you close the cell it returns the old value. You will need to use the closeCell() method, so you close the cell and update the model.

Regards,
Kiril Nikolov
Telerik

[steve]

I still not able to get it to work.  Can you take a look at this sample solution and tell me what I am doing wrong, please?

[steve]

I cannot get the project under the 2MB restriction.  here is the code.  I just customized a project i got off of this forum called "KendoGridWithCascadingComboBoxes" to not cascade and send the dropdowns value to the text box in the second column.

@using KendoGridWithCascadingComboBoxes.Models;
@{
    ViewBag.Title = "Home Page";
}

@(Html.Kendo().Grid<License>()
      .Name("Grid")
      .Columns(columns =>
      {
          columns.Bound(p => p.LicenseId).Width(20).Hidden().HeaderHtmlAttributes(new { @title = "License" });
          columns.Bound(p => p.CustomerId).Width(20).HeaderHtmlAttributes(new { @title = "Customer" }).Width(300);
          columns.Bound(p => p.VendorId).Width(20).HeaderHtmlAttributes(new { @title = "Vendor" }).Width(300);
          columns.Bound(p => p.ProductId).Width(20).HeaderHtmlAttributes(new { @title = "Product" }).Width(300);
          columns.Command(p => p.Edit().Text("Edit").HtmlAttributes(new { @title = "Edit" })).Width(80);
      })
      .ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { @title = "Add" }))
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Pageable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => model.Id(p => p.LicenseId))
              .Create(create => create.Action("Create", "Home").Type(HttpVerbs.Post))
              .Read(read => read.Action("Read", "Home").Type(HttpVerbs.Post))
              .Update(update => update.Action("Update", "Home").Type(HttpVerbs.Post))
          )
)

<script>
    function filterVendors() {
        return {
            customerId: $("#CustomerId").data("kendoDropDownList").value()
        };
    }

    //function filterProducts() {
    //    return {
    //        vendorId: $("#VendorId").data("kendoDropDownList").value()
    //    };
    //}
    function onClose() {
        var customerId = $("#CustomerId").data("kendoDropDownList").text();
        if (customerId != 'Customer1' || customerId != 'Customer5') {
            setDefaultTime('VendorId', 2, customerId);
        }
    }

    function setDefaultTime(cellName, cellId, dateTime) {
        var fullCellName = '#' + cellName;
        var grid = $("#Grid").data("kendoGrid");
        grid.editCell($("#Grid td:eq(" + cellId + ")"));
        $(fullCellName).val(dateTime);
        grid.closeCell($("#Grid td:eq(" + cellId + ")"));
    }
</script>

[Kiril Nikolov]

Hi Stephen,

Please check the following example, it might be helpful:

http://jsbin.com/IHeKUbu/1/edit

I am not familiar with your project, but in general a better approach will be to use the dataSource component, and edit it using the respective methods. I would suggest you to check the API reference for the dataSource, and see if you can implement this logic in your project:

http://docs.telerik.com/kendo-ui/api/framework/datasource

Regards,
Kiril Nikolov
Telerik

[steve]

Well thanks for the suggestions but I don't know enough about API I don;t want to rewrite the app just to fix this either.

I have gotten the app to work with the exception that after the cells are closed using the "grid.closeCell();" method I get "0x800a138f - JavaScript runtime error: Unable to get property 'text' of undefined or null reference" because it can not find the dropdownlist anymore.  Could this because the dropdown is using a template?

[steve]

I had to remove the keno content and dlls from the bin and obj directories to get the project under 2MB.  I am using version 2012.3.1215 in this project.  This is where I got the code from but like I said I changed it to learn more about how the grid get the value of the dropdown and effect another cell.  

Like i said it works fine the first time you select something from the dropdown.  once the close cell method is fired the "$("#CustomerDropDown").data("kendoDropDownList")" does not seem to be there any more.  If you take away the close cell it still there be the data in the cell disappears when you leave the cell.

http://www.telerik.com/forums/cascading-dropdownlist-in-grid-is-not-setting-the-proper-initial-values-in-edit-mode

[Kiril Nikolov]

Hello Stephen,

After upgrading to the latest version of Kendo UI I have tested your project and it seems to be working as expected. Please check the following screencast:

http://www.screencast.com/t/7G7kHvkx3SuH

Regards,
Kiril Nikolov
Telerik

[steve]

Does it still work when you change the value?  For me, it was only working every other time.  The first time worked as expected. It was after the edit cell closed that the dropdown was (seemed to be) lost.

[Kiril Nikolov]

Hello Stephen,

Please find the updated project attached, that will help you achieve the functionality using the Kendo UI recommended approach.

Regards,
Kiril Nikolov
Telerik

[steve]

Works like a charm.  Thank you

[steve]

I did notice once thing. this line " var data = grid.dataItem("tr:eq(5)");" seems to only get data from the first row. I was looking at the documentation to see if there was a key word for selecting a certain row but did not see one.  Is there a way to get the same row the drop down is on? like "tr(5).eq(5)"?

[Kiril Nikolov]

Hello Stephen,

The dataItem('tr:eq(5)') will return the data item that is on the fifth row of the grid, if you change the value in the eq() then it will return this exact row. Please check the following example:

http://jsbin.com/buf/1/edit

Regards,
Kiril Nikolov
Telerik

[steve]

(smacks forehead) TableRow, ok that makes sense. Now I just to find a way to determine what row I am on. Thanks

[Kiril Nikolov]

Hello Stephen,

I am glad it helped. 

In case you have any further questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik