Hi

I have 2 questions:

1. How can I allow a variable number of decimals?  The user needs to be able to enter values such as: 1.23   or   1.236654   or  56.  I need to disable/prevent any reformatting - it must just accept the number the user enters (of course still preventing non-numeric characters).
2. Is there a way to dynamically update the number of decimals with javascript after the NumericTextBox has been defined?

As a refinement to question 1, I would like to enforce a minimum number of decimal places (say 3).  e.g. if the user enters: 3.4, it'll update it to 3.400, if the user enters 3.12345, then it should be left as is.  I expected the format "0.000#################" to do this.  It adds the zeros as required but it then goes on to round the number to 3 decimal places as well (as if I'd given the format "0.000").  This appears to be a bug?

Hello,

I tried to manually remove a row from grid, something like: 

grid.dataSource.remove(dataItem);
grid.dataSource.sync();
grid.dataSource.read() 

If the removal is successful, everything seems ok.
If server side error occurs (throw exception, which could be caught in client error event), the grid looks OK after read(), but when I try to delete the row again, same custom error will be triggered twice, and more if click delete button more times.
I guess the custom errors or destroyed rows are accumulated. I have to reload the page to clear the errors.

What I want to achieve is:
1) When click a custom Delete button,  delete current selected row
2) If deleting is successful, hide the row (or refresh the grid)
3) If deleting is not successful, show error and restore the row (or refresh the grid)

Please help to advice how to refresh the grid and clear destroyed rows/custom errors completed after server side removal error?

Thanks
Wicky

There are times when I want to override the default css on different widgets but am unsure how to do this.  Is there a way to view the generated code that kendo creates?  This would help in determining which styles I need to override.

For instance I would like to set the background of the Tabstrip to transparent and not have the border around the outside.  Which styles would I need to override in this case?

Thanks for any pointers.

Is there an mvc timeline control that I can place in an mvc4 web grid?

Hello, I'm adding Label tags for all input controls.

This works for almost all input controls, even for a dropdown, although I didn't expect that because the original input element is not visible in that case.

But in the case of a NumericTextBox, the original input element is also not visible, but the label does not work.

See this fiddle: http://jsfiddle.net/JaapM/d4Y7x/

Any clues?



Thanks, Jaap

Hi, 
I found an issue with an implementation of the tile effect...
if I place a clickable object on the back side of the tile, that makes the tile disappear, when I get the tile back it shows both the front and the back side! (just if I keep the pointer over the tile during the animation!)

here a sample of code:
http://jsbin.com/ecadez/16/  

and I also made a video demonstrating this issue.
http://www.screencast.com/t/SZt7WZGGbny 


Thanks
Fabio

Hi,
I have a grid with a popup edit and I want to be able to upload file, update the current record then close the edit window. I'm calling the "Update button" trigger but that doesn't seem to work. Here's my code:

...
      @(Html.Kendo().Grid<MyProject.Models.FileDetail>()
...
     .Editable(editable =>
            {
                editable.Mode(GridEditMode.PopUp);
                editable.TemplateName("template");
               editable.Window(w => w.Title("file upload").Name("UploadWindow"));
            })
.....

/*template.cshtml */

@model MyProject.Models.FileDetail
<div style="width: 400px">
    <div>Title:</div>
    <div>@Html.EditorFor(m => m.Title)</div>
    @(Html.Kendo().Upload()
        .Name("files")
        .Events(e => e
          .Success(@<text>
    function() {
             $(".k-grid-update").trigger('click');
            }
            </text>)
      )
        .Async(a => a.Save("Save", "Upload").Remove("Remove", "Upload").AutoUpload(false)
    ))
</div>

Is this possible or should I use a different approach to accomplish this?

Thank you.

-Yai

Hi All,

I'm trying to get a very simple data binding scenario working and I've fallen flat so far.  I'm basing it on the KendoMVCWrappers demo code.  My cshtml snippet looks like:

@Html.Kendo().Grid(Model.SystemUsersViewModels).Name("SystemUserGrid").Columns(columns =>
    {
        columns.Bound(user => user.UserName);
        columns.Bound(user => user.Email);
        columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsApproved ? checked='checked':'' # class='approvalChkbx' />");
        columns.Bound(user => user.IsLockedOut).ClientTemplate("<input type='checkbox' #= IsLockedOut ? checked='checked' : '' # />");
        columns.Bound(user => user.LastLoginDate);
        columns.Bound(user => user.Created);
    }
).Editable(ed=>ed.Mode(GridEditMode.InCell)).Pageable().Sortable().Scrollable().Filterable().DataSource(datasource => datasource.Ajax().ServerOperation(false))

<script type="text/javascript">
    $(function () {
        $('#SystemUserGrid').on('click', '.approvalChkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#SystemUserGrid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('IsApproved', checked);
        })
    })
