Questions on Kendo UI for jQuery Forum

1 answer

299 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

101 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

416 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

555 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

263 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

2 answers

381 views

[Solved] Add notes dynamically on line chart (not stock chart) category axis

Hi,

I'm trying to display hourly data on a line chart for multiple days.

Currently the CategoryAxis just displays the time (hour) which is what I want, How can i add a note on category axis with full date? (at each day 24:00 hour interval)

I saw some example in forum which add static notes on the category axis.

is there a way to add the note dynamically? (with Javascript/html code)

Thanks!

Charts

answered on 27 May 2014

8 answers

456 views

Locked Column row height with Menu ClientTemplate column

Hello,

I've got a grid where I'm trying to use locked columns. One of those columns has a client template which is a Kendo Menu control. It looks like the logic that calculates the row heights for the locking is considering the height of the fully expanded menu (in my case I have one item at the top level of the menu and 2 items in the level below that.) This results in my grid rows being much taller than needed for the rest of the data. If I remove the column with the menu control the height calculates properly based on the rest of the data in the grid cells. Is there a way to exclude the menu - or at least the sub-level menu items - from the height calculations? Thanks for your help! I'm on the latest internal build 4.1.519.

Regards,
Brian

Grid

answered on 27 May 2014

1 answer

86 views

[Solved] Navigator not poping up ...

Hello,

I'm trying to recreate something similar to the stock demo. The problem I run into is that I do see the chart, but the navigator is not visible

I use the following simplified script (I allredy played with options)

$(function () {

function createChart() {

var id = $("#chart").data('id');

$("#chart").kendoChart({

theme: "metro",

legend: {

position: "bottom"

},

dataSource: {

transport: {

read: "/api/details/" + id,

type: "odata"

}

},

series: [{

type: "line",

field: "AvgResponseTijd"

}],

categoryAxis: {

field: "Datum",

type: "date",

baseUnit: "hours",

labels: {

rotation: -30

}

},

navigator: {

series: [{

type: "line",

field: "AvgResponseTijd"

}],

}

});

}

$(document).ready(createChart);

$("#example").bind("kendo:skinChange", createChart);

});

The json as the following pattern:

<TestResultaatPeriodiek>

<AvgResponseTijd>177.00</AvgResponseTijd>

<Datum>2014-05-22T15:10:00</Datum>

</TestResultaatPeriodiek>

<TestResultaatPeriodiek>

<AvgResponseTijd>99.00</AvgResponseTijd>

<Datum>2014-05-22T15:20:00</Datum>

</TestResultaatPeriodiek>

<TestResultaatPeriodiek>

<AvgResponseTijd>120.00</AvgResponseTijd>

<Datum>2014-05-22T15:30:00</Datum>

</TestResultaatPeriodiek>

Any help would be appreciated ;-)

-- jan willem

Charts

answered on 27 May 2014

1 answer

438 views

Tabstrip selected index issue

Hi Telerik Team,

Here I have got three tabs.
I want to get tabindex while selecting each tab and based on this tabindex I have to bind a grid.How to get tabindex while selecting tab?

Tab is shown as an attached file.

<script>
function rtsTasksSelect(e) {
}
</script>

@(Html.Kendo().TabStrip()
.Name("rtsTasks")
.Items(tabstrip =>
{
tabstrip.Add()
.Text("All")//To set Extra tab
.Selected(true)//To get default selection of this tab
.HtmlAttributes(new { Style = "Width:100%;" });
})
.BindTo(Model.ItemType.CreateTabStrip(),
(item, navigationData) =>
{
item.ImageUrl = "../" + "../" + navigationData.ImageUrl;

})
.Events(events => events

.Select("rtsTasksSelect")
)

)

TabStrip

answered on 27 May 2014

2 answers

178 views

Chart Series Issue: Rending Pie/Donut Chart

My web service returns the following values:

[
{
"TotalStores":777
,"Status1":642
,"Status2":45
,"Status3":90
}
]

How could I make a pie chart or donut chart for status?

Charts

answered on 27 May 2014