Questions on Kendo UI for jQuery Forum

2 answers

424 views

ScrollView size

I have a mobile app.
One of the views structure looks like this:
(the view's data-stretch attribute is set to false! otherwise my whole layout goes crazy)

Large ScrollView:
-> page1:
-> a chart
-> and below a grid
-> page2:
-> some buttons, a date picker
-> a chart
-> and below a grid
-> page3:
-> a ListView:
-> some text
-> an input
-> a small ScrollView with some pictures
I have issues with the last small ScrollView. I initiate this ScrollView only when it's into view (when the large ScrollView scroll event fires on third page).
The problems is it doesn't have any size, but when I resize the browser window the pictures show up and everything works ok.
If I statically define the ScrollView with no databinding, it also works without having to resize the browser window.
Below is the code generated when i dinamically initiate the scrollview. The problems seems to be with the second div which has height:1px

<li>

<div id="meterImageGallery" data-role="scrollview" class="km-widget km-scrollview"><div style="height: 1px; -webkit-transform-origin: 0% 0%;"><div class="km-virtual-page" style="width: 326px; -webkit-transform: translate3d(-326px, 0px, 0px);"></div><div class="km-virtual-page" style="width: 326px; -webkit-transform: translate3d(0px, 0px, 0px);">

<img class="meter-image" src="../ViewerService.svc/GetObjectImageById?id=485">

</div><div class="km-virtual-page" style="width: 326px; -webkit-transform: translate3d(326px, 0px, 0px);">

<img class="meter-image" src="../ViewerService.svc/GetObjectImageById?id=1067">

</div></div><ol class="km-pages"><li class="km-current-page"></li><li></li><li></li></ol></div>

</li>

ScrollView (Mobile)

answered on 28 May 2014

1 answer

148 views

How to replace CSS of Kendo

Actually, Kendo is a best framework of JS, I always like to use it. but I even don't know how to replace one of kendo's widgets's CSS by myself. please help me out. thanks

General Discussions

answered on 28 May 2014

1 answer

618 views

Widgets inside a Template

Hey,

on my main page, i'm using a kendo scheduler widget which works as expected. Here i'd like to customize the edit popup with special fields i need. Here a short look at the scheduler source:

var kScheduler = new kendo.ui.Scheduler($("#scheduler"), {

dataSource: dsScheduler,

editable: {

template: kendo.template($("#schedulerTemplate").html())

}

});

And here is my template source:

<script type="text/x-kendo-template" id="schedulerTemplate">

<label>Beginn:</label>

<input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" />

<input name="start" type="text" required data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" />

<br />

<label>Ende:</label>

<input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end ,invisible:isAllDay" />

<input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end ,visible:isAllDay" />

<br />

<label>Titel:</label>

<input name="title" type="text" required data-type="string" data-bind="value: title" />

<br />

<label>Beschreibung:</label>

<textarea name="description" data-type="string" data-bind="value: description" />

<br />

<input id="combobox_AppointmentOwner" name="appointmentOwner" />

<br />

<label>Ganztägig</label>

<input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">

<br />

<label>Öffentlich</label>

<input type="checkbox" name="PublicEvent" data-type="boolean" data-bind="checked:PublicEvent">

<br />

</script>

The "combobox_AppointmentOwner" is the DOM element i'd like to bind to a kendo ComboBox. But the widget doesn't initialize and makes a combox out of the input field. On my main page i have a kendo ComboBox which is working properly, so this here is about initializing a kendo widget inside a template. What's the secret to solve this problem?

Regards,
Michael

Templates

answered on 28 May 2014

4 answers

655 views

[Solved] Can't select row in requestEnd event

After either creating or saving a record in a kendo grid, I need that record selected so that I can populate (or clear) a couple of child grids. This code doesn't work:

function gridJobRequestEnd(e) {<br> if (e.type == "update" && e.response.Data != null) {<br> var gridJob = $("#gridJob").data("kendoGrid");<br> var job = gridJob.dataSource.get(e.response.Data[0].JobKey);<br> var tr = $("[data-uid='" + job.uid + "']", gridJob.tbody);<br> gridJob.select(tr);<br> }<br> }

I have verifed (using alerts) that the JobKey is as expected and "tr" is a valid row. However the row is never selected. Is there another way to do this?

Grid

answered on 28 May 2014

1 answer

126 views

Multi Level Child Grids Kendo UI

HI

Is there any way to implement Multi Level Child Grids using asp.net MVC 4 Kendo UI?

I have been trying but the nearest i can get is 3rd Level child. which is kind of hard coded way.

Please let me know

Thanks

Grid

answered on 28 May 2014

1 answer

309 views

How to open a view and scroll down to a specific anchor ?

Glad to be the first one on this thread !

I have the following page :

<div data-role="view" data-layout="overview-layout" data-show="showEvent" data-init="initEvent" data-title="Meet My Friends" id="event" data-id="0" data-transition="slide">

<div data-role="content" class="content">

<div id="eventContent"></div>

<div class="eventButtons"> 

<table class="friends-tabs">

<tr>

<td class="tab-active" data-friends="might">Recommended</td>

<td class="friends-tab" data-friends="notifs">Wanna Go</td>

<td class="friends-tab" data-friends="invites">Invites</td>

<td class="friends-tab" data-friends="all">All</td>

</tr>

</table>

</div>

<div data-role="scroller" class="scrollerFriends">

<ul id="friendsToInvite"></ul>

</div>

<div>

<form id="friendSearchForEvent" class="km-filter-form">

<div class="km-filter-wrap">

<input type="text" id="messageInputFSE" placeholder="Friend Name" style="width:85%"/>

<button id="searchFriendForEvent" class="button2 btn-grey">Go</button>

</div>

</form>

</div>

And when someone click on a link to this page (basically href="\\#event? ..." ) I would like to redirect them to the div#friendsToInvite in within that view.

I guess I can do this with the scroller method scroll to but the height of the page vary depending on the template. Since Kendo UI uses # tags to select the view to be displayed, how can I sepcify a div based on ID ?
Many Thanks

View

answered on 28 May 2014

1 answer

107 views

kendo Grid Drag and Drop with Google Chrome browser

Hi,

I am using the following code for drag and drop multiple rows between two grids:

grd_portnumber.table.kendoDropTarget({
group: "portnumber",
drop: function (e) {
var portnumberDraggedRows = e.draggable.hint.find("tr");
portnumberDraggedRows.each(function (e) {
var thisUid = $(this).attr("data-uid");
var itemToMove = selectedPortnumberDataSource.getByUid(thisUid);
if (itemToMove != undefined) {
selectedPortnumberDataSource.remove(itemToMove);
if (itemToMove.IsAvailable == undefined || itemToMove.IsAvailable == true)
portnumberDataSource.add({ RecorderIndex: itemToMove.RecorderIndex, PortNumberID: itemToMove.PortNumberID});

}
}
});
selectedPortnumberPrevIndex = null;
}
});

This code is taking too much time for drag and drop functionality with Google Chrome browser.
Please suggest a best way to do it.
Thanks,
Raj Yennam

Grid

answered on 28 May 2014

1 answer

419 views

[Solved] Grid Popup Edit

Hi,

I have a popup Edit Grid. And on Edit popup we have Tab strip and master Save button for all the changes in one or more tabs.

The first Tab has form in it and second and third tab has Grid in it.

when the Update/Save button is clicked on the Grid popup; any changes in second and third Tab are not taken as dirty until I make changes to form in first Tab ?

Can any one help me in it.

Thanks,
Chatrapathi Chennam

Grid

answered on 28 May 2014

6 answers

561 views

Only show hyperlink when value is not null

Hi,

I have the following code to show hyperlinks on my kendo grid, however it shows a link all the time, even when the value is null. Is there a way I can get the link to only show when the value (PDFString) is not null?

columns.Template(@<text>
@Html.ActionLink("View", "PayrollHistory", "ViewPDF")
</text>)
.ClientTemplate("<a href='/PayrollHistory/ViewPDF/#= PDFString#' target='_blank'>View</a>")
.Title("View PDF");

Any suggestions welcome!

Grid

answered on 28 May 2014

2 answers

265 views

Problem styling the tabstrip

Hi,

I'm having some trouble with styling the tabstrip. First, I have a simple tabstrip, with 2 buttons. The code is like this:

<div data-role="footer" id="footer">
<div data-role="tabstrip" id="badges-tabs">
<a href="#destaques" data-icon="favorites" data-badge="0">Destaques</a>
<a href="#ofertas" data-role="button" data-icon="cart" data-badge="0">Ofertas</a>
</div>
</div>

Without any custom CSS, my tabstrip looks like this (please note I'm using flatUI as layout):

<tabstrip1.jpg>

How can I make the tabstrip display the 2 buttons with equal width, and make them fit the tabstrip container ?

I have to manually set dimensions but this is not good for a responsive design.

So I set a background color for the tabstrip, and a background color for the active state property. Also, I set the color to white. My tabstrip looks like this:

<tabstrip2.jpg>

You can see the active state button is a bit outside the tabstrip, and they are aligned on the center, together.

If I change my smartphone to landscape mode, this is what happens:

<tabstrip3.jpg>

I have another problem with CSS on the back button. I copied the back button code from one of the examples on the website:

<a data-role="backbutton" data-align="left" data-icon="back">Voltar</a>

But its not showing the back arrow along with the text. How can I display the back arrow on the back button?

Thanks for the help!

TabStrip (Mobile)

answered on 28 May 2014