I'm using SWFUpload in my MVC3 program.It works well in IE and Chrome.But my files cannot be uploaded in FireFox.It doesn't even go into the Upload Action.
In my program,users should log in first.And when I use SWFUpload in a test program which users do not have to log in, it also works well.
Can anyone tell me how to solve this problem ?
This is my code:
Js:
swfupload1 = new SWFUpload({
upload_url: '#Url.Action("Upload")',
post_params: { "name": "value" },
file_size_limit: "200000000",
file_types: "*.jpg;*.gif;*.png;*.jpeg",
file_types_description: "",
file_upload_limit: "1",
file_queue_limit: "1",
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
file_queued_handler: fileQueued,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: uploadSuccess,
upload_complete_handler: uploadComplete,
upload_start_handler: uploadStart,
button_image_url:'#Url.Content("~/Swfupload/images/XPButtonNoText2_160x22.png")',
button_placeholder_id: "spanButtonPlaceholder1",
button_width: 42,
button_height: 22,
button_text: '<span class="buttonCss">选择</span>',
button_text_style: ".buttonCss { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }",
button_text_top_padding: 1,
button_text_left_padding: 5,
button_cursor: SWFUpload.CURSOR.HAND,
button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
flash_url: '#Url.Content("~/Swfupload/swfupload.swf")',
custom_settings: { upload_target: "divFileProgressContainer1" },
debug: false
});
Controller:
[HttpPost]
public ActionResult Upload(HttpPostedFileBase filedata)
{
if (null != filedata)
{
filedata.SaveAs(Server.MapPath("/File/Coverurl"+fileData.FileName));
}
return Json("");
}
I would suggest interested parties have a look at a solution here:http://www.cnblogs.com/rupeng/archive/2012/01/30/2332427.html.
Related
how do we override the styles and provide the space between the content and wrapper,
tried to add styles
const myTheme: ThemeInput = {
componentStyles: {
Menu: {
root: {
color: "yellow",
//tried to provide maring space but it is taking for whole menu, rather menuitem content
},
}
}
};
I did the following. There is still some slight jumping which I think is coming from the MenuItemWrapper. You could play around with the numbers and see if you can get the desired size. The docs are really not clear and I don't know if this approach will be removed in later versions.
<Menu underlined primary defaultActiveIndex={0} styles={{ border: 0 }}
items={[
{
key: "itemOne",
content: "ItemOne",
styles: ({ props }) => {
return {
paddingBottom: 5,
marginBottom: props.active ? 0 : 5,
":hover": {
marginBottom: 0,
paddingBottom: 5
}
};
}
},
// ...other items
]}
/>
You can use custom css for this. You need to override below class by inspecting
<span class="ui-menu__itemcontent of og oh oi bz gx" dir="auto">Editorials</span
as follow:
.oi {
margin-bottom: 0.7143rem;
}
.
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
});
List item
I have a page which loads a kendo TreeList by pressing a button. The data is for the moment statically defined in a variable where it stays as a basis for the Kendo TreeList datasource.
I have a datasource definition which I mostly copied from Telerik Website.
I have a treelist with a couple of requirements in terms of CRUD.
level1 - nothing
level2 - add new childnodes only
level3 - edit and delete
Edit should be doubleclick on a level3 item
CRUD command buttons need to be icon-only (no text in the buttons)
I could not achieve this with the buildin CRUD controls unfortunately so I used a Template column where the buttons are placed based on their "Type" field.
Now this has worked but after some changes which I can't undo somehow the add function does not work anymore. It works but new childnode is only visible after a edit ordelete of another node. (as if the change event is not triggered during add). The Add button in the treeList calls a function addProduct where at the end I try to pushCreate directly to the datasource. However the Transport.create is never invoked. It only gets invoked after another Crud action triggers it
Can anybody see what's wrong and couldn't this all be achieve with much easier approach?
Here's the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Grid - CRUD operations with local data</title>
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<!--<script src="Scripts/kendo.all.min.js"></script>-->
<script src="Scripts/kendo.all.js"></script>
</head>
<body>
<style>
.hidden {
display: none;
}
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 0px;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
}
</style>
<div id="buttons">
<br />
<p>
<button name="clear" id="clear" onclick="myclear()">Clear grid</button>
<button name="load" id="load" onclick="loadLocal()">Load from local DB</button>
</p>
<br />
version 1.01<br />
<br />
</div>
<div id="treelist"></div>
<script id="btn-template" type="text/x-kendo-template">
# if (Code == "Product") { #
<a id="btnupdate" class="k-button k-button-icontext k-grid-update column hidden" title="Update product" onclick="update(this)" href="\#"><span class="k-icon k-update"></span></a>
<a id="btndelete" class="k-button k-button-icontext k-grid-delete column" title="Delete product" data-command="destroy" href="\#"><span class="k-icon k-delete"></span></a>
# } else if (Code == "Requirement") { #
<a class="k-button k-button-icontext k-grid-add column" title="Add a product to this requirement" onclick="addProduct(this)" href="\#"><span class="k-icon k-add"></span></a>
# } #
</script>
<script>
var EPDdata // For holding the data of the TreeList
function loadLocal() {
EPDdata = [
{ Id: 1, Description: "Item1", Code: "Category", parentId: null },
{ Id: 2, Description: "Item2", Code: "Requirement", parentId: 1 },
{ Id: 3, Description: "Item3", Code: "Product", parentId: 2 },
{ Id: 4, Description: "Item4", Code: "Requirement", parentId: 1 },
{ Id: 5, Description: "Item5", Code: "Product", parentId: 4 },
{ Id: 6, Description: "Item6", Code: "Product", parentId: 4 },
{ Id: 7, Description: "Item7", Code: "Requirement", parentId: 1 },
{ Id: 8, Description: "Item8", Code: "Requirement", parentId: 1 },
{ Id: 9, Description: "Item9", Code: "Product", parentId: 8 },
{ Id: 10, Description: "Item10", Code: "Product", parentId: 8 }
]
LoadTree();
};
function LoadTree() {
var EPDdataNextID = EPDdata.length + 1;
var LocaldataSource = new kendo.data.TreeListDataSource({
transport: {
read: function (e) {
// on success
e.success(EPDdata);
},
create: function (e) {
// assign an ID to the new item
e.data.Id = EPDdataNextID++;
// save data item to the original datasource
EPDdata.push(e.data);
// on success
e.success(e.data);
},
update: function (e) {
// locate item in original datasource and update it
EPDdata[getIndexById(e.data.Id)] = e.data;
// on success
e.success();
},
destroy: function (e) {
// locate item in original datasource and remove it
EPDdata.splice(getIndexById(e.data.Id), 1);
// on success
e.success();
}
},
error: function (e) {
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
pageSize: 10,
expanded: true,
batch: false,
schema: {
model: {
id: "Id",
expanded: true,
fields: {
Id: { type: "number", editable: false, nullable: true },
Description: { type: "string", validation: { required: true } },
Code: { type: "string" },
parentId: { type: "number", editable: true, nullable: true }
}
}
}
});
$("#treelist").empty(); // only 1 treelist on the page please
$("#treelist").kendoTreeList({
dataSource: LocaldataSource,
pageable: false,
edit: onEdit,
columns: [
{ field: "Description", title: "Description", width: "400px" },
{ field: "Code", width: "120px" },
{ field: "Id", title: "ID", width: "30px" },
{ field: "parentId", title: "PID", width: "30px" },
{ width: "35px", template: $("#btn-template").html() },
{ command: ["create", "edit", "destroy"] }
],
editable: "inline"
});
var treeList = $("#treelist").on("dblclick", function (e) {
var treeList = $("#treelist").data("kendoTreeList");
var rowindex = e.target.parentNode.rowIndex; // get rowindex
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var dataItem = $("#treelist").data("kendoTreeList").dataItem(tr);
if (dataItem.Code == "Product") {
$("#treelist").find(".edit").addClass("hidden");
$("#treelist").find(".edit").removeClass("edit");
$("#treelist").find(".delete").removeClass("hidden");
$("#treelist").find(".delete").removeClass("delete");
treeList.saveRow(); // first save all other rows
treeList.editRow(tr[0]);
};
}); // double click function
}; // Function CreatetreeList
function onEdit(arg) {
var tr = $(arg.container);//.closest("tr"); // get the current table row (tr)
tr.find("#btndelete").addClass("hidden"); //remove btndelete from commandcolumn
tr.find("#btndelete").addClass("delete"); //put class to select the btn later on
tr.find("#btnupdate").removeClass("hidden"); //make btnupdate visible in commandcolumn
tr.find("#btnupdate").addClass("edit"); //put class to select the btn later on
};
function update(e) { // update the edited row
var tr = $(e).closest("tr"); // get the current table row (tr)
var treeList = $("#treelist").data("kendoTreeList");
treeList.saveRow();
tr.find("#btndelete").removeClass("hidden");
tr.find("#btndelete").removeClass("delete");
tr.find("#btnupdate").addClass("hidden");
tr.find("#btnupdate").removeClass("edit");
};
function addProduct(e) {
var treeList = $("#treelist").data("kendoTreeList");
var dataSource = treeList.dataSource;
var data = dataSource.data;
var tr = $(e).closest("tr"); // get the current table row (tr)
var dataItem = treeList.dataItem(tr);
dataSource.pushCreate({ Id: 15, Description: "New", Code: "Product", parentId: dataItem.Id });
alert("Done");
};
function getIndexById(id) {
var idx,
l = EPDdata.length;
for (var j; j < l; j++) {
if (EPDdata[j].Id == id) {
return j;
}
}
return null;
}
</script>
</body>
</html>
I found the answer !!!
The datasource pagesize is set to 10 and the TreeList was set to paging: false. In all my tests I started with sample data of 10 nodes. All the time I was adding an 11th and 12th record which wasn't showing up until I deleted another node...
Do these things only happen to me?
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);
This is my JSFiddle
Query - When I am trying to establish the connnection between IDs A1 and B the connection pink line shows away from Div B. Below the pink line highlighted is away from Div B. This is the problem
JQuery
//Setting up drop options
var targetDropOptions = {
};
connectorHoverStyle = {
lineWidth: 7,
strokeStyle: "#2e2aF8",
cursor: 'pointer'
}
//Setting up a Target endPoint
var targetColor = "#316b31";
var targetEndpoint = {
anchor: "LeftMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: targetColor },
//isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: -1,
isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
//Setting up a Source endPoint
var sourceColor = "#ff9696";
var sourceEndpoint = {
anchor: "RightMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: sourceColor },
isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: sourceColor, lineWidth: 4 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: -1,
// isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
jsPlumb.bind("ready", function () {
jsPlumb.animate($("#A"), { "left": 50, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#B"), { "left": 300, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#C"), { "left": 540, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#D"), { "left": 780, "top": 100 }, { duration: "slow" });
var window = jsPlumb.getSelector('.window');
jsPlumb.addEndpoint(window, targetEndpoint);
jsPlumb.addEndpoint(window, sourceEndpoint);
jsPlumb.addEndpoint(jsPlumb.getSelector('#A1'), sourceEndpoint, targetEndpoint);
jsPlumb.draggable(window);
jsPlumb.importDefaults({
ConnectionOverlays: [
["Arrow", { location: 0.8}],
["Label", {
location: 0.5,
id: "label",
cssClass: "aLabel"
}]
]
});
});
HTML
<div id="A" class="a window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>A</strong>
<div id="A1">
</div>
</div>
<div id="B" class="b window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>B</strong>
</div>
<div id="C" class="c window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>C</strong>
</div>
<div id="D" class="d window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>D</strong>
</div>
I wanted to have multiple Anchors on the same Div provided ID should be the attributes for those anchors somehow.
In order to accomplish this. I first removed the extra div. Now Suppose somebody wants to display two Source Anchors. For that I made modification in
jquery.jsPlumb-1.3.16-all-min.js file
Following was the Original line of code in this file
this.makeNode = function (E, D) {
return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2
}
Modification is below. I am now adding id attributes to each anchor(circle).
this.makeNode = function (E, D) {
var attr = $('#'+obj[0].endpoint.elementId).attr('actionID');
return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2, id: attr
}
How am I getting the value of id ?
In, the Div shown above in the query, I added an Attribute Action and assigned some ID that I want to assign. Like below
jsPlumb.getSelector('#first').attr('actionID', 'p1');
and finally adding the EndPoint
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), sourceEndpoint);
Similarly, I can assign as many distinct Anchors in terms of IDs as much required.
jsPlumb.getSelector('#first').attr('actionID', 'p3');
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), [TopMiddle]);
How will you assign the Source ID and target ID on Connection ?
jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
if (CurrentConnection.connection.targetId ==
CurrentConnection.connection.sourceId)
jsPlumb.detach(CurrentConnection.connection);
else {
var obj = CurrentConnection.sourceEndpoint.canvas.children[0].firstChild.id;
init(CurrentConnection.connection, obj);
}
});
init = function (connection, CircleID) {
connection.getOverlay("label").setLabel(CircleID + "-" + connection.targetId);
};
Hope this will be helpful to those users facing the same issue...