using this as an example: http://demos.telerik.com/kendo-ui/grid/editing

1. how do i style editable cells so they look like they are editable? you can't tell that they are until u click on them, and if some are not, u can't tell which are and which aren't

2. how do i get rid of the up / down control for editing the "units in stock" field? (i want to get rid of the control for all numeric fields in my app)

3. how do i get notified on keystrokes, or leave of focus, or on enter, so i can immediately process all changes to the data?

4. for a cell that has been edited and then edited back to it's original value, how can i reset the red tick that indicates the value was edited? (i only want to show changed values)

thanks

Keith

Hi,

I have a hierarchy grid which is filled by a model after a post action ("search").

In the search action i filled the model "Class" which contains an array of "Student".

I checked with debugger the search action and i found out that all of the data was loaded successfully, also the inner grids data.( I actually saw the data in the view)

The problem is that after the perfect first loading - surprisingly, the "search" action repeats itself for each inner-grid separately.

My question is: how to prevent reloading  for each inner-grid?

This is my code:

@(Html.Kendo().Grid(Model.Class)
           .Name("ClassGrid")
           .Columns(column =>
           {
               column.Bound(c => c.CodeClass).ClientTemplate("<a> #=CodeClass#  -  #=ClassName#</a>");
               column.Bound(c => c.NumOfStudents);
           })
                .Sortable()
               .Groupable()
               .ClientDetailTemplateId("HierarchyRows")
               .Events(events => events.DetailInit("onDetailInit"))
               .DataSource(data => data
                   .Ajax()
                   .PageSize(15)
                   .ServerOperation(false)
           ))

<script id="HierarchyRows" type="text/kendo-tmpl">

    @(Html.Kendo().Grid<Models.Student>()

            .Name("grid_#=NumStudent#")
            .Columns(s=>
            {
                        s.Bound(b => b.Age);

                        s.Bound(b => b.FirstName);
            })
            .Pageable()
           .DataSource(data => data .Ajax()
                                           .PageSize(5)
                                           .ServerOperation(false)
          )
        .ToClientTemplate()
    )
</script>

function onDetailInit(e) {
       var gridDetail = $("#grid_" + e.data.NumStudent).data("kendoGrid");
       gridDetail.dataSource.data(e.data.Classes);
    }

I'll be glad to receive your help,
Elad.

The application allows me to assign as many people as I need to using a drowdownlist to select a user when in edit mode. The id from the selected user in the list is passed correctly. If there was no previous selected user loaded, it passes the entire object, which is why I have the following lines of code:

Above is an altered version of the code.

If I use the custom command 'unassign' outside of the tradtitional CRUD methods in the transport object, The 'edit' command stops working correctly. When trying to assign a user, it will then call the Update function twice, once with the userId (which will either contain the id or userobject selected from the dropdown), and then again with a userId of 0 (not correctly being set by the dropdown). When passing back a userId of 0, the webservice returns a 500 error. 

One of the postbacks does correctly save the data, but the treelist is not updated with the values returned. 

Why does the Update function called twice? Why does the treelist not update anytime after a 'unassign' command is executed? How do I fix this?

Hi! So I have this grid, that is a normal grid with create/update buttons and popup editing, that has a bunch of fields.

Besides these fields, there are two fields that are just for helping the user. One is a count of objects related to that row in the database for instance.

The thing is that I have a separate popup that lets me add more of these related objects, and I'd like that if I accepted the changes in that popup, the related object counter in the grid gets refreshed, for the entity that was changed only, instead of reloading all the grid's data.

Before I had editing in the grid, I simply did it by setting the count as an editable field, and setting it after editing the related objects. Since it was editable, a 'model.set("Counter", counter + 1)' refreshed the grid's HTML just fine automatically.

Now the issue is that I introducing popup editing to that grid. So now if I do "model.set(anything)", the DataSource of that grid marks the row as modified, and gets sent to the server in any sync call, or even more annoying, the counter change gets undone if I edit the row and cancel the changes in the popup editor, even if I didn't touch anything.

Is there any way to do these sort of fields that refresh the grid's HTML on change, but that aren't part of the whole DataSource<->server cycle? I'd like the DataSource to ignore the change more or less, but have the grid's cell automatically updated in the DOM.

I am using kendo.ooxml.Workbook and manually put in rows with value.  I want the font color to become red if the cell value is negative. Is it possible to do it in push row operation?  Or where should I put in this logic?  Thanks.

rows.push({
cells: [
{ value: "Net", background: "#d4d4f7" },
{ value: $scope.netActualYTD, background: "#d4d4f7", color:??????? },
{ value: $scope.netBudgetYTD, background: "#d4d4f7", color: ????? },
{ value: $scope.netVarianceYTD, background: "#d4d4f7" },
{ value: "" },
{ value: $scope.netForecastAnnual, background: "#d4d4f7" },
{ value: $scope.netBudgetAnnual, background: "#d4d4f7" },
{ value: $scope.netVarianceAnnual, background: "#d4d4f7" }
]
})

1) User manually type value in the MultiSelect control for filtering.
2) Filter, Paging On the server side perform several seconds.
3) While filtering still doing (not filtered yet) please press enter to select value.
4) When User pressed Enter issue occurs (please see attachments).

I have a grid with inline editing. Each row has few required fields - text boxes, drop downs e.t.c.
When I click on edit button the row turns to in "edit" mode. Validation is working as expected, especially if I click on "update" button.

Here is a situation. I have another custom command button "Confirm" which call javascript function onItemConfirm
columns: [
                {
                    command: [{ name: "edit", text: { edit: " ", update: " ", cancel: " " } },
                      { name: "confirmButton", text: " ", template: "<a class='k-button k-grid-confirmButton' onclick ='onItemConfirm(this)'><span class='k-icon k-i-checkbox'></span></a>" },
                    ], title: "Edit / Confirm", width: "120px", locked: true
                }

function onItemConfirm(e) {

            var row = $(e).closest("tr"),
            grid = gridElement.data("kendoGrid"),
            model = grid.dataItem(row);
            // validate
            if(model.Field! == "" || model.Field1 == null){
                grid.editRow(row);

               // I need to display validation messages
            }
    }

By my design it should turn a row into "edit" mode, which is does, but then I want to display validation messages (tool tips) for columns with invalid data immediately without forcing user to click on Update button. Is it possible?

thanks