Telerik Forums
Kendo UI for jQuery Forum
1 answer
244 views
I was wondering if there is a way to group certain rows by column name and not repeating that column name in the process.  In my Gantt chart, each row represents an individual project with the project name as the title.  But I also have columns to the left of those titles for an Initiative and then a Track.  I want to group projects with the same initiative by not repeating the initiative name on each line and instead having it stated once in a larger box spanning all of the project titles with that initiative name.  I'd also like to do the same thing for tracks to group identical initiative names.  For clarity I attached a screenshot with my layout. 
Dimitar Terziev
Telerik team
 answered on 03 Jul 2015
2 answers
327 views

I am trying to get my actionlinks to redner into one column.  Currently I have them all laid out in individual columns, but can't figure out how to merge them into one.

 

.Columns(columns =>
              {
                  columns.Bound(obcs => obcs.ProfileName).Title(xxx.Controllers.FieldTranslation.GetLabel("ProfileName", @xxx.DNetSynch.GlobalVariables.LanguageID));
                  columns.Bound(obcs => obcs.EEFinalize).ClientTemplate("#= EEFinalize ? 'Yes' : 'No' #").Title(xxx.Controllers.FieldTranslation.GetLabel("EEFinalize", @xxx.DNetSynch.GlobalVariables.LanguageID));
                  //columns.Bound(obcs => obcs.CCFinalize).ClientTemplate("#= CCFinalize ? 'Yes' : 'No' #");
                  columns.Bound(obcs => obcs.Completed).ClientTemplate("#= Completed ? 'Yes' : 'No' #").Title(xxx.Controllers.FieldTranslation.GetLabel("Completed", @xxx.DNetSynch.GlobalVariables.LanguageID));
 
 
                  columns.Template(@<text>
                    @Html.ActionLink(@item.ProfileID.ToString(), "Index", "OBProfileTasks", new { @item.ProfileID })
                </text>)
                      .ClientTemplate("<a class='k-button' href='./OBProfileTasks/Index/#= ProfileID#'>Tasks</a>")
                      .Title(xxx.Controllers.FieldTranslation.GetLabel("Tasks", @xxx.DNetSynch.GlobalVariables.LanguageID));
                       
                       
                  columns.Template(@<text>
                        @Html.ActionLink(@item.ProfileID.ToString(), "Index", "OBProfileTasks", new { @item.ProfileID })
                </text>)
                      .ClientTemplate("<a href='OBProfileTasks/Index/#= ProfileID#'><i style='color:black;' class='fa fa-plus fa-lg' title='Assign To Client'></a>")
                      .Title(xxx.Controllers.FieldTranslation.GetLabel("AssignToClient", @xxx.DNetSynch.GlobalVariables.LanguageID));
 
 
 
                  columns.Template(@<text>
                        @Html.ActionLink(@item.ProfileID.ToString(), "Replica", "OBProfile", new { @item.ProfileID })
                </text>)
                      .ClientTemplate("<a href='OBProfile/Replica/#= ProfileID#'><i style='color:green;' class='fa fa-clipboard fa-lg' title='Replicate'></a>")
                      .Title(xxx.Controllers.FieldTranslation.GetLabel("Replicate", @xxx.DNetSynch.GlobalVariables.LanguageID));
                       
                       
                  columns.Template(@<text>
                        @Html.ActionLink(@item.ProfileID.ToString(), "Delete", "OBProfile", new { @item.ProfileID })
                </text>)
                      .ClientTemplate("<a href='OBProfile/Delete/#= ProfileID#' onclick='return confirm_delete()' title='Delete'><i style='color:red;' class='fa fa-times fa-lg'></i></a> ")
                      .Title(xxx.Controllers.FieldTranslation.GetLabel("Delete", @xxx.DNetSynch.GlobalVariables.LanguageID));
                       
                       
                  columns.Command(command =>
                  {
                      command.Edit();
                     // command.Destroy().HtmlAttributes(new { @class = "onboard-delete " });
                  }).Title(xxx.Controllers.FieldTranslation.GetLabel("Controls", @xxx.DNetSynch.GlobalVariables.LanguageID));
 
              })

