I have a grid, and on detail view I am using a tabstrip, each tab strip contains a grid. The problem is that when clicking on the tabs, nothing happens. I am using 2010.3.1110 release, and have updated all of the jQuery.
Here is my site.Master
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Styles/Site.css?v=<%=DateTime.Now%>" rel="stylesheet" type="text/css" />
<script src="../../Scripts/2010.3.1110/jquery-1.4.3.min.js" type="text/javascript"></script>
<%=
Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.DefaultPath("~/Content/2010.3.1110/")
.Add("telerik.common.min.css")
.Add("telerik.iks.min.css"))
%>
<script type="text/javascript">
$(function () {
$.fn.loadSelect = function (data) {
return this.each(function () {
this.options.length = 0;
var select = this;
$.each(data, function (index, itemData) {
var option = $('<option value="' + itemData.Value + '">' +
itemData.Text + '</option>');
$(select).append(option);
});
});
};
});
function submitform() {
document.myform.submit();
}
//do all this when the dom is loaded
$(function () {
//get all delete links (note the class i gave them in the html)
$("a.delete-link").click(function () {
//basically, if confirm is true (ok button is pressed), then
//the click event is permitted to continue, and the link will
//be followed - however, if the cancel is pressed, the click event will be stopped here
return confirm("Are you sure you want to delete this?");
});
});
//do all this when the dom is loaded
$(function () {
//get all delete links (note the class i gave them in the html)
$("a.save-before-link").click(function () {
//basically, if confirm is true (ok button is pressed), then
//the click event is permitted to continue, and the link will
//be followed - however, if the cancel is pressed, the click event will be stopped here
return confirm("Did you save before clicking this link?");
});
});
</script>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">
<asp:ContentPlaceHolder ID="HeaderContent" runat="server" />
</div>
<div id="sidebar">
<asp:ContentPlaceHolder ID="SideBarContent" runat="server" />
</div>
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</div>
<div id="footer">
<%
Html.RenderPartial("SiteMasterFooter");%>
<div style="clear: both;"><!-- --></div>
</div>
<div style="clear: both;"><!-- --></div>
<%Html.Telerik().ScriptRegistrar().DefaultGroup(asset => asset.DefaultPath("~/Scripts/2010.3.1110")
.Add("jquery-1.4.3.min.js")
.Add("telerik.common.min.js")
.Add("telerik.examples.min.js")
.Add("jquery.validate.min.js")
.Add("telerik.panelbar.min.js"))
.Render();%>
</body>
And here is my Grid
Html.Telerik().Grid(Model)
.Name("InvoiceDataGrid2")
.Columns(columns =>
{
columns.Bound(s => s.Company.CompanyName)
.Title("Company Name");
columns.Bound(s => s.ManifestCount)
.Title("# of Manifests");
columns.Bound(s => s.ManifestTimeCount)
.Title("Manifest Time");
columns.Bound(s => s.FieldOfficeTimeCount)
.Title("Office Time");
})
.DetailView(details => details.Template(e =>
{
%>
<%
Html.Telerik().TabStrip().Name("tabstrip_test_" + e.Company.CompanyName )
.Items(items =>
{
items.Add().Text("Blah 1").Content(() =>
{
%>
Blah blah blah
<%
});
items.Add().Text("Blah 2").Content(() =>
{
%>
Blah blah blah
<%
});
})
.Render();
%>
<%
}))
.Pageable(paging => paging.PageSize(5))
.Sortable()
.Render();
%>
I'm essentially copying your demo regarding server detail binding, http://demos.telerik.com/aspnet-mvc/grid/detailsserverside but it just doesn't want to work. I have made sure I'm using telerik.validate.min.js v1.7 and adding in telerik.common.min.js but again, it's not working.
OK, so i it was a stupid problem. The reason it was not working was because the name that i was dynamically setting, had a space in it. When i set it the name to have the id of the item as opposed to the name, it worked fine.
Related
Html5 dialogs are simple. Shoulda been there 15 years ago!
How to get ng-show working (it doesn't) with dialogs?
<!DOCTYPE html>
<html ng-app="project">
<head>
<meta charset='UTF-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('project', [])
.controller('TheController', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
dialogShowing = true;
document.getElementById('theDialog').show();
};
$scope.hideDialog = function () {
dialogShowing = false;
document.getElementById('theDialog').close();
};
});
</script>
</head>
<body ng-controller="TheController">
<div> Hello
<!-- dialog, where it is placed in the source, doesn't take up space -->
<dialog id="theDialog">
<div>
<h3>Simple Angular Html5Dialog</h3>
<hr/>
<p>I am very well, thank you</p>
<button ng-click="hideDialog()">No, thank you</button>
</div>
</dialog>
how are you?
</div>
<button ng-click="showDialog()">^ Click for the answer</button>
</body>
</html>
The only thing I have been able to get working is .open() and .close() on the dialog widget itself, and have to simulate ng-show/hide, above.
Advice?
I'm not sure what browser you are using, but dialog is very much unsupported by most browsers (http://caniuse.com/#search=dialog). If it's a simple modal you're looking to create why not use a div and style it accordingly?
It's perfectly possible. Here's a demo from my blog:
<div style="width: 600px;" id="example">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var App = angular.module("MyApp", []);
// Make ng-show/hide doesn't work with <dialog>
App.controller('DialogDemo', ['$scope', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
$scope.dialogShowing = true;
$scope.whatHappened = "something happened that needs a dialog";
document.getElementById('theDialog').showModal();
};
$scope.hideDialog = function () {
$scope.dialogShowing = false;
document.getElementById('theDialog').close();
$scope.whatHappened = undefined;
};
}]);
</script>
<div style="align-content: center" ng-app="MyApp" ng-controller="DialogDemo">
(text above button)<br/>
<button ng-click="showDialog()">Click me</button><br/>
(text below button, and above dialog in source)<br/>
<dialog id="theDialog">
<div>
<h3>Ooops</h3>
<hr/>
<div>
<!-- see note above about double-curly-brace -->
{{whatHappened}}
</div>
<hr/>
<button ng-click="hideDialog()">OK</button>
</div>
</dialog>
(text below dialog in source)<br/>
<span style="font-weight: bold" ng-show="dialogShowing">Dialog should now be show (modal style) in the center of the page.</span>
</div>
</div>
I have form created in symfony2, which at the end renders button to submit form. When I add ng-app="myApp" everything works fine, but I can't submit form which is on this page. Why is that and how to unblock this?
FORM:
->add('company','choice',array(
'mapped' => false,
'attr'=>array('ui-select2'=>'myArray', 'ng-model'=>'form.company','ng-options'=>'option.value as entity.name_company for entity in entities','ng-change' => 'changeItem()')
))
->add('project',null,array(
'attr'=>array('ui-select2'=>'myArray2', 'ng-model'=>'form.task','ng-options'=>'option.value as entity.description_task for entity in tasks')
))
VIEW:
<html ng-app="flowApp">
<head>
<link rel="stylesheet" href="{{ asset('external-libs/select2/select2.css')}}">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="{{ asset('external-libs/select2/select2.js')}}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="{{ asset('external-libs/select2.js')}}"></script>
<script src="{{ asset('external-libs/app.js') }}"></script>
<style>
.select2-choice { width: 220px; }
</style>
</head>
<body>
<div class="container" ng-controller="MainCtrl">
{{ form(form) }}
</div>
</body>
</html>
SCRIPT:
var app = angular.module('flowApp', ['ui.select2']).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
}
);
app.controller('MainCtrl', function ($scope, $element,$http) {
$http({method: 'GET', url: 'companies.json'}).
success(function(data, status, headers, config) {
$scope.entities = data.entities;
$scope.form = {company: $scope.entities[0].value };
console.debug(data.entities);
});
});
Well documentation says:
For this reason, Angular prevents the default action (form submission
to the server) unless the element has an action attribute
specified
so you can add action attribute to your form. In my example i am using grenerateUrl function, but you should generate url of your current route(route of controller where the form is generated)
$data = array();
$form = $this->createFormBuilder($data,
array("action" => $this->generateUrl("route_to_curent_path"))))
->add('field', 'text')
->add('submitButton', 'submit')
->getForm();
EDIT:
just now found out that this is a duplicate question here and here and here
and here(this link being the most upvoted answer)
We need more informations, did you let browser validate form ? To remove :
{{ form(form, {
'attr': {
novalidate,
},
})
}}
Maybe errors popup are hidden (happen with various complexe form fields)
When you said "i can't submit", is the submit button unable ? Errors happen after sumbission ?
Suppose i have 5 textboxes in a list.I enter text input in the first text box and click send. Now i want the input value entered to be showed in all the other textboxes in the list.
Following is my html code:-
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Plunker</title>
<script src="./scripts/angular.min.js"></script>
<script src="./scripts/app.js"></script>
</head>
<body ng-app="chatApp">
<div ng-controller="chatController">
<ul>
<li ng-repeat="chat in chats">
<input type="text"/>
<button ng-click="sendChat()">Send</button>
<button ng-click="deleteChat($index)">Delete</button>
</li>
</ul>
<button ng-click="addChat()">Click me to add</button>
</div>
</body>
</html>
Following is my angular code:-
var app=angular.module('chatApp',[]);
app.controller('chatController',['$scope',function($scope){
$scope.chats=[];
$scope.addChat = function() {
if($scope.chats.length<10)
{
$scope.chats.push({name:''});
}
}
$scope.deleteChat=function(index){
$scope.chats.splice(index,1);
}
$scope.sendChat=function(data){
}
}]);
I have a sendChat function where i was thinking to put the code.
Add model in your input field
<input type="text" ng-model="chat.msg"/>
Then pass the selected msg
<button ng-click="sendChat(chat)">Send</button>
Then assign msg in other textboxes
$scope.sendChat = function(data) {
$scope.chats.map(function(x) {
x.msg = data.msg;
})
}
DEMO
We have ASP.NET application where we use AngularJS. There's a page with the table (list) that contains pictures and their properties. The pictures are in first column of the table. The code looks as following:
<td>
<a ng-href="{{pic.FullUrl}}" target="_blank">
<img class="img-thumbnail" ng-src="{{pic.FullUrl}}" alt="{{pic.AltText}}" />
</a>
</td>
We can edit some picture by clicking "Edit" button and go to the next page (edit). After we made the changes, we click "Back" button to return to the previous page (list).
The issue is the image on first page hasn't been refreshed if we changed it on edit page, that is pic.FullUrl doesn't take effect.
I've tried to use the watch function, but no luck.
How to make it work?
UPDATE
We have a service:
PictureApp.factory('PictureService', function ($http, $location) {
var PictureService = function () {
this.ToList = function (objType, objId, mode) {
$location.path('/' + objType + '/' + objId + '/' + mode);
};
And we use it when accept changes on edit page in this way:
$scope.Accept = function () {
...
query.then(function () {
PictureService.ToList($routeParams.objType, $routeParams.objId, $routeParams.mode);
});
};
As you can see we call ToList and go to list page, but without reloading.
In list's controller we have this:
$scope.$watch('rbMode', function (val) {
PictureService.ToList($routeParams.objType, $routeParams.objId, val);
});
On list page we have this:
<div ng-if="dataLoaded">
<div ng-switch="rbMode">
<div ng-switch-when="static">
<div ng-include="'partials/Pic/PicTable.htm'" onload="this.pics = data;"></div>
</div>
<div ng-switch-when="banner">
<accordion close-others="false">
<accordion-group is-open="expandBanners" heading="{{pics[0].TypeDescription}}" ng-repeat="pics in data">
<div ng-include="'partials/Pic/PicTable.htm'" onload="this.pics = $parent.pics;" ></div>
</accordion-group>
</accordion>
</div>
</div>
</div>
And PicTable.htm looks as following:
<tr ng-repeat="pic in pics" ng-class="{'movable-row':isBanner}">
<td>{{pic.PictureLinkID}}</td>
<td>
<a ng-href="{{pic.FullUrl}}" target="_blank">
<img class="img-thumbnail" ng-src="{{pic.FullUrl}}" alt="{{pic.AltText}}" tooltip-popup-delay='1000' tooltip-placement="right" tooltip="Кликните, чтобы открыть в полном размере" />
</a>
</td>
Sounds like you have an image cache issue. Place a timestamp parameter on the end of your image url "*.jpg?ts=3324324". This will let the browser know it needs to refetch the image once it has been edited. Initialize the timestamp when the page loads and update the timestamp whenever an image is edited.
You can try the plnkr below which you can observe in your network panel, will fetch the image each time the timestamp is updated.
Edit: updated to demonstrate communication across controllers.
http://plnkr.co/edit/lp9lwkR3hgsqtIt4c3N0?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-controller="cntrl">
<img ng-src="{{imgurl}}'?ts={{lastEdit}}" />
</div>
<div ng-controller="editCntrl">
<button ng-click="updateTS()">Update ts</button>
</div>
<script>
var app = angular.module("app",[]);
app.controller("cntrl",function($scope){
$scope.lastEdit = (new Date()).getTime();
$scope.imgurl = "http://dummyimage.com/600x400/000/fff";
$scope.$on("edited",function(){
$scope.lastEdit = (new Date()).getTime();
});
});
app.controller("editCntrl",function($scope,$rootScope){
$scope.updateTS = function(){
$rootScope.$broadcast("edited");
}
});
angular.bootstrap(document,["app"]);
</script>
</body>
</html>
You can add time stamp to uniquely identify image url on change.
on edit add the time stamp like this...
pic.FullUrl = "...path/pic.jpg"+ "?ts=" +new Date();
this will tell the browser that your image had been changed and it will do refresh.
I am trying to do some calculation but it is getting done as soon as I enter the amount. I just want this to happen on click of a button rather than automatically.
What I have done so far:
<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<title>Angular JS - programming-free.com</title>
<link href="https://dl.dropbox.com/u/96099766/DetailModalExample/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/angularjs.min.js"></script>
</head>
<body>
<div ng-controller="myAppController" style="text-align:center">
<p style="font-size:28px;">
Enter Quantity:
<input type="text" ng-model="quantity"/>
</p>
<h2>Total Cost: Rs.{{calculateval(quantity,10)}}</h2>
</div>
<script type="text/javascript">
var myAppModule = angular.module('myAppModule', []);
myAppModule.controller('myAppController', function($scope,calculateService) {
$scope.quantity=1;
$scope.calculateval = function(xval,yval) {
return calculateService.calculate(xval,yval);
}
});
// Service
myAppModule.factory('calculateService', function(){
return {
calculate: function(xval,yval){
return xval*yval;
}
}
});
</script>
</body>
</html>
The calculation occurs immediately since the calculation call is bound in the template, which displays its result when quantity changes.
Instead you could try the following approach. Change your markup to the following:
<div ng-controller="myAppController" style="text-align:center">
<p style="font-size:28px;">Enter Quantity:
<input type="text" ng-model="quantity"/>
</p>
<button ng-click="calculateQuantity()">Calculate</button>
<h2>Total Cost: Rs.{{quantityResult}}</h2>
</div>
Next, update your controller:
myAppModule.controller('myAppController', function($scope,calculateService) {
$scope.quantity=1;
$scope.quantityResult = 0;
$scope.calculateQuantity = function() {
$scope.quantityResult = calculateService.calculate($scope.quantity, 10);
};
});
Here's a JSBin example that demonstrates the above approach.
The problem with this approach is the calculated result remains visible with the old value till the button is clicked. To address this, you could hide the result whenever the quantity changes.
This would involve updating the template to add an ng-change on the input, and an ng-if on the result:
<input type="text" ng-change="hideQuantityResult()" ng-model="quantity"/>
and
<h2 ng-if="showQuantityResult">Total Cost: Rs.{{quantityResult}}</h2>
In the controller add:
$scope.showQuantityResult = false;
$scope.calculateQuantity = function() {
$scope.quantityResult = calculateService.calculate($scope.quantity, 10);
$scope.showQuantityResult = true;
};
$scope.hideQuantityResult = function() {
$scope.showQuantityResult = false;
};
These updates can be seen in this JSBin demo.