</script>

The SystemUsersViewModels property is a collection of very basic ViewModels like:

    public class UserViewModel
    {
        private readonly UserDto _userDto;

        public UserViewModel(UserDto userDto)
        {
            _userDto = userDto;
        }

        [Editable(false)]
        public Guid UserId
        {
            get { return _userDto.UserId; }
        }

        public bool IsApproved
        {
            get { return _userDto.Membership.IsApproved;}
            set { _userDto.Membership.IsApproved = value; }
        }
     }

Running this at the moment results in a No Parameterless Constructor error but I absolutely do not want to add one to my view model.  The Javascript to handle the checkbox click is never fired and so the model is never updated.

I must admit that this demo syntax is VERY unintuitive and confusing for me at the moment.

var grid = $('#SystemUserGrid').data().kendoGrid;

Why is a call to .data() required here in order to get a handle on the grid?

All I want to do is update the model based on a user click but I cannot figure it out using the demo code.

Thanks in advance ...

I used the ListView and it works great on iPhone and Android, but it does not do anything on a tablet. I suspect the problem is because the list fills only half of the screen on the tablet and the issue comes from the threshold. 

How could I solve this problem?

My problem, as the title says, is with the ViewHTML when saving or make update in the database, for example I have the following html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.7.1.js"></script>
    <script src="source/kendo.all.js"></script>
    <link href="styles/kendo.common.css" rel="stylesheet" />
    <link href="styles/kendo.default.css" rel="stylesheet" />
</head>
<body>
    
        <div id="example" class="k-content">
            <div class="configuration k-widget k-header">
                <span class="infoHead">Information</span>
                <p>
                    Open the DropDownList to see the customized appearance of the items.
                </p>
            </div>


            <input id="titles"/>


            <script>
                $(document).ready(function() {
                    $("#titles").kendoDropDownList({
                        dataTextField: "Name",
                        dataValueField: "Id",
                        // define custom template
                        template: '<img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" />' +
                                  '<dl>' +
                                      '<dt>Title:</dt><dd>${ data.Name }</dd>' +
                                      '<dt>Year:</dt><dd>${ data.ReleaseYear }</dd>' +
                                  '</dl>',
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            filter: [{
                                field: "Name",
                                operator: "contains",
                                value: "Star Wars"
                            },{
                                field: "BoxArt.SmallUrl",
                                operator: "neq",
                                value: null
                            }],
                            transport: {
                                read: "http://odata.netflix.com/Catalog/Titles"
                            }
                        }
                    });


                    var dropdownlist = $("#titles").data("kendoDropDownList");


                    // set width of the drop-down list
                    dropdownlist.list.width(400);
                });
            </script>


            <style scoped>
                #titles-list .k-item {
                    overflow: hidden; /* clear floated images */
                }


                #titles-list img {
                    box-shadow: 0 0 4px rgba(255,255,255,.7);
                    float: left;
                    margin: 5px;
                }


                #titles-list dl {
                    margin-left: 85px;
                }


                #titles-list dt,
                #titles-list dd {
                    margin: 0;
                    padding: 0;
                }


                #titles-list dt {
                    font-weight: bold;
                    padding-top: .5em;
                }


                #titles-list dd {
                    padding-bottom: .3em;
                }
            </style>
        </div>




</body>
</html>


not save these tags
<! DOCTYPE html>
<html>
<head>


</ head>
<body>


</ body>
</ html>


is there any solution?