or
1 answer
174 views
[English]
I'm applying the template jFlatu to my project, before already had views and routers working under Kendo SPA. But now, applying the template jFLatu, it gives me an error of GET, where tries to bring the file jQuery and not Kendo, to check the console, seems that jQuery Mobile the problem is.
If I put jQuery Mobile with comments, everything works, and Kendo does what he has to do, but I need jQuery Mobile for the operation of the template.
[Spanish]
Estoy aplicando la plantilla jFlatu a mi proyecto, que ya tenia las vistas y routers funcionando bajo Kendo SPA. Pero me da un error de GET, donde jQuery intenta traer el archivo y no Kendo, al revisar la consola parace que es jQuery Mobile el problema.
Si pongo jQuery Mobile con comentarios, todo funciona y Kendo hace lo que tiene que hacer, pero necesito jQuery Mobile para el funcionamiento de la plantilla.
<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="kendo/js/jquery.min.js"></script>
<!--<script src="js/libs/jquery.mobile-1.3.0.min.js"></script>-->
<script type="text/javascript" src="kendo/js/kendo.all.min.js"></script>
<script src="assets/flex-slider/jquery.flexslider-min.js"></script>
</head>
<body>
<div id='app'></div>
<script type="text/x-kendo-template" id="indexTemplate">
<article>
<header>
<h1>Citizen Connected</h1>
<h2>Inicio De Sesión</h2>
<!-- Login -->
<!--
<div id="logged-in">
Bienvenido, <span id="login-name"></span>.
<button id="log-out">Cerrar Sesión</button>
</div>
-->
<div id="logged-out">
Puedes iniciar sesión con:
<button id="buttonFacebook">Facebook</button>
<button id="buttonTwitter">Twitter</button>
</div>
<!-- End FB Login-->
<form id='add-item'>
<button type='submit' id='refresh'>Actualizar</button>
<button type='submit'>Añadir</button>
<div><input type='text' id='new-item-text' placeholder='Ingresa una denuncia.' /></div>
</form>
</header>
<ul id='todo-items'></ul>
<p id='summary'>Cargando...</p>
</article>
<footer>
<ul id='errorlog'></ul>
</footer>
</script>
<script type="text/x-kendo-template" id="reportarTemplate">
<!-- page -->
<div data-role="page" data-theme="a">
<!-- sideNavigationPanel -->
<div data-role="panel" id="sideNav" data-position="left">
<ul id="sideButtons">
<li><a href="https://www.facebook.com/pages/Citizen-Connected/255467614605481"><i class="icon-facebook"></i></a></li>
<li><a href="https://twitter.com/CitizenConnecte"><i class="icon-twitter"></i></a></li>
<li><a href="https://www.facebook.com/PeterConchaR"><i class="icon-facebook"></i></a></li>
<li><a href="https://twitter.com/PeterConchaR"><i class="icon-twitter"></i></a></li>
</ul>
<ul id="sidePanel" class="clleft">
<li id="active"><a href="#"><i class="icon-home"></i>Inicio</a></li>
<li><a href="about.html"><i class="icon-lightbulb"></i>Sobre CC</a></li>
<li><a href="contact.html"><i class="icon-envelope"></i>Contáctanos</a></li>
</ul>
</div>
<!-- /sideNavigationP -->
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>Citizen Connected</h1>
<a href="#sideNav" id="navIcon"><i class="icon-th-list"></i></a>
</div>
<!-- /header -->
<!-- content -->
<div data-role="content">
<div id="logged-in">
Bienvenido, <span id="login-name"></span>.
<button id="log-out">Cerrar Sesión</button>
</div>
<!-- slogan -->
<div class="ui-grid-solo">
<h1 class="intro">Registra tu denuncia</h1>
<!-- Mapa -->
<div id="map_canvas" style="width: 290px; height: 200px;"></div>
<a href="#" onclick="checkIn()" data-role="button" class="btn swatch-2">Check In</a>
</div>
<!-- /slogan -->
<hr/>
<!-- footer -->
<div class="footer text-center">
<p>COPYRIGHT 2013 Universidad de Guayaquil</p>
</div>
<!-- /footer-->
</div>
<!-- End Content -->
</div>
<!-- /page -->
</script>
<script type="text/x-kendo-template" id="layoutTemplate">
</script>
<script>
// Views
var indexView = new kendo.View("indexTemplate");
var reportarView = new kendo.View("reportarTemplate");
// Routers
var router = new kendo.Router();
router.route("/", function () {
indexView.render("#app");
});
router.route("/reportar", function () {
reportarView.render("#app");
});
$(function () {
router.start();
});
</script>
<!-- Google Maps API -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/libs/MobileServices.Web-1.1.0.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
I'm applying the template jFlatu to my project, before already had views and routers working under Kendo SPA. But now, applying the template jFLatu, it gives me an error of GET, where tries to bring the file jQuery and not Kendo, to check the console, seems that jQuery Mobile the problem is.
If I put jQuery Mobile with comments, everything works, and Kendo does what he has to do, but I need jQuery Mobile for the operation of the template.
[Spanish]
Estoy aplicando la plantilla jFlatu a mi proyecto, que ya tenia las vistas y routers funcionando bajo Kendo SPA. Pero me da un error de GET, donde jQuery intenta traer el archivo y no Kendo, al revisar la consola parace que es jQuery Mobile el problema.
Si pongo jQuery Mobile con comentarios, todo funciona y Kendo hace lo que tiene que hacer, pero necesito jQuery Mobile para el funcionamiento de la plantilla.
<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="kendo/js/jquery.min.js"></script>
<!--<script src="js/libs/jquery.mobile-1.3.0.min.js"></script>-->
<script type="text/javascript" src="kendo/js/kendo.all.min.js"></script>
<script src="assets/flex-slider/jquery.flexslider-min.js"></script>
</head>
<body>
<div id='app'></div>
<script type="text/x-kendo-template" id="indexTemplate">
<article>
<header>
<h1>Citizen Connected</h1>
<h2>Inicio De Sesión</h2>
<!-- Login -->
<!--
<div id="logged-in">
Bienvenido, <span id="login-name"></span>.
<button id="log-out">Cerrar Sesión</button>
</div>
-->
<div id="logged-out">
Puedes iniciar sesión con:
<button id="buttonFacebook">Facebook</button>
<button id="buttonTwitter">Twitter</button>
</div>
<!-- End FB Login-->
<form id='add-item'>
<button type='submit' id='refresh'>Actualizar</button>
<button type='submit'>Añadir</button>
<div><input type='text' id='new-item-text' placeholder='Ingresa una denuncia.' /></div>
</form>
</header>
<ul id='todo-items'></ul>
<p id='summary'>Cargando...</p>
</article>
<footer>
<ul id='errorlog'></ul>
</footer>
</script>
<script type="text/x-kendo-template" id="reportarTemplate">
<!-- page -->
<div data-role="page" data-theme="a">
<!-- sideNavigationPanel -->
<div data-role="panel" id="sideNav" data-position="left">
<ul id="sideButtons">
<li><a href="https://www.facebook.com/pages/Citizen-Connected/255467614605481"><i class="icon-facebook"></i></a></li>
<li><a href="https://twitter.com/CitizenConnecte"><i class="icon-twitter"></i></a></li>
<li><a href="https://www.facebook.com/PeterConchaR"><i class="icon-facebook"></i></a></li>
<li><a href="https://twitter.com/PeterConchaR"><i class="icon-twitter"></i></a></li>
</ul>
<ul id="sidePanel" class="clleft">
<li id="active"><a href="#"><i class="icon-home"></i>Inicio</a></li>
<li><a href="about.html"><i class="icon-lightbulb"></i>Sobre CC</a></li>
<li><a href="contact.html"><i class="icon-envelope"></i>Contáctanos</a></li>
</ul>
</div>
<!-- /sideNavigationP -->
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>Citizen Connected</h1>
<a href="#sideNav" id="navIcon"><i class="icon-th-list"></i></a>
</div>
<!-- /header -->
<!-- content -->
<div data-role="content">
<div id="logged-in">
Bienvenido, <span id="login-name"></span>.
<button id="log-out">Cerrar Sesión</button>
</div>
<!-- slogan -->
<div class="ui-grid-solo">
<h1 class="intro">Registra tu denuncia</h1>
<!-- Mapa -->
<div id="map_canvas" style="width: 290px; height: 200px;"></div>
<a href="#" onclick="checkIn()" data-role="button" class="btn swatch-2">Check In</a>
</div>
<!-- /slogan -->
<hr/>
<!-- footer -->
<div class="footer text-center">
<p>COPYRIGHT 2013 Universidad de Guayaquil</p>
</div>
<!-- /footer-->
</div>
<!-- End Content -->
</div>
<!-- /page -->
</script>
<script type="text/x-kendo-template" id="layoutTemplate">
</script>
<script>
// Views
var indexView = new kendo.View("indexTemplate");
var reportarView = new kendo.View("reportarTemplate");
// Routers
var router = new kendo.Router();
router.route("/", function () {
indexView.render("#app");
});
router.route("/reportar", function () {
reportarView.render("#app");
});
$(function () {
router.start();
});
</script>
<!-- Google Maps API -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/libs/MobileServices.Web-1.1.0.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Petyo
Telerik team
answered
on
20 Aug 2014
1 answer
203 views
Here is a simplified version of my code (there is nothing in the <table>):
And everything works fine, except that when I use the dropdown to change the value, it never changes in the datasource. My change even never fired (I cut it out of here) and if I try to update, the field edited by the dropdown is not changed. THe other fields (there are text fields, number fields, etc. in the none abbreviated code) all fire the change event and show up in the datasource. Any idea why this isn't changing anything?
var _manu = [{"text":"Acme","value":1},{"text":"Other","value":2}];function getManufacturerName(id) { for (var i = 0; i < _manu.length; i++) { if (_manu[i].value == id) { return _manu[i].text; } } return ''; }gridDataSource = new kendo.data.DataSource({ batch: true, transport: { read: { url: 'myUrl' }, }, schema: { model: { id:"ItemId", fields: { ManuId: { type: "number" } } } } });var kendoGrid = gridObj.kendoGrid({ dataSource: gridDataSource, selectable: "row", editable: true, columns: [ { field: "ManuId", title: "Manufacturer", editor: manufacturerDropDownEditor, template:"#= getManufacturerName(ManufacturerId) #" } ] }).data('kendoGrid');function manufacturerDropDownEditor(container, options) { $('<input data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ dataTextField: "text", dataValueField: "value", dataSource: _manu }); }And everything works fine, except that when I use the dropdown to change the value, it never changes in the datasource. My change even never fired (I cut it out of here) and if I try to update, the field edited by the dropdown is not changed. THe other fields (there are text fields, number fields, etc. in the none abbreviated code) all fire the change event and show up in the datasource. Any idea why this isn't changing anything?
1 answer
89 views
I couldn't find an example of grid within a grid within a grid. Is this even possible using razor syntax?
I sort of remember .toClientTemplate() failing for the 2nd grid within grid.
I sort of remember .toClientTemplate() failing for the 2nd grid within grid.
Daniel
Telerik team
answered
on
20 Aug 2014
1 answer
535 views
I have a tabstrip that I am loading with some buttons (x for close etc.) in the tab, not the content area.
I need to be able to determine if the tab that contains the button that was clicked is the currently selected tab (because, I need to access the content of that tab for one of the button's functionality) and I would like to jump out of the javascript if the tab is not the currently selected one.
Here is the complete code I'm using to build my tabs.
function loadTab(name, id, url, pinned) {
debugger;
if (name == "Log Out") {
window.location(url);
return;
}
//special case for logout redirect.
//replace puts the url in page history so the user cannot use the back button to navigate back to the application without logging in
if (name == "Log Out") {
window.location.replace(url);
return;
}
var $item = $("#" + id).parents('li');
if ($item.length != 0) {
tabStrip.select($item);
} else {
var html = "<span id='" + id + "' class='k-button k-button-icon'>" +
"<span class='fa fa-times fa-small fa-button'></span>" +
"</span>" +
"<span id='" + id + "-pin' class='k-button k-button-icon'>" +
"<span class='fa fa-thumb-tack fa-rotate-90 fa-small fa-button'></span>" +
"</span>" +
"<span id='" + id + "-window' class='k-button k-button-icon'>" +
"<span class='fa fa-caret-right fa-regular-lift fa-button'></span>" +
"</span>";
$.ajax({
url: url,
type: 'get',
success: function (data) {
// Wrap the tab content's HTML with a div that has a style display:relative
//so that ew can use wait dialogs.
var divData = "<div class='connect-tab-wait-dialog-wrapper'>" + data + "</div>";
tabStrip.append(
{
encoded: false,
id: id,
text: name + html,
content: divData
});
$("#" + id).click(function() {
connect.shell.removeTab(this);
});
if (pinned === 'True') {
$("#" + id + "-pin").children("span").toggleClass("fa-rotate-90");
}
//The pin on the tab is used to set the app up to be automatically loaded on startup
//so when toggled, the event will make an ajax call to add/remove the app from the
//OSD_USERS_APPLICATIONS_PINNED database table.
$("#" + id + "-pin").click(function () {
connect.shell.togglePin(this, id);
});
$("#" + id + "-window").click(function() {
connect.shell.loadWindow(this);
});
$item = $("#" + id).parents('li');
expandContentDivs($tabStripElement.children(".k-content").last());
tabStrip.select($item);
},
error: function (x, e) {
if (x.status == 404) {
connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>404 - Not Found</div>", null, false);
}
else if (x.status == 401) {
connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>401- Unauthorized</div>", null, false);
}
else if (x.status == 402) {
connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>403 - Access Denied</div>", null, false);
}
}
});
// Update the application use count so that the "Favorites" widget shows their most used applications
$.ajax({
url: 'Home/UpdateApplicationUseCount',
type: 'POST',
data: JSON.stringify({ applicationPk: id }),
contentType: 'application/json;',
success: function (result) {
if (result === true) {
}
},
error: function () {
}
});
}
}
The loadWindow function takes the content of the tab and pops it out into its own window. When the tab is not the current tab, it gets the content from the wrong tab.
I tried setting the selected tab first, but that did not seem to work.
function loadWindow(me) {
tabStrip.select($(me).parents('li'));
var innerHtml = $(tabStrip.contentHolder(tabStrip.select().index())).html(),
win = window.open(),
outerHtml = $.ajax({
type: "GET",
url: 'Home/Wrapper',
async: false,
}).responseText;
outerHtml = outerHtml.replace('[innerHTML]', innerHtml);
win.document.open();
win.document.write(outerHtml);
try {
win.document.close();
} catch(e) {
alert(e);
}
removeTab(me);
}
I need to be able to determine if the tab that contains the button that was clicked is the currently selected tab (because, I need to access the content of that tab for one of the button's functionality) and I would like to jump out of the javascript if the tab is not the currently selected one.
Here is the complete code I'm using to build my tabs.
function loadTab(name, id, url, pinned) {
debugger;
if (name == "Log Out") {
window.location(url);
return;
}
//special case for logout redirect.
//replace puts the url in page history so the user cannot use the back button to navigate back to the application without logging in
if (name == "Log Out") {
window.location.replace(url);
return;
}
var $item = $("#" + id).parents('li');
if ($item.length != 0) {
tabStrip.select($item);
} else {
var html = "<span id='" + id + "' class='k-button k-button-icon'>" +
"<span class='fa fa-times fa-small fa-button'></span>" +
"</span>" +
"<span id='" + id + "-pin' class='k-button k-button-icon'>" +
"<span class='fa fa-thumb-tack fa-rotate-90 fa-small fa-button'></span>" +
"</span>" +
"<span id='" + id + "-window' class='k-button k-button-icon'>" +
"<span class='fa fa-caret-right fa-regular-lift fa-button'></span>" +
"</span>";
$.ajax({
url: url,
type: 'get',
success: function (data) {
// Wrap the tab content's HTML with a div that has a style display:relative
//so that ew can use wait dialogs.
var divData = "<div class='connect-tab-wait-dialog-wrapper'>" + data + "</div>";
tabStrip.append(
{
encoded: false,
id: id,
text: name + html,
content: divData
});
$("#" + id).click(function() {
connect.shell.removeTab(this);
});
if (pinned === 'True') {
$("#" + id + "-pin").children("span").toggleClass("fa-rotate-90");
}
//The pin on the tab is used to set the app up to be automatically loaded on startup
//so when toggled, the event will make an ajax call to add/remove the app from the
//OSD_USERS_APPLICATIONS_PINNED database table.
$("#" + id + "-pin").click(function () {
connect.shell.togglePin(this, id);
});
$("#" + id + "-window").click(function() {
connect.shell.loadWindow(this);
});
$item = $("#" + id).parents('li');
expandContentDivs($tabStripElement.children(".k-content").last());
tabStrip.select($item);
},
error: function (x, e) {
if (x.status == 404) {
connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>404 - Not Found</div>", null, false);
}
else if (x.status == 401) {
connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>401- Unauthorized</div>", null, false);
}
else if (x.status == 402) {
connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>403 - Access Denied</div>", null, false);
}
}
});
// Update the application use count so that the "Favorites" widget shows their most used applications
$.ajax({
url: 'Home/UpdateApplicationUseCount',
type: 'POST',
data: JSON.stringify({ applicationPk: id }),
contentType: 'application/json;',
success: function (result) {
if (result === true) {
}
},
error: function () {
}
});
}
}
The loadWindow function takes the content of the tab and pops it out into its own window. When the tab is not the current tab, it gets the content from the wrong tab.
I tried setting the selected tab first, but that did not seem to work.
function loadWindow(me) {
tabStrip.select($(me).parents('li'));
var innerHtml = $(tabStrip.contentHolder(tabStrip.select().index())).html(),
win = window.open(),
outerHtml = $.ajax({
type: "GET",
url: 'Home/Wrapper',
async: false,
}).responseText;
outerHtml = outerHtml.replace('[innerHTML]', innerHtml);
win.document.open();
win.document.write(outerHtml);
try {
win.document.close();
} catch(e) {
alert(e);
}
removeTab(me);
}
Petur Subev
Telerik team
answered
on
20 Aug 2014
1 answer
85 views
Hi,
There seems to be a bug with the "Add new record" feature and virtual scrolling. Here is a demo showing the issue (happened in both the Q1 and Q2 2014 releases):
http://dojo.telerik.com/UloT
As soon as a record is added, scrolling in the grid breaks. In my own application, debugging the unminified .js showed that Kendo was going into a loop of calling DataSource.prefetch() endlessly until the stack overflowed. Not sure if that's happening in this demo as well but it seems to be the same problem.
Is this a known issue?
Thanks,
Nick
There seems to be a bug with the "Add new record" feature and virtual scrolling. Here is a demo showing the issue (happened in both the Q1 and Q2 2014 releases):
http://dojo.telerik.com/UloT
As soon as a record is added, scrolling in the grid breaks. In my own application, debugging the unminified .js showed that Kendo was going into a loop of calling DataSource.prefetch() endlessly until the stack overflowed. Not sure if that's happening in this demo as well but it seems to be the same problem.
Is this a known issue?
Thanks,
Nick
Dimo
Telerik team
answered
on
20 Aug 2014
6 answers
1.0K+ views
Hi, when you remove a column from the column menu, the remaing cols lose their width. That happens when you explicitly define column width for more than 1 column. You can see an example in http://dojo.telerik.com/AGaQ, taken from http://demos.telerik.com/kendo-ui/grid/column-menu, the only difference is that I set the column witdh for everycolumn and not only the first one.
Thanks.
Thanks.
3 answers
181 views
I've seen some similar posts, but not exactly what I need.
I have two ListViews
Items can be dragged and dropped between them.
I need to be able to remove the dragged item from one list and add it to the other list.
This is how the ListView is created.
<div id="serversAll">
<div data-role="scroller" style="background-color: gray; height: 300px; width: 370px; padding-top: 13px; padding-bottom: 17px;">
<table data-bind="source: serversAll" data-template="templateServers" class="servers"></table>
</div>
</div>
var vmSevers = kendo.observable({
isVisible: true,
serversAll: new kendo.data.DataSource({
schema: {
model: {
id: "Id"
}
},
batch: false,
transport: {
read: {
url: url
}
}
})
});
kendo.bind($("#serversAll"), vmSevers, kendo.mobile.ui);
I have two ListViews
Items can be dragged and dropped between them.
I need to be able to remove the dragged item from one list and add it to the other list.
This is how the ListView is created.
<div id="serversAll">
<div data-role="scroller" style="background-color: gray; height: 300px; width: 370px; padding-top: 13px; padding-bottom: 17px;">
<table data-bind="source: serversAll" data-template="templateServers" class="servers"></table>
</div>
</div>
var vmSevers = kendo.observable({
isVisible: true,
serversAll: new kendo.data.DataSource({
schema: {
model: {
id: "Id"
}
},
batch: false,
transport: {
read: {
url: url
}
}
})
});
kendo.bind($("#serversAll"), vmSevers, kendo.mobile.ui);
Alexander Valchev
Telerik team
answered
on
20 Aug 2014
8 answers
1.2K+ views
Hi,
Passing array as an argument to ObservableArray push does not work as expected. Would it not make sense to check if arguments contains a single array and use it as a parameter to push.apply(this, items). Here is a sample.
Passing array as an argument to ObservableArray push does not work as expected. Would it not make sense to check if arguments contains a single array and use it as a parameter to push.apply(this, items). Here is a sample.
var kendo = window.kendo, CHANGE = "change", isArray = $.isArray, push = [].push, stringify = JSON.stringify;kendo.data.ObservableArray.prototype.push = function () { var index = this.length; var items = arguments; // if no args passed return length if (items.length === 0) { return index; } if (items.length === 1 && isArray(items[0])) { items = items[0]; } items = this.wrapAll(items); var result = push.apply(this, items); this.trigger(CHANGE, { action: "add", index: index, items: items }); return result;};1 answer
185 views
When a splitter is hidden behind a ng-show, the splitter is in a bad state when it is shown. In the code that i have linked to, I hide the splitter if $scope.tab is equal to 1. If you change $scope.tab to be 2, the splitter works fine.
Any help on this would be appreciated.
For an example of this happening look at
http://dojo.telerik.com/ubUB/2
Any help on this would be appreciated.
For an example of this happening look at
http://dojo.telerik.com/ubUB/2
Alex Gyoshev
Telerik team
answered
on
20 Aug 2014
1 answer
383 views
I am attempting to us a drop down menu (bootstrap) treatment for inline grid commands, but am having difficulty making it work. Attached is a screen shot of the intended presentation.
For the screen shot I created a row template with the following code:
My intent was to bind the built-in commands to the appropriate drop down action, but can not figure out how to accomplish that.
Any recommendations?
For the screen shot I created a row template with the following code:
<script id="rowTemplate" type="text/x-kendo-tmpl"> <tr data-id="#: id #"> <td class="name">#: name #</td> <td class="id" align="right">#: id #</td> <td class="status" align="right">#: status #</td> <td class="redemptions md-hide sm-hide xs-hide xxs-hide" align="right">#: redemption #</td> <td class="startDate xxs-hide" align="right">#=kendo.format("{0:MM-dd-yyyy}", startDate)#</td> <td class="endDate xxs-hide" align="right">#=kendo.format("{0:MM-dd-yyyy}", endDate)#</td> <td class="options" style="overflow: visible" > <div id="main-tag-controller" class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="" role="itemAction" data-value="00" data-id="#: id #"><i class="fa fa-file-text-o"></i> Details</a></li> <li><a href="" role="itemAction" data-value="01" data-id="#: id #"><i class="fa fa-bar-chart-o"></i> Report</a></li> <li><a href="" role="itemAction" data-value="02" data-id="#: id #"><i class="fa fa-pencil-square-o"></i> Edit Promotion</a></li> <li><a href="" role="itemAction" data-value="03" data-id="#: id #"><i class="fa fa-files-o"></i> Copy Promotion</a></li> <li><a href="" role="itemAction" data-value="04" data-id="#: id #"><i class="fa fa-times"></i> Cancel Promotion</a></li> <li><a href="" role="itemAction" data-value="05" data-id="#: id #"><i class="fa fa-eye-slash"></i> Hide Promotion</a></li> </ul> </div> </td> </tr></script>My intent was to bind the built-in commands to the appropriate drop down action, but can not figure out how to accomplish that.
Any recommendations?
Alexander Valchev
Telerik team
answered
on
20 Aug 2014
