I'm newbie with KendoUI and I've got some troubles with the progress image that should be appear meanwhile the loading of the data.
This is my HTML:
<div>
<article >
<h5>Anagrafica</h5>
</article>
<div id="gridRolesT" class="dcmo_grid"
kendo-grid="gridRoles"
k-options="vm.gridOptions"
k-on-change="vm.onSelection(kendoEvent)">
</div>
</div>
Starting from which I have declared the following CSS and controller:
CSS:
.dcmo_grid {
margin: 10px 0px;
}
/*style for selected item*/
.dcmo_grid table tr.k-state-selected
{
background: #428bca;
color: #fff;
}
/*style for selected pages*/
.dcmo_grid .k-pager-numbers span.k-state-selected
{
background: #428bca;
color: #fff;
border-color: #428bca;
}
CONTROLLER:
constructor(private $scope) {
super($scope);
$scope.vm = this;
$("#gridRolesT").kendoGrid();
this.GetRoles();
}
gridOptions = {
dataSource: new kendo.data.DataSource(
{
pageSize: 5
})
,
columns: [
{ field: 'IdRole', title: 'Role' },
{ field: 'DsRole', title: 'Description' }
],
pageable: {
pageSizes: true
},
filterable: true,
sortable: true,
selectable: "row",
scrollable: false
}
public GetRoles() {
var self = this;
kendo.ui.progress($("#gridRolesT"), true);
this.AppController.AdministrationService.GetRoles()
.success(function (data) {
self.populateRole(data);
kendo.ui.progress($("#gridRolesT"), false);
})
.error(function (data) {
kendo.ui.progress($("#gridRolesT"), false);
self.ErrorMessage = "Errore caricamento dati";
});
}
I found on the web that in order to have the progress icon during the loading data, I have to use the kendo.ui.progress($("#gridID"), status),but it doesn't work in my case.
I tried also to change the position of container of my grid ( as suggested in some posts on the web), but I reached any results.
Is there anyone of you that could give me a suggestion?
Thank you in advance
Deby
I found the problem!
I instatiated the kendo grid within the constructor of my class, such as below:
constructor(private $scope) {
super($scope);
$scope.vm = this;
$("#gridRolesT").kendoGrid();
this.GetRoles();
}
Removing the declaration from the constructor and keeping the method kendo.ui.progress($(NameElement), state) as shown in the post above and everything goes fine!
Thank you so much for your help!
Deby
I have used the code below to toggle the loading icon on a kendo grid before.
Shows loading image
$('#myGrid').data('kendoGrid')._progress(1);
Hides loading image
$('#myGrid').data('kendoGrid')._progress(0);
Related
i want to change the done/button color, cancel should be red and done should be green
I already tried this:
ion-picker{
.picker-toolbar-cancel{
color: red !important;
}
}
.ui-datepicker {
color: red;
}
ion-picker > div > div > div > button {
color: red;
}
here is my html:
<ion-datetime
displayFormat="DD/MM/YYYY"
pickerFormat="DD MMM YYYY">
</ion-datetime>
<span class="caption2">até</span>
<ion-datetime
displayFormat="DD/MM/YYYY"
pickerFormat="DD MMM YYYY">
</ion-datetime>
You issue is happening because the date picket is set in the root of the app instead of inside the component.
One of the solution is to use your selectors but in your global.scss, but that will apply to all ion-datetime across the app.
Another option is to set a class to the buttons and also modify it inside of your global.scss e.g:
global.scss:
.picker-button.sc-ion-picker-md.test{
background: forestgreen;
}
HTML:
<ion-datetime [pickerOptions]="customPickerOptions"
displayFormat="DD/MM/YYYY"
pickerFormat="DD MMM YYYY">
</ion-datetime>
TS:
customPickerOptions: any;
constructor() {
this.customPickerOptions = {
buttons: [{
color: 'red',
text: 'Save',
cssClass: 'test',
handler: () => console.log('Clicked Save!')
}, {
text: 'Log',
handler: () => {
console.log('Clicked Log. Do not Dismiss.');
return false;
}
}]
}
}
That would prevent to do it across the whole app
In AmMap, "homeButtonClicked" event is present which got triggered when you click on home button.
I want to trigger that event manually.
Is there any way to do so?
To completely zoom out the map, use zoomToSelectedObject() ant pass in map.dataProvider as a parameter.
I.e.:
map.zoomToSelectedObject(map.dataProvider);
Working demo:
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": true
}
} );
function zoomOut() {
map.zoomToSelectedObject(map.dataProvider);
}
#chartdiv {
width: 100%;
height: 250px;
}
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<input type="button" value="Zoom Out" onclick="zoomOut();" />
<div id="chartdiv"></div>
To trigger an event on the map or any amCharts object for that matter, you can use fire() method. I.e.:
map.fire("homeButtonClicked", {
type: "homeButtonClicked",
chart: map
});
Here's a working example:
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": true
}
} );
map.addListener("homeButtonClicked", function(event) {
alert('homeButtonClicked');
});
function testEvent() {
map.fire("homeButtonClicked", {
type: "homeButtonClicked",
chart: map
});
}
#chartdiv {
width: 100%;
height: 280px;
}
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<input type="button" value="trigger event" onclick="testEvent();" />
<div id="chartdiv"></div>
It seems the code has changed since this was last answered. For me, this is what works.
map.clickMapObject(map.dataProvider)
(For martynasma) You still have an error on trigger event method (testEvent). Correct is:
map.fire({
type: "homeButtonClicked",
chart: map
});
I have one Kendo UI Grid in my view page (MVVM Concept). Bind the data from view model. When I reduce the page size.
Kendo UI grid change to Kendo UI Listview. See this image:
How can I do this?
Define one single DataSource for both Grid and ListView.
var ds = {
data : ...,
pageSize: 10,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
};
Then define both a DIV for the Grid and for the ListView:
<div id="grid"></div>
<div id="list"></div>
And initialize the Grid and the ListView:
$("#grid").kendoGrid({
dataSource: ds,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
]
});
$("#list").kendoListView({
dataSource: ds,
template : $("#template").html()
});
Now, what you should do is display one or the other depending on the width:
// Display Grid (and hide ListView)
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
// Display ListView (and hide Grid)
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
Where CSS class ob-hidden is:
.ob-hidden {
display: none;
visibility: hidden;
width: 1px;
}
Now, the only remaining question is invoke one or the other depending on the width. You can user jQuery resize event for detecting changes.
So, enclose both ListView and Grid in a DIV with id container:
<div id="container">
<div id="grid"></div>
<div id="list" class="ob-hidden"></div>
</div>
and define the resize handler as:
$("window").on("resize", function(e) {
var width = $("#container").width();
console.log(width);
if (width < 300) {
console.log("list");
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
} else {
console.log("grid");
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
}
});
IMPORTANT: Whatever you do for getting this same result, please, don't create and destroy the Grid and the ListView each time there is a resize. This a computationally expensive operation.
See it in action here: http://jsfiddle.net/OnaBai/JYXzJ/3/
I have a toggle button which works perfectly. The javascript and view is below:
jQuery:
$('.list-delist-link').delegate("a", "click", function (e) {
var obj = $(this);
if ($(this).hasClass('delist-property')) {
// Post to controller
e.preventDefault();
} else {
// Post to controller
e.preventDefault();
}
});
View:
<div class="list-delist-link">
#if(item.IsPropertyDisabled) {
#Html.ActionLink("List", "Enable", "Property", new { id = item.PropertyId }, new { #class="list-property other-button" })
} else {
#Html.ActionLink("Delist", "Disable", "Property", new { id = item.PropertyId }, new { #class="delist-property other-button" })
}
</div>
However, now I want to add a confirmation dialog box before the ajax action. However, everything breaks up when I am try to do that ... I am not sure why. I have the jQuery and css files on the layout page
The changes I made are listed below:
Changes to jQUery:
var obj;
$('.list-delist-link').delegate("a", "click", function (e) {
obj = $(this);
$("#dialog-confirm").dialog(open):
e.preventDefault();
});
Additional jQuery for modal confirmation:
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false, height:140, modal: true,
buttons: {
"Delete all items": function() {
if (obj.hasClass('delist-property')) {
// Post to controller
} else {
// Post to controller
}
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
Additional div in View:
<div id="dialog-confirm" title="Are you sure?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Can you please tell me what is wrong?
You must add autoOpen: false, look this
$( "#dialog-confirm" ).dialog({
autoOpen : false,
resizable: false, height:140, modal: true,
buttons: {......
I am a completely new to mvc and trying to create a dummy application to learn mvc 3.
I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application.
With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.
so far I have
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: "hi there",
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});}); </script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
#Html.Partial("_CreateAlbumPartial")</div>
Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views?
How do I update the controller class to cater for the partial view?
Sorry if these are easy to do, im 3 days into mvc :)
Try something like this:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
We used the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:
public ActionResult CreateAlbumPartial()
{
return View("_CreateAlbumPartial");
}
To improve Darin answer, we can move the div loading code in the button click event.
In this way all position's alghorithms of the dialog works on the new text, and so the dialog is placed correctly.
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$('#dialog').load("#Url.Action("CreateAlbumPartial")",
function (response, status, xhr) {
$('#dialog').dialog('open');
});
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">