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?

Hi I Have 2 Html pages each one have a view and each view have a link button to navigate between each view,
and when I click the Main Menu link it's navigate successfully to the Main Menu view and when I click on Home it's navigate back.
note: I'm testing the app via note: I'm testing the app via ICENIUM Graphite.

 index.html
mainMenu,html

Hi!

I like to modify the header grid, is possible write 2 lines in a column grid?

See the picture to view my problem.

Thank you

JC

For our UX requirement we have to remove the default padding which comes with grid header.
Grid header(.k-grid-header) is by default having inline style as : padding-right: 16px;
If we try to remove it by script inside grid databound event, it does not reflect on the screen.
This issue is there only in Chrome(my version is 20), it but works in in Firefox 14.
First  of all this style should not be inline and if we are modifying it as padding-right: 0px; it should reflect on the screen at same time.

You can see this behavior on the kendo demo page.
Open this is in Chrome http://demos.kendoui.com/web/grid/index.html ,
now in developer tools console execute the below snippet.
$('#grid .k-grid-header:first').css('padding-right','0px'); 
this should ideally remove the header's padding , but it does not.

Thanks in advance.
Any help is appreciated.