I have kendo window popup from another grid where i want to show detail of selected record.i am not seeing data in the grid once i got response from server.I am new to Angularjs i need help to implement code in CTRL.JS Any help or suggetion will be appreciated.
code tried so far...
CTRL.JS
$scope.vendorWinOptions = subCategoryGridConfig.vendorWinConfig;
$scope.vendorDetailOptions = subCategoryGridConfig.VendorsDetailGrid;
$scope.showDetail = function(id) {
var dataToReturn = subCategoryGridConfig.VendorsDetailGrid;
dataToReturn.dataSource = {
transport : {
read : function(options) {
SubCategory.getAllVendors().then(function(response) {
options.success = (response.data);
})
}
}
}
return dataToReturn;
$scope.$broadcast('openDetailWindow');
};
FACTORY.JS
getAllVendors: function(subcategoryId){
return $http.get('/third-party-management/rest/vendor/' + subcategoryId);
}
JSON.JS
id: 1
parentAribaId: "18682"
subCatogeryCode: "X99.99.171"
subCatogeryName: "PROFESSIONAL SERVICES BUNDLED WITH TECHNOLOGY PURCHASES"
vendorAribaId: "18682"
vendorBusinessName: "SAP"
vendorLineOfBusiness: {id: 4, vendorBusinessIdentifier: "278070", primaryLOb: "GTO", secondaryLob1: "GHR",…}
id: 4
primaryLOb: "GTO"
secondaryLob1: "GHR"
secondaryLob2: "GHR"
vendorBusinessIdentifier: "278070"
vendorName: "SAP"
modalgridconfig.js
VendorsDetailGrid: {
scrollable: true,
filterable: false,
scrollable: false,
columns: [{
field: 'vdrDetail.parentAribaId',
title: 'Ariba ID',
width: '32px'
}, {
field: 'vdrDetail.vendorName',
title: 'Vendor Name',
width: '25px'
}, {
field: 'vdrDetail.vendorName',
title: 'Vendor Parent',
width: '30px'
}, {
field: 'vdrDetail.vendorBusinessName',
title: 'LOB Owner',
width: '30px'
}]
}
I figured it out how to make it work.
CTRL.JS
$scope.vendorWinOptions = subCategoryGridConfig.vendorWinConfig;
$scope.showDetail = function (vendor){
$scope.error = null;
$scope.selectedVendor = vendor;
SubCategory.getAllVendors().then(function(response){
$scope.selectedVendor.vendorValues = response.data;
$scope.vendorDetailWin.open().center();
$scope.$broadcast('openDetailWindow');
});
}
$scope.vendorDetailOptions = subCategoryGridConfig.VendorsDetailGrid;
subCategoryGridConfig.VendorsDetailGrid.dataSource = new kendo.data.DataSource({
data: [],
pageSize: 5
});
$scope.closeDetailModal = function(){
$scope.vendorDetailWin.close();
}
modalCtrl.js
angular.module('thirdPartyManagementApp').controller('vendorDetailModalCtrl', function($scope) {
'use strict';
$scope.$on('openDetailWindow', function () {
$scope.VendorsDetailGrid.setDataSource(new kendo.data.DataSource({
data: $scope.selectedVendor.vendorValues,
pageSize: 5
}));
});
});
FACTORY.JS
getAllVendors: function(){
return $http.get('/URL');
},
modalConfig.js
vendorWinConfig: {
width : '800px',
title : 'Vendors',
modal : true,
content : '/third-party-management/views/subCategories/vendorDetailModal.html',
visible : false,
},
VendorsDetailGrid: {
scrollable: true,
filterable: false,
scrollable: false,
columns: [{
field: 'vendorAribaId',
title: 'Ariba ID',
width: '20px'
}, {
field: 'vendorName',
title: 'Vendor Name',
width: '20px'
}, {
field: 'vendorBusinessName',
title: 'Vendor Parent',
width: '20px'
}, {
field: 'vendorLineOfBusiness.primaryLOb',
title: 'LOB Owner',
width: '20px'
}]
}
Related
I am using kendo grid with MVC in a .NET project. Two columns of my grid are templates and those have an input text inside of the template. That way every time the grid loads the input texts are always visible and available for change.
When the user clicks on save, I need to check all the rows of the grid, at client side and get the values of those two columns (the only two have templates) and get the values of the input box. So the result I am expecting is a list with two columns that have the last values inserted by the user in the input boxes and not the original value.
Here is my code:
//Grid Data source
var dataSource = new kendo.data.DataSource({
transport: {
read: { url: "/CsmForecastRegistration/GetForecast", cache: false }
},
error: function (e) {
openDialog(e.errorThrown);
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "ForecastItemId",
fields: {
ForecastItemId: { editable: false },
RecordId: { editable: false },
SaleId: { editable: false },
IsUpSell: { editable: false },
BusinessName: { editable: false },
HealthScore: { editable: false },
CurrencySymbol: { editable: false },
ForecastWeekTotalContractValue: { editable: true },
ForecastWeekMonths: { editable: true },
ForecastWeek12Months: { editable: false }
}
}
}
});
$("#grdCsmForecast").kendoGrid({
dataSource: dataSource,
scrollable: true,
dataBound: onDataBound,
toolbar: ["excel"],
excel: {
allPages: true,
fileName: "CSMForecast.xlsx"
},
pageable: true,
columns: [
{ title: "", width: "80px", template: $("#comments-template").html(), attributes: { style: "text-align:center; background-color: white;" } },
{
title: "Contract Details",
columns: [
{ field: "RecordId", title: "RecordId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "SaleId", title: "SaleId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "IsUpSell", title: "Upsell?", width: "75px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "BusinessName", title: "Business Name", width: "250px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "HealthScore", title: "Health Score", width: "95px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "CurrencySymbol", title: "CCY", width: "50px", attributes: { "class": "contractDetailGridStyle" } }
]
},
{
title: "Forecast Week",
columns: [
{ field: "ForecastWeekTotalContractValue", title: "TCV", width: "75px", template: $("#forecast-week-tcv").html(), attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " },
{ field: "ForecastWeekMonths", title: "Months", width: "70px", template: $("#forecast-weekMonths").html(), attributes: { "class": "forecastWeekGridStyle" } },
{ field: "ForecastWeek12Months", title: "12Month", width: "75px", attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " }
]
}
]
});
And the templates:
<script id="forecast-week-tcv" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekTotalContractValue#</span>
#}
else{#
<input type="text" value="#=ForecastWeekTotalContractValue#" />
#}#
</script>
<script id="forecast-weekMonths" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekMonths#</span>
#}
else{#
<input type="text" value="#=ForecastWeekMonths#" />
#}#
</script>
So I would like to have a list and send to my MVC the controller all the values of these two inputs:
<input type="text" value="#=ForecastWeekTotalContractValue#" />
<input type="text" value="#=ForecastWeekMonths#" />
Thanks
Try something like this:
function getInputValues() {
let result = [];
$('#grid tbody tr').each((i, tr) => {
let row = {};
$(tr).find('input[type="text"]').each((index, input) => {
row[(index ? "ForecastWeekTotalContractValue" : "ForecastWeekMonths")] = $(input).val();
});
result.push(row);
});
return result;
}
Demo
It just iterates over the elements and adds to an array of objects.
I'm trying to write a tooltip that's specific for each column in a grid.
My current implementation is failing to pick up the value of the record that's being hovered over. How do I reference the specific column/row value of the row entry?
fiddle
Code
Ext.onReady(function() {
var trackStore = new Ext.data.Store({
storeId: 'soundCloudStore',
proxy: {
type: 'memory',
data: [
{
title: 'Test', duration: '3434', genre: 'stuff', created_at: '2011/06/18', id: '1'
}
]
},
fields:['duration', 'genre', 'created_at', 'title', 'id']
});
trackStore.load(
function() {
Ext.create('Ext.grid.Panel', {
title: 'Tracks',
store: trackStore,
stripeRows: false,
columns: [
{
header: 'Title',
dataIndex: 'title'
},
{ header: 'Duration', dataIndex: 'duration' },
{ header: 'Genre', dataIndex: 'genre' },
{ header: 'Created At', dataIndex: 'created_at'}
],
height: 200,
width: 475,
renderTo: Ext.getBody(),
listeners: {
afterrender: function( )
{
view = this.getView();
view.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update(this.data.title);
}
}
});
}
}
});
});
});
Error
Uncaught TypeError: Cannot read property 'title' of undefined
You could do it like this,
use the event "viewready" instead "afterrender" :
listeners: {
viewready: function(grid) {
var view = this.getView();
// record the current cellIndex
grid.mon(view, {
uievent: function(type, view, cell, recordIndex, cellIndex, e) {
grid.cellIndex = cellIndex;
grid.recordIndex = recordIndex;
}
});
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
console.log(grid.cellIndex);
if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
header = grid.headerCt.getGridColumns()[grid.cellIndex];
tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
}
}
}
});
}
}
In my KendoGrid I want to add default value for input field in my popup form.
I have created a function that I intend to call on clicking Create button, but the following function does not work. I searched a lot but could not find any help, so it would nice if someone can give me a hint where the problem is.
function add_m(e) {
debugger;
$("#DeviceIP").val("123");
}
$("#turbingrid").kendoGrid({
// debugger;
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{name: "create",text: "add new turbine"}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id:'Producer'},//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px',id:'Model' },
{ field: 'DeviceType', title: 'DeviceType', width: '100px', editor: deviceTypesList },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', hidden: true },
{ field: 'ModelProducer', title: 'Producer/Model', hidden: true, editor: modelProducer },
{command: ["edit"], title: " "}
],
//{
// command: [
// {
// name: "Edit",
// click: function (e) {
// temp = $(e.target).closest("tr"); //get the row
// }
// }
// ]
//}
editable: "popup",
create:add_m,
to assign val or attribute dynamically use
edit:
edit: function(e) {
if (e.model.isNew()) {
e.container.find("input[name=test]").val(5555); // name changed, but worked for me
// e.container.find("input[name=device_id]").val(123);
}
}
or
beforeEdit:
beforeEdit: function(e) {
if (e.model.isNew()) {
$("#DeviceIP").val("123");
}
}
You can use the beforeEdit event, not create. It fires when the create button is clicked in the toolbar.
Here is the working DEMO.
Below is the code snippet that pastes the default value for DeviceIP on Add row event.
$("#turbingrid").kendoGrid({
....
.........
//ON CLICK ADD/EDIT BUTTON FOR PRODUCT ITEM
edit: function(e) {
// CHANGE ADD/EDIT PRODUCTITEM POPUP FORM TITLE
if (e.model.isNew()) //ON ADD NEW
{
$(".k-window-title").text("Add New Turbine");
// HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
e.container
.find("[name=DeviceIP]") // get the span element for the field
.val("123") // set the value
.change(); // trigger change in order to notify the model binding
}
else // ON EDIT
{
$(".k-window-title").text("Edit Turbine");
}
}
........
....
});
Here is the complete code from the DEMO fiddle.
(function () {
var dataSource = new kendo.data.DataSource({
data: {
id: 1,
DeviceIP: "192.168.1.1",
Producer: 'Producer',
Model: 'Model',
DeviceType: 'DeviceType',
Description: 'Description',
Username: 'Username',
Password: 'Password',
PublicIP: '216.168.123.156',
TurbineId: 1,
device_id: 2,
ModelProducer: 'ModelProducer',
},
schema: {
model: {
id: 'id',
fields: {
DeviceIP: {},
Producer: {},
Model: {},
DeviceType: {},
Description: {},
Username: {},
Password: {},
PublicIP: {},
TurbineId: {},
device_id: {},
ModelProducer: {},
}
}
}
});
$('#grid').kendoGrid({
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{name: "create",text: "add new turbine"}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id:'Producer'},//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px',id:'Model' },
{ field: 'DeviceType', title: 'DeviceType', width: '100px' },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', hidden: true },
{ field: 'ModelProducer', title: 'Producer/Model', hidden: true },
{command: ["edit"], title: " "}
],
editable: 'popup',
//ON CLICK ADD/EDIT BUTTON FOR PRODUCT ITEM
edit: function(e) {
// CHANGE ADD/EDIT PRODUCTITEM POPUP FORM TITLE
if (e.model.isNew()) //ON ADD NEW
{
$(".k-window-title").text("Add New Turbine");
// HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
e.container
.find("[name=DeviceIP]") // get the span element for the field
.val("123") // set the value
.change(); // trigger change in order to notify the model binding
}
else // ON EDIT
{
$(".k-window-title").text("Edit Turbine");
}
}
});
})()
I have view name PurchaseReport.js
Ext.define("App.view.tabs.PurchaseReport", {
extend: "Ext.panel.Panel",
alias: "widget.PurchaseReportTab",
requires: [
"App.model.PurchaseReport", "Ext.toolbar.Toolbar"
],
border: false,
layout: "fit",
items: [
App.Util.buildBrowseConfig({}, {
controller: "PurchaseReport",
primaryKeyField: "PurchaseReportId",
stateful: true,
stateId: "App.view.windows.PurchaseReport-grid",
columns: [
{ dataIndex: "PurchaseCost", filter: true, header: "Purchase Cost", width: 150 }
],
features: [{ ftype: "filters", autoReload: false, local: true }],
store: { model: "App.model.PurchaseReport", sorters: [{ property: "Name", direction: "asc" }],
height: 200,
width: 400,
bbar: [
{
dataIndex: "PurchaseCost",
reference: 'purchaseCostField',
xtype: 'textfield',
name: 'Total',
fieldLabel: 'Total',
allowBlank: false
}
],
renderTo: Ext.getBody()
}
})
]
});
This is my controller part where my grid get bind as PurchaseReport.js,
Ext.define("App.controller.tabs.PurchaseReport", {
extend: "Ext.ux.app.BrowseController",
views: ["tabs.PurchaseReport"],
refs: [
{
ref: "myPurchaseReportGrid",
selector: "PurchaseReportTab > gridpanel"
}
],
init: function () {
this.control({
PurchaseReportTab: {
bind: function (a, c) {
**//Grid bind start**
var b = this.getMyPurchaseReportGrid();
b.getSelectionModel().deselectAll();
b.store.removeAll();
b.fireEvent("bind", b, c)
**//Grid bind End**
**//Combobox Bind start**
var combo = this.getCoachCombo(),
store = combo.store,
options = store.lastOptions || {};
options = Ext.apply({
callback: function () {
combo.select(App.coach.CoachId)
//console.log("called rajesh");
}
}, options);
store.load(options);
if (App.coach.IsAdmin) {
combo.show()
}
**//Combobox Bind end**
var abilities = App.coach.Abilities,
toolbar = this.getToolbar();
for (var x = 0; x < abilities.length; x++) {
var ability = abilities[x],
button = toolbar.query("button[tooltip=" + ability.Name + "]");
if (button.length) {
button[0].setVisible(true)
}
}
store.load(options);
var purchaseCostField = this.getReferences().purchaseCostField;
purchaseCostField.setValue(store.sum('PurchaseCost'));
}
},
"PurchaseReportTab > gridpanel": {
bind: this.bind,
itemdblclick: this.handleRecord,
selectionchange: this.selectionChange
}
})
}
});
This is my model part name as PurchaseReport.js
Ext.define("App.model.PurchaseReport", {
extend: "Ext.data.Model",
fields: [
{
name: "PurchaseCost",
type: "date"
}
],
proxy: {
type: "ajax",
url: "ControllerFactory.aspx",
extraParams: {
controller: "PurchaseReport",
operation: "GetPurchaseReportsByCoachIdAndDates"
},
reader: {
type: "json",
root: "data",
successProperty: "success"
}
}
});
The page looks like this and I want display total of PurchaseCost in Textbox like to total of PurchaseCost around 1195 as per the below Image
A quick way to do it
Add a reference to your textfield:
{
dataIndex:"PurchaseCost",
reference: 'purchaseCostField',
xtype: 'textfield',
name: 'Total',
fieldLabel: 'Total',
allowBlank: false
}
In your controller after your store load add the value to the textfield:
store.load(options);
var purchaseCostField = this.getReferences().purchaseCostField;
purchaseCostField.setValue(store.sum('PurchaseCost'));
I'm trying to add a new row to a kendo grid with selected data from another kendo grid. Its showing a blank row but no data. Here is my code:
var PunishmentGridDataSource = new kendo.data.DataSource({
schema: {
model: {
id: "DICP_ACTN_TYPE_CODE",
fields: {
DICP_ACTN_TYPE_SLNO: { editable: false },
DICP_ACTN_TYPE_CODE: { editable: false },
DICP_ACTN_TYPE_NAME: { editable: false }
}
}
},
pageSize: 5,
data: [
{ DICP_ACTN_TYPE_SLNO: "1", DICP_ACTN_TYPE_CODE: "1", DICP_ACTN_TYPE_NAME:"aa" }]
});
var PunishmentGrid = $("#PunishmentGrid").kendoGrid({
dataSource: PunishmentGridDataSource,
pageable: true,
editable: 'false',
selectable: "row",
navigatable: true,
filterable: true,
sortable: true,
groupable: true,
scrollable: true,
width: '250PX',
height: '200PX',
columns: [
{ field: "DICP_ACTN_TYPE_SLNO", title: "SL.", filterable: false, width: "30px" },
{ field: "DICP_ACTN_TYPE_CODE", title: "Code", filterable: false, width: "50px" },
{ field: "DICP_ACTN_TYPE_NAME", title: "Name", filterable: true, width: "120px" }
]
});
//Handling Yes button click for grid row Selection
$('#btnListOfValue2OK').click(function (idx, elem) {
ClearOperationMsgTextBoxRedColor();
var grid = $("#ListOfValueWindowGrid2").data("kendoGrid");
var selectedItem = (grid.dataItem(grid.select()));
var rows = grid.select(); // Can I select multiple rows by this & bind directly to the data source of another grid??
var obj = [{ DICP_ACTN_TYPE_SLNO: selectedItem.DICP_ACTN_TYPE_SLNO, DICP_ACTN_TYPE_CODE: selectedItem.DICP_ACTN_TYPE_CODE, DICP_ACTN_TYPE_NAME: selectedItem.DICP_ACTN_TYPE_NAME }];
var ds = $("#PunishmentGrid").data("kendoGrid").dataSource;
ds.add(obj);
ds.data();
CloseListOfValueDialog2();
});
May be I'm missing something very fundamental. Please help me to find out!
I tried a similar setup which works as expected:
$("button").click(function() {
var parent = $("#parent-grid").data("kendoGrid");
var child = $("#child-grid").data("kendoGrid");
var selectedDataItem = parent.dataItem(parent.select());
if (selectedDataItem) {
child.dataSource.add({
foo: selectedDataItem.foo
});
}
});
Here is a live demo: http://jsbin.com/EpeMiwe/1/edit