Dimo
Telerik team
 answered on 03 Jul 2015
3 answers
286 views
I'm using the same dataSource for a kendo grid as I am for a layer on my map.  In some situations I don't want to show anything from that layer on the map, but I still need to display them on the grid so I can't just clear the dataSource.  Is there a way to hide a map layer?
Matt
Top achievements
Rank 1
 answered on 02 Jul 2015
4 answers
379 views

I'm using a panelbar to display a list of chapters. Within each panel is a list of tasks within that chapter. Think of it like a list:

  • Chapter 1
  •     Task 1
  •     Task 2
  • Chapter 2
  •     Task 3
  •     Task 4
  • Chapter 3
  •     Task 5

When the page is loaded, I want to expand the panel w/ the first incomplete task. I know which chapter contains this task (by index, not by ID), and want to have it be expanded when I initialize the panelbar.

Current accordion JS:

function initTasksAccordion() {
    $("#task_accordion").kendoPanelBar({
        expandMode: "multiple"
    });
}

And some sample HTML:

<ul id="task_accordion">
    # for (var c = 0; c < data.Chapters.length; c++) { #
            <li>#= data.Chapters[c].Name #                             
                # for (var t = 0; t < data.Chapters[c].Tasks.length; t++) { #
                    <div>
                        <h3 class="item-title">#= data.Chapters[c].Tasks[t].Name #</h3>                        
                        <div class="clear"></div>
                    </div>
                # } #
            </li>
        # } #
    </ul>

So if my first incomplete task is Task 4, I would know that it's the second (or first, if you use 0-based indexing) panel I want to have expanded when the panelbar is created. While I do have multiple selection enabled, for the initial load, only the one panel (with the incomplete task) should be expanded.

Ashleigh L
Top achievements
Rank 1
 answered on 02 Jul 2015
3 answers
166 views

Hi

I have the following ClientTemplate column:

columns.Bound(a => a.Quantity).Title("Anzahl").Width(55).ClientTemplate("<input class='text' value='#=Quantity#' id='Quantity' />").Format("{0:n0}");

Values displayed or entered here are not exported to PDF.

How can I make this work?

Thanks

 

 

Boyan Dimitrov
Telerik team
 answered on 02 Jul 2015
5 answers
226 views

Hi

  I want to replace every tooltip on my site with the kendo one, I also want in some places to use the 'title' of the div, or to get data dynamically using ajax. To accomplish this I have a tooltip like the below

 

$('body').kendoTooltip({
   filter: "img[data-tooltip-data], div[data-tooltip-data], [title][title!='']",

 

and content gets the content depending on the target type. I've put the tooltip on body as I want it across everything on the site. I've used a single tooltip rather than multiple tooltips, this is based on advice I've seen in the forums. 

I'm getting the problem you can see in the dojo below.

 

http://dojo.telerik.com/AmEYa

 

 The tooltip never disappears. I'm assume I'm doing something wrong here but I'm not sure how I'm meant to do this

 

thanks

Anthony

Anthony
Top achievements
Rank 1
 answered on 02 Jul 2015
2 answers
1.0K+ views

Hi,

Is there any way to retrieve a view column index from the model ( myGrid.columns ) ?

I'm looking for a method like viewIndex() on a column object such like the following code ( or viewIndex(column) ) :

for (var i = 0; i < myGrid.columns.length; i++) {
    var column = myGrid.columns[i];
    console.log('Model column index : ' + i + ' - View column index : ' + column.viewIndex());
}

Have you any idea ?

 Thanks for your help.

 

 

 

Pierre
Top achievements
Rank 1
 answered on 02 Jul 2015
1 answer
238 views
I'd like to switch a column of a grid to display a more human readable relative time string (similar to moment.js's fromNow() method) but I'd also like the column to still be sortable based the actual date object. How can I accomplish this?
Boyan Dimitrov
Telerik team
 answered on 02 Jul 2015
1 answer
397 views

Hi,

 

A newbee to kendo and js:). I am trying to use kendo scheduler in my project and having issue with Create / update operations. Create / Update opertions works and DB is updated but kendo UI dialog stays and gets following error "Uncaught TypeError: Cannot read property 'getTimezoneOffset' of null". Refreshing browser display newly added /updated  event. Also in destroy method I nned to add event id to path like /schedules/id, how to add this, in parameterMap we gets like options.models[0].id but not in destroy method.

Any quick help is appreciated. Posting my code:

'use strict';

/*
* Add UI Functions To This File Such As "ManipulateDataFromServer"
* */

adoc.controller('accountManagerController', [
'$scope', '$rootScope', '$filter', 'adoc.common', 'restServices', 'TokenStorage',
function ($scope, $rootScope, $filter, ADOCServices, restServices, TokenStorage) {

$scope.colors = [
{name: 'black', shade: 'dark'},
{name: 'white', shade: 'light'},
{name: 'red', shade: 'dark'},
{name: 'blue', shade: 'dark'},
{name: 'yellow', shade: 'light'}
];

$scope.myColor = $scope.colors[2];

$scope.changeColor = function (newColor) {
$scope.myColor = newColor;
};

$scope.myData = [];

$scope.loadPractices = function () {
restServices.call('GET', "/adoc/practice/all").then(
function (response) {
$scope.gridPractice.data = response.data;
console.log($scope.gridPractice.data);
});
};

$scope.gridPractice = {
autoResize: true,
rowHeight: 70,
//data:$scope.loadPractices(),
enableRowSelection: true,
columnDefs: [
{
field: 'id',
displayName: 'Practice Id',
cellTemplate: '<div class="controls-column"><div ng-controller="accountManagerController">{{row.entity.id}}</div>' +
'<div class="grid-row-links-container">' +
'<button class="btn-link" ng-click="grid.appScope.editSelectedPractice(row.entity.id);">Edit</button>' +
'<button class="btn-link" href="#">View Website</button>' +
'<button class="btn-link" href="#">Delete</button>' +
'</div>' +
'</div>'
},
{
field: 'name',
displayName: 'Practice Name'
},
{
field: 'path',
displayName: 'Path'
},
{
field: 'email',
displayName: 'Email'
}
]
}

$scope.myData2 = [
{
"practiceId": "1",
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"practiceId": "2",
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"practiceId": "3",
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
},
{
"practiceId": "4",
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"practiceId": "5",
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"practiceId": "6",
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];

$scope.gridPracticeAdmins = {
autoResize: true,
rowHeight: 70,
data: $scope.myData2,
enableRowSelection: true,
columnDefs: [
{
field: 'firstName',
displayName: 'First Name',
cellTemplate: '<div class="controls-column"><div ng-controller="accountManagerController">{{row.entity.firstName}}</div>' +
'<div class="grid-row-links-container">' +
'<button class="btn-link" ng-click="grid.appScope.editSelectedPractice(row.entity.practiceId);">Edit</button>' +
'<button class="btn-link" href="#">Delete</button>' +
'</div>' +
'</div>'
},
{
field: 'lastName',
displayName: 'Last Name'
},
{
field: 'company',
displayName: 'UserName'
}
]
};

// Filter Practices
$scope.filterPractice = function () {
console.log($scope.searchPractices);
$scope.gridPractice.data = $filter('filter')($scope.myData, this.searchPractices, undefined);
};

// Show Edit Page For Editing The Selected Practice
$scope.editSelectedPractice = function (practiceId) {
alert(practiceId);
};

$scope.init = function () {
$scope.loadPractices();
};

$scope.schedulerOptions = {
date: new Date("2015/6/13"),
startTime: new Date("2015/6/13 07:00 AM"),
minorTickCount: 1,
height: 850,
editable: true,
isAllDay: false,
views: [
{type: "day", selected: false},
{type: "week", selected: false},
{type: "month", selected: true},
{type: "workWeek", selected: false},
{type: "agenda", selected: false},
{type: "timeline", eventHeight: 50}
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
/* sync: function() {
this.read();
},*/
transport: {
read: {
// url: "http://demos.telerik.com/kendo-ui/service/tasks",
url: "/schedules/practice/" +
$rootScope.user.practiceId,
headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
dataType: "json"
},
update: {
// url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
url: "/schedules/",
headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
method: "post",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
create: {
url: "/schedules/",
headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
method: "put",
contentType: "application/json; charset=utf-8",
dataType: "json"


},
destroy: {
// url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
url: "/schedules/",
headers: {'X-AUTH-TOKEN': TokenStorage.retrieve ()},
method: "delete",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
parameterMap: function (options, operation) {
switch (operation) {
case "read":

break;
case "update":
if (options.models) {
console.log(kendo.stringify(options.models[0].id));
console.log(kendo.stringify(options.models[0].scheduleTitle));
console.log(kendo.stringify(options.models[0].scheduleStartTime));
console.log(kendo.stringify(options.models[0].scheduleEndTime));
console.log(kendo.stringify(options.models[0].scheduleDescription));
console.log(kendo.stringify(options.models[0].recurrenceId));
console.log(kendo.stringify(options.models[0].recurrenceRule));
console.log(kendo.stringify(options.models[0].recurrenceException));
console.log(kendo.stringify(options.models[0].physicianId));
console.log(kendo.stringify(options.models[0].practiceId));
console.log(kendo.stringify(options.models[0].allDay));

/* return {models: kendo.stringify(options.models)};*/
return kendo.stringify({
id: options.models[0].id,
scheduleTitle: options.models[0].scheduleTitle,
scheduleStartTime: options.models[0].scheduleStartTime,
scheduleEndTime: options.models[0].scheduleEndTime,
scheduleDescription: options.models[0].scheduleDescription,
recurrenceId: options.models[0].recurrenceId,
recurrenceRule: options.models[0].recurrenceRule,
recurrenceException: options.models[0].recurrenceException,
physicianId: options.models[0].physicianId,
practiceId: $rootScope.user.practiceId,
allDay: options.models[0].allDay
})
}
break;
case "create":
if (options.models) {
console.log(kendo.stringify(options.models[0].scheduleTitle));
console.log(kendo.stringify(options.models[0].scheduleStartTime));
console.log(kendo.stringify(options.models[0].scheduleEndTime));
console.log(kendo.stringify(options.models[0].scheduleDescription));
console.log(kendo.stringify(options.models[0].recurrenceId));
console.log(kendo.stringify(options.models[0].recurrenceRule));
console.log(kendo.stringify(options.models[0].recurrenceException));
console.log(kendo.stringify(options.models[0].physicianId));
console.log(kendo.stringify(options.models[0].practiceId));
console.log(kendo.stringify(options.models[0].allDay));

/* return {models: kendo.stringify(options.models)};*/
return kendo.stringify({
scheduleTitle: options.models[0].scheduleTitle,
scheduleStartTime: options.models[0].scheduleStartTime,
scheduleEndTime: options.models[0].scheduleEndTime,
scheduleDescription: options.models[0].scheduleDescription,
recurrenceId: options.models[0].recurrenceId,
recurrenceRule: options.models[0].recurrenceRule,
recurrenceException: options.models[0].recurrenceException,
physicianId: options.models[0].physicianId,
practiceId: $rootScope.user.practiceId,
allDay: options.models[0].allDay
})
}
break;
case "destroy":
console.log(options.models[0].id);
return kendo.stringify({id: options.models[0].id});
break;
}

}
},
schema: {
model: {
id: "id",
fields: {
id: {from: "id", type: "number"},
title: {from: "scheduleTitle", defaultValue: "No title", validation: {required: true}},
start: {type: "date", from: "scheduleStartTime"},
end: {type: "date", from: "scheduleEndTime"},
description: {from: "scheduleDescription"},
recurrenceId: {from: "recurrenceId", defaultValue: 0},
recurrenceRule: {from: "recurrenceRule"},
recurrenceException: {from: "recurrenceException"},
ownerId: {from: "physicianId", defaultValue: 1},
practiceId: {from: "practiceId"},
isAllDay: {type: "boolean", from: "allDay"}
}
}
},

filter: {
logic: "or",
filters: [
{field: "ownerId", operator: "eq", value: 1},
{field: "ownerId", operator: "eq", value: 2}
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{text: "Alex", value: 1, color: "#f8a398"},
{text: "Bob", value: 2, color: "#51a0ed"},
{text: "Charlie", value: 3, color: "#56ca85"}
]
}
]
};

$scope.selectedTags = [];

$scope.loadTags = function (query) {
// Get Available Providers From DB As An Array
var availableTags = [
{text: 'All', value: -1},
{text: 'Provider 1', value: 1},
{text: 'Provider 2', value: 2},
{text: 'Provider 3', value: 3},
{text: 'Provider 4', value: 4},
{text: 'Provider 5', value: 5},
{text: 'Provider 6', value: 6}
];


// Get All Providers Selected
var allProvidersSelected = 0;
for (var i = 0; i < $scope.selectedTags.length; i++) {
allProvidersSelected = $scope.selectedTags[i].value;
if (allProvidersSelected == -1) {
break;
}
}
console.log(allProvidersSelected);

// Get Selected Providers IDs
var selectedIds = [];
if (allProvidersSelected == -1) {
for (var i = 0; i < availableTags.length; i++) {
selectedIds.push(parseInt(availableTags[i].value));
}
} else {
for (var i = 0; i < $scope.selectedTags.length; i++) {
selectedIds.push(parseInt($scope.selectedTags[i].value));
}
}

// Filter Providers Schedule On Addition Of Tags
var scheduler = $(".k-scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function (task) {
return $.inArray(task.ownerId, selectedIds) >= 0;
}
});


// Return Filtered Set Of Available Providers
return $filter('filter')(availableTags, query, undefined);
};

}
]);
Vladimir Iliev
Telerik team
 answered on 02 Jul 2015
1 answer
118 views

Hello, I have a drop down filter with both checkbox and the default filter. I've been looking at the documentations on how to bind the inputs below with text and I haven't been success in binding all of them. The goal of the default filter is the work and remember the previous settings and text that have been filtered with. I tried to create by own observable on the two input fields in the default filter with unique ids with this code:

var levelOneFilterText = "";
var levelTwoFilterText = "";
var viewModelLevelOne = kendo.observable({
  levelOneFilterText: levelOneFilterText,
});
var viewModelLevelTwo = kendo.observable({
  levelTwoFilterText: levelTwoFilterText
});
 
var defaultFilterInputs =helpTextElement.nextUntil(":has(.k-button)")
 
defaultFilterInputs[1].dataset['bind'] = "text:levelOneFilterText"; // remove a new binding for filters
defaultFilterInputs[1].id = "charlie-filter-1-"+id; // custom filter
defaultFilterInputs[4].dataset['bind'] = "text:levelTwoFilterText";
defaultFilterInputs[4].id = "charlie-filter-2-"+id;
 
kendo.bind($("#charlie-filter-1-"+id),viewModelLevelOne);
kendo.bind($("#charlie-filter-2-"+id),viewModelLevelTwo);
id++;

 I am able to bind one filter, but if I open another filter up, the inputs will be missing. I don't know why this is happening so I wanted to make a post here in order to ask for for advice.

 

The sample project here Dojo proj is the exact code I am using.

Alexander Popov
Telerik team
 answered on 02 Jul 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?