This is a migrated thread and some comments may be shown as answers.

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

15 Answers 243 Views
Grid
This is a migrated thread and some comments may be shown as answers.
steve
Top achievements
Rank 1
steve asked on 29 Jan 2014, 10:07 PM
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

15 Answers, 1 is accepted

Sort by
0
steve
Top achievements
Rank 1
answered on 30 Jan 2014, 03:58 PM
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();"
0
Kiril Nikolov
Telerik team
answered on 31 Jan 2014, 01:09 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
steve
Top achievements
Rank 1
answered on 31 Jan 2014, 04:42 PM
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?
0
steve
Top achievements
Rank 1
answered on 31 Jan 2014, 04:53 PM
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>
0
Kiril Nikolov
Telerik team
answered on 03 Feb 2014, 02:11 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
steve
Top achievements
Rank 1
answered on 03 Feb 2014, 11:27 PM
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?
0
steve
Top achievements
Rank 1
answered on 03 Feb 2014, 11:33 PM
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
0
Kiril Nikolov
Telerik team
answered on 04 Feb 2014, 12:46 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
steve
Top achievements
Rank 1
answered on 06 Feb 2014, 03:23 PM
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.
0
Accepted
Kiril Nikolov
Telerik team
answered on 07 Feb 2014, 09:23 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
steve
Top achievements
Rank 1
answered on 14 Feb 2014, 11:23 PM
Works like a charm.  Thank you
0
steve
Top achievements
Rank 1
answered on 18 Feb 2014, 08:03 PM
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)"?
0
Kiril Nikolov
Telerik team
answered on 19 Feb 2014, 08:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
steve
Top achievements
Rank 1
answered on 19 Feb 2014, 03:10 PM
(smacks forehead) TableRow, ok that makes sense. Now I just to find a way to determine what row I am on. Thanks
0
Kiril Nikolov
Telerik team
answered on 19 Feb 2014, 03:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
steve
Top achievements
Rank 1
Answers by
steve
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or