I am new in kendo-ui.I am integrating kendo-ui with angularjs.I want to show the two buttons in single cell. I dont know how can i achieve this.
Here is my code:
<div id="mygrid" kendo-grid k-data-source="products"
k-pageable='{ "refresh": true, "pageSizes": true }'
k-columns='[
{ "field": "ProductName", "title": "Name"},
{ "field": "Supplier.SupplierName", "title": "Supplier" },
{ "field": "Category.CategoryName", "title": "Category" },
{ "template": "<button class=\"k-button\" ng-click=\"clickMe(#=ProductID#)\">Delete this item</button>", "title": "Delete" }
]'
k-sortable="true", k-groupable="true", k-filterable="true"
>
</div>
<div kendo-window="modal" k-title="'Title'" k-visible="false" k-modal="true">
Product Id clicked: {{ productId }}
</div>
Related
Hi I want to assign method name dynamically and use them.Please help.
I am trying something like following.
<div class="dashboard row">
<div class="card col-lg-3" *ngFor="let card of cards">
<h5 class="card-title">{{card.title}}</h5>
<div class="card-body">
<ul style="list-style-type:none;">
<li *ngFor="let cardFeature of cardFeatures" style="padding-left: 7px;">
{{cardFeature.title}}
<button (click)="[cardFeature.method]">{{cardFeature.method}}</button>
</li>
</ul>
</div>
</div>
CardFeatures is an array where I am defining the JSON data and there I am defining my method name so that I can dynamically read call that. But I am unable to achieve the goal.
Please help to resolve the same.
This is what I have in my ts file
cardFeatures = [
{
"name": "id",
"title": "ID",
"enable": true,
"link": "/register",
"method": "meth1()"
},
{
"name": "profile",
"title": "profile",
"enable": true,
"link": "/link1",
"method": "meth2()"
}
]
cards = [
{
title: "Card1"
},
{
title: "Card2"
}]
Try like this:
Working Demo
cardFeatures = [
{
name: "id",
title: "ID",
enable: true,
link: "/register",
method: () => this.meth1()
},
{
name: "profile",
title: "profile",
enable: true,
link: "/link1",
method: () => this.meth2()
}
];
Template:
<div class="card-body">
<ul style="list-style-type:none;">
<li *ngFor="let cardFeature of cardFeatures" style="padding-left: 7px;">
{{cardFeature.title}}
<button (click)="cardFeature.method()">Test</button>
</li>
</ul>
</div>
EDIT:
As per your comment, you can also try this solution
I'm trying to ng-repeat and load the main menu from a JSON.
Here's the scenario.
Please check the layout screenshot or you might not be able to understand
MainMenu - Groceries,Listing,Product,Blog,Gallery,Pages,Woman,Electronics,Contact
Submenu - Corporate,Electronics,Kids,Background Isotope,Login,Sign Up
Website Layout Screenshot
JSON//
[{"title":"Corporative","link":"index_corporate.html"},
{"title":"Electronics","link":"index_corporate.html"},
{"title":"Kids","link":"index_corporate.html"},
{"title":"Background Isotope","link":"index_corporate.html"},
{"title":"Login","link":"#/login"},
{"title":"Sign Up","link":"#/register"}
]
Controller//
$http.get('data.json').success(function(dataForSubmenu){
$scope.menu = dataForSubmenu;
});
HTML//
<dt class="item">
<ul class="sf-menu">
<li><a href="index.html”>Groceries</a>//Titles to be repeated from JSON
<ul>
//Dropdown Menu Under Main Menu
<li ng-repeat="menuData in menu">{{menuData.title}}</li>
</ul>
</li>
</ul>
</dt>
<dd></dd>
<dt class="item">
<ul class="sf-menu">
<li><a href="page2.html”>Listing</a>//Titles to be repeated from JSON
<ul>
//Dropdown Menu Under Main Menu
<li ng-repeat="menuData in menu">{{menuData.title}}</li>
</ul>
</li>
</ul>
</dt>
<dd></dd>
<dt class="item">
<ul class="sf-menu">
<li><a href="page3.html”>Product</a>//Titles to be repeated from JSON
<ul>
//Dropdown Menu Under Main Menu
<li ng-repeat="menuData in menu">{{menuData.title}}</li>
</ul>
</li>
</ul>
</dt>
What I want to do is
Load the MainMenuItems using ng-repeat using data from JSON
Load DIFFERENT Sub Menus under multiple main menus using ng-repeat with data from JSON
Repeat should work with the HTML structure I have got going (Using a template for the website so can't change much in that)
your json should be something like this:
[{
"menu":[{
"mainMenuName": "Groceries",
"mainMenuLink": "link"
"subMenu": [{
"title": "Corporative",
"link": "index_corporate.html"
}, {
"title": "Electronics",
"link": "index_corporate.html"
}, {
"title": "Kids",
"link": "index_corporate.html"
}, {
"title": "Background Isotope",
"link": "index_corporate.html"
}, {
"title": "Login",
"link": "#/login"
}, {
"title": "Sign Up",
"link": "#/register"
}]
}, {
"mainMenuName": "Listing",
"mainMenuLink": "link",
"subMenu": [{
"title": "Corporative",
"link": "index_corporate.html"
}, {
"title": "Electronics",
"link": "index_corporate.html"
}, {
"title": "Kids",
"link": "index_corporate.html"
}, {
"title": "Background Isotope",
"link": "index_corporate.html"
}, {
"title": "Login",
"link": "#/login"
}, {
"title": "Sign Up",
"link": "#/register"
}]
}, {
"mainMenuName": "Product",
"mainMenuLink": "link",
"subMenu": [{
"title": "Corporative",
"link": "index_corporate.html"
}, {
"title": "Electronics",
"link": "index_corporate.html"
}, {
"title": "Kids",
"link": "index_corporate.html"
}, {
"title": "Background Isotope",
"link": "index_corporate.html"
}, {
"title": "Login",
"link": "#/login"
}, {
"title": "Sign Up",
"link": "#/register"
}]
}]
}]
once you have that json in $scope.menu then your html should look like
<dt ng-repeat="menuData in menu" class="item">
<ul class="sf-menu">
<li><a href="menuData.mainMenuLink”>{{menuData.mainMenuName}}</a>
<ul>
//Dropdown Menu Under Main Menu
<li ng-repeat="subMenuData in menuData.subMenu">{{subMenuData.title}}</li>
</ul>
</li>
</ul>
</dt>
I have not tested this out yet but it should be something similar to this. if you send me the project I can take a look.
check this answer out its similar solution to what you want: https://stackoverflow.com/a/19840244/2502933
I have searched the web and found no example. I wonder if someone could help.
I have two instances of a dropdown or maybe more and I want to apply the add input dynamically to only that form but it applies to everyone with that ng-model everywhere on the web page.
The code is here https://plnkr.co/edit/PPDYKjztPF528yli9FbN
HTML:
<div class="main-content__right" ng-controller="QuestionController">
<div ng-repeat="element in questionList">
<fieldset>
<div ng-repeat="choice in formOptionData track by $index">
<a class="remove-field remove u-pull-right" ng-click="remove()">Remove</a>
<input id="input{{choice.name}}" placeholder="{{choice.label}}" type="number" name="{{choice.name}}">
</div>
<div id="add-more" class="well">
<div class="field">
<div style="width:100%;" class="dropdown">
<select name="{{options.name}}" id="select" data-ng-model="selectedValue" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="onCategoryChange(selectedValue)">
<option value="" data-id="null" disabled="" selected="">Select an item...</option>
</select>
</div>
</div>
{{formData}}
</div>
</fieldset>
</div>
</div>
APP.js
var app = angular.module("cab", []);
app.controller('QuestionController', function($scope) {
$scope.formOptionData = [];
$scope.selectedValue = {};
$scope.questionList = [{
"sectionTitle": "Travel",
"inputType": "select",
"inputElement": [{
"label": "Public transport",
"name": "travelOutgoing",
"helpInfo": "include train journeys",
"type": "select"
}, {
"label": "Taxis",
"name": "travelOutgoing",
"type": "select"
}
]
},
{
"sectionTitle": "Leisure",
"title": "Enter the amount you spend on entertainment and leisure. Leave them blank if they don\"t apply to you.",
"inputType": "select",
"inputElement": [
{
"label": "Eating out",
"name": "leisureOutgoing",
"helpInfo": "Include coffees, teas and snacks",
"type": "select"
},
{
"label": "Going out",
"name": "leisureOutgoing",
"helpInfo": "Include drinks, taxis, admission charges",
"type": "select"
}
] }
];
$scope.onCategoryChange = function(selectedItem) {
this.formOptionData.push(selectedItem);
};
$scope.remove = function(element) {
this.formData.splice(element,1);
};
});
I am having this problem which I can't find the solution to.
1) I have a dropdown list which the data is pull in from a json file
2) When the user selects a item I want to dynamically add a input box without a button.
Got a jQuery code but wanted to do it the angular way, but read that ng-Change is not the same as jquery .change?
Can anyone help or point me into the right direction of how to do this.
HTML
<div class="main-content__right" ng-controller="QuestionController">
<div ng-repeat="element in questionList">
<fieldset>
<div id="add-more" class="well">
<div class="field">
<div style="width:100%;" class="dropdown">
<select name="{{options.name}}" id="select" data-ng-model="formData"
data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'"
ng-change="onCategoryChange(formData)">
<option value="" data-id="null" disabled="" selected="">Select an item...</option>
</select>
</div>
</div>
{{formData}}
</div>
</fieldset>
</div>
app.js
var app = angular.module("cab", []);
app.controller('QuestionController', function($scope) {
var $scope.formData = {};
$scope.questionList = [{
"sectionTitle": "Travel",
"subTitle": "How much do you spend on these items for your car?",
"inputType": "select",
"inputElement": [{
"label": "Public transport",
"name": "travelOutgoing",
"helpInfo": "include train journeys",
"type": "select"
}, {
"label": "Taxis",
"name": "travelOutgoing",
"type": "select"
}, {
"label": "Bicycle",
"name": "travelOutgoing",
"helpInfo": "general running costs such as repair or rental",
"type": "select"
}, {
"label": "Car rental",
"name": "travelOutgoing",
"helpInfo": "include fuel, parking charges and tolls",
"type": "select"
}
]
}];
$scope.onCategoryChange = function () {};
});
can be found on http://plnkr.co/edit/PPDYKjztPF528yli9FbN?p=preview
Your controller function needs to add each selection to an array on scope:
Controller
app.controller('QuestionController', function($scope) {
$scope.formData = [];
$scope.selectedValue = {};
$scope.questionList = [{
"sectionTitle": "Travel",
"subTitle": "How much do you spend on these items for your car?",
"inputType": "select",
"inputElement": [{
"label": "Public transport",
"name": "travelOutgoing",
"helpInfo": "include train journeys",
"type": "select"
}, {
"label": "Taxis",
"name": "travelOutgoing",
"type": "select"
}, {
"label": "Bicycle",
"name": "travelOutgoing",
"helpInfo": "general running costs such as repair or rental",
"type": "select"
}, {
"label": "Car rental",
"name": "travelOutgoing",
"helpInfo": "include fuel, parking charges and tolls",
"type": "select"
}]
}];
$scope.onCategoryChange = function(selectedItem) {
$scope.formData.push(selectedItem)
};
});
Then you can use an ng-repeat to render all of the items in formData.
HTML
<fieldset>
<div id="add-more" class="well">
<div class="field">
<div style="width:100%;" class="dropdown">
<select name="{{options.name}}" id="select" data-ng-model="selectedValue" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="onCategoryChange(selectedValue)">
<option value="" data-id="null" disabled="" selected="">Select an item...</option>
</select>
</div>
</div>
<div ng-repeat="item in formData track by $index">
<input ng-model="item.label" />
</div>
</div>
</fieldset>
I've got a JSON object with different events that looks like this:
{
"error":false,
"events":[
{
"id":1,
"title":"First entry",
"date":"2014-11-04"
},
{
"id":2,
"title":"Second entry",
"date":"2014-11-04"
},
{
"id":3,
"title":"Third entry",
"date":"2014-11-05"
},
{
"id":4,
"title":"Fourth entry",
"date":"2014-11-06"
},
{
"id":5,
"title":"Fifth entry",
"date":"2014-11-06"
}
]
}
This object is stored in $scope.events in my controller.
Now I'm looping this array to build the list of events:
<ion-list>
<div class="item item-divider">
{{event.date}}
</div>
<a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in events">
<img src="media/thumbnails/{{event.id}}.jpg">
<h1>{{event.title}}</h1>
</a>
</ion-list>
My goal is to display {{event.date}} as a list divider just once for every day. So in this examle it shoudl look like this:
2014-11-04 (divider)
First entry
Second entry
2014-11-05 (divider)
Third entry
2014-11-06 (divider)
Fourth entry
Fifth entry
I'm relly new to ionic & angular and I have no idea how to achieve this. May with some custom filter?
All in all I'm looking for something similar to Angular: Getting list with ng-repeat with dividers / separators but with the date as separator instead of initial letter.
Some ideas?
Any help/tip is really appreciated!
You can use angular.filters (https://github.com/a8m/angular-filter) to group your list by date please see demo below
var app = angular.module('app', ['angular.filter']);
app.controller('homeCtrl', function($scope) {
$scope.data = {
"error": false,
"events": [{
"id": 1,
"title": "First entry",
"date": "2014-11-04"
}, {
"id": 2,
"title": "Second entry",
"date": "2014-11-04"
}, {
"id": 3,
"title": "Third entry",
"date": "2014-11-05"
}, {
"id": 4,
"title": "Fourth entry",
"date": "2014-11-06"
}, {
"id": 5,
"title": "Fifth entry",
"date": "2014-11-06"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.9/angular-filter.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<ion-list ng-repeat="(key, value) in data.events | groupBy: 'date'">
<div class="item item-divider">
<h1> {{key}}</h1>
</div>
<a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in value">
<img src="media/thumbnails/{{event.id}}.jpg">
<h3>{{event.title}}</h3>
</a>
</ion-list>
</div>
I solved this in another SO question here, Ionic Dynamic List Divider. Basically you can modify the list (in the controller, not the source of course) to include the dates. In your view, you notice this and render them as dividers.