Questions on Kendo UI for jQuery Forum

2 answers

172 views

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 ...

Grid

answered on 19 Feb 2013

2 answers

93 views

Endless scroll won't work on tablet

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?

General Discussions

answered on 19 Feb 2013

2 answers

295 views

Editor-Custom Tools-View Html

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?

Editor

answered on 19 Feb 2013

3 answers

140 views

Navigation is Break after First usage

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.

But when I click Main menu again it's do nothing.

note: I'm testing the app via note: I'm testing the app via ICENIUM Graphite.

index.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/main.css" rel="stylesheet" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<script src="scripts/hello-world.js"></script>

</head>

<body>

<div data-role="view" data-title="Home" id="mainPageView">

<a data-role="button" href="MainMenu.html">Main Menu</a>

</div>

<div data-role="layout" data-id="mainLayout">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

<div data-role="footer">

</div>

<script>

var app = new kendo.mobile.Application(document.body,{transition:"silde",layout:"mainLayout"});

</script>

</body>

</html>

mainMenu,html

<div data-role="view" data-title="Main Menu" id="mainMenuView">

<p>Main Menu</p>

<a href="index.html" data-role="button" >Home</a>

</div>

General Discussions

answered on 19 Feb 2013

2 answers

103 views

[Solved] Grid Header Dimension

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

Grid

answered on 19 Feb 2013

1 answer

416 views

Grid header styling

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.

Grid

answered on 19 Feb 2013

2 answers

187 views

kendoAutoComplete disable mode issue on IE 9 and Firefox

Hi Kendoui Team,

I having problem on Kendoui AutoComplete when disabled, i has able to click the input text inside the autocomplete textbox and the cursor show up even if the kendoAutoComplete control is disabled. I'm currently using Kendo UI Complete v2012.2.710

Please see attachment. Thanks

Regards,
Ramil of dbWizards

AutoComplete

answered on 19 Feb 2013

1 answer

190 views

Insert using GridForeignKey not working

I have my kendo.grid using the grideditmode.popup for creating and editing. My foreign key values show fine in the grid and also on an edit in the drop downs. But they won't add the actual values into the db. So I add a new row and pick the two items in the two drop downs and they remain null in the db. If I edit one where they are null, they stay null. If I edit one where they aren't null and change the values, that works fine. Any ideas are appreciated.

columns.ForeignKey(item => item.InstructorID, (IEnumerable<PointsInfrastructure.Instructor>)ViewData["instructorList"], "InstructorID", "Name");

columns.ForeignKey(item => item.SchoolID, (IEnumerable<PointsInfrastructure.School>)ViewData["schoolList"], "SchoolID", "Name");

[Display(Name = "Instructor")]

[UIHint("GridForeignKey")]

public long? InstructorID { get; set; }

[Display(Name = "School")]

[UIHint("GridForeignKey")]

public long? SchoolID { get; set; }

// create new tournament

var listValue = new Competitor()

{

MemberID = inViewModel.MemberID,

LastName = inViewModel.LastName,

FirstName = inViewModel.FirstName,

MemberNumber = inViewModel.MemberNumber,

DateOfBirth = inViewModel.DateOfBirth,

InstructorID = inViewModel.InstructorID,

SchoolID = inViewModel.SchoolID,

Email = inViewModel.Email,

Sex = inViewModel.Sex,

Notes = inViewModel.Notes

};

_db.Competitors.Add(listValue);

_db.SaveChanges();

Grid

answered on 19 Feb 2013

3 answers

185 views

Add Mobiscroll to ModalView and change z-index of ModalView

I am trying to use mobiscroll in a modal view and everything works fine, however, the mobi scroller ends up under the modalview and I am unable to make a selection.
Is there a way to change the z-index of the modalview so that the mobiscroll will end up on top of the modal view?

Any help with this will be appreciated

ModalView

answered on 19 Feb 2013

1 answer

157 views

Altering treeView Hierarchy

Hi
I have a doubt in TreeView Component.

I want to move the selected node one step forward or backward.
For example,
Consider a tree structure,

A
A.1
A.2
A.3
B
B1
B2
B.3
C
C1
C2
Now in my case i click c1 and press button the root element C wants to move one step forward and the tree model should change like this
A
A.1
A.2
A.3

C
C1
C2
B
B1
B2
B.3

Thanks in advance,

TreeView

answered on 19 Feb 2013