Questions on Kendo UI for jQuery Forum

4 answers

230 views

I'm trying to find the right settings to get a Bar Sparkline to fill a div with just the bar image and no padding, white space or anything else around it. I've set the following, which gets close, but clips some of the image. Is there a way to do this?

<div id="files-format-chart" style="width:1120px;line-height:30px;cursor: pointer;"></div>

$("#files-format-chart").kendoSparkline({

type: "bar",

chartArea: {

opacity: 0,

margin: 0

},

plotArea: {

opacity: 0,

margin: 0

},

series: /*array of series*/,

valueAxis: {

max: /*max value of series data to avoid space*/

}

});

Sparkline

answered on 28 May 2014

2 answers

642 views

Splitter Arrow Style nad divider width

Hi,

Is it possible to change the style of splitter arrow like make it bigger, more intuitive? Also, how to increase the width of the divider between the panes. wanted to make it more wider.

Thanks,
Deepak

Splitter

answered on 28 May 2014

2 answers

382 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

123 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

562 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

590 views

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

112 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

251 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

91 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

390 views

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