Telerik Forums
Kendo UI for jQuery Forum
5 answers
5.1K+ views
I need a way of changing the order of rows in a grid and updating the datasource accordingly.

I could do this by placing up/down arrows in a column but a drag/drop reordering would be much more user friendly.

Is there a way to do this or will it be coming later?
Nikolay Rusev
Telerik team
 answered on 16 Dec 2015
2 answers
3.9K+ views
Html.Kendo().Grid<AdminReport>()
    .Name("AdminReportList")           
    .Columns(c =>
                 {
                      
                     c.Bound(r => r.Name).Title("Report Name").Width(50);
                     c.Bound(r => r.Id).Title(action).Width(230).Sortable(false).Filterable(false)
                 })
    .Pageable(p => p.PreviousNext(true))
    .Sortable()
    .Filterable()
    .Events(e => e.DataBound("onRowBound"))
    .DataSource(d => d
        .Ajax()
        .Model(m => m.Id(r => r.Id))
        .Read(read => read.Action("_ListAllReports", "AdminReports"))
        .Events(e => e.Error("OnError"))
        )
    .Render();
function onRowBound(e) {
    
  if ((e.dataItem.SomeProperty === true)) {
       //some code
    }
 
}
I am getting e.dataItem as undefined. Is there a way to get access to dataItem and model properties?

Dimiter Madjarov
Telerik team
 answered on 16 Dec 2015
5 answers
1.3K+ views

Hello all,

Before I roll my own solution for this issue I figured it wise to check here first.

I have an autocomplete control that is bound to a view model using the MVVM functionality. I am using a template to display multiple fields of data for each list element in the dropdown like so:

Field 1, Field 2 Field 3 <br />

Field 4

 

But sometimes it wraps because of the length of the content like so:

Field 1, Field 2

Field 3 <br />

Field 4

 

I am looking for a way to prevent the content from wrapping when it reaches the default width of the dropdown.

I assume I can do this via CSS, but as stated I wanted to check here first.

 

Thanks all.

 

Iliana Dyankova
Telerik team
 answered on 16 Dec 2015
1 answer
270 views

I've been trying to get Keno Grid working in my app for a week now and I *finally* got to the point where the dataSource transport actually calls the controller action.  However, I cannot seem to get anything moving forward from there.

I see have two problems right now.

1) All the controller action examples I've seen so far seem to expect the incoming data to have a related model on the server side. For example:

 

public JsonResult Update()
{
   var employees = this.DeserializeObject<IEnumerable<EmployeeDirectoryModel>>("models");
   if (employees != null)
   {
      foreach (var employee in employees)
      {
          EmployeeDirectoryRepository.Update(employee);
      }
   }
   return this.Jsonp(employees);
}

However, I do not have something similar to EmployeeDirectoryModel (in the above example) to which I can deserialize the incoming data.  The data being submitted from the client needs to be ultimately just be json which I will store in a completely unrelated model as a string.

 

public class ClientRow
{
    public Guid Id { get; set; }
    public Guid TableId { get; set; }
    public string RowData { get; set; }  // json here
}

 

2) When trying to figure out a workaround for the above I was having troubles figuring out where (and in what form) the data being sent from the client is.  I put a break point in the controller action and looked around in the context and could not find ANY data that would have been sent.  So then I opened Fiddler and could not find the data anywhere in the request packet for the Update.

I'm assuming I have something misconfigured somewhere.  Here is my entire function which draws the grid.  What here is not configured properly so that the Update event would be triggered but no data would go over the wire?

 

var gridName = '#' +controlId + '-grid';
var dataSource = new kendo.data.DataSource({
 
    transport: {
        read: {
            url: '/Data/Read/' + componentId,
            dataType: 'json'
        },
        update: {
            url: '/Data/Update',
            dataType: 'json'
        },
        destroy: {
            url: '/Data/Destroy',
            dataType: 'json'
        },
        create: {
            url: '/Data/Create',
            dataType: 'json'
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    },
    pageSize: 20,
    schema: {
        model: {
            id: "Id",
            fields: {
                "Id": { "editable": false, "nullable": false },
                "Category": { "validation": { "required": true } },
                "Product": { "validation": { "required": true } },
                "Color": { "validation": { "required": true } },
                "Cost": { "type": "number", "validation": { "required": true } },
                "MSRP": { "type": "number", "validation": { "required": true } }
            }
        }
    }
});
 
var grid = $(gridName).kendoGrid({
    dataSource: dataSource,
    selectable: true,
    groupable: true,
    sortable: true,
    editable: "inline",
    toolbar: ["create", "save", "cancel"],
    columns: [
        { field: "User", title: "User" },
        { field: "Category", title: "Category" },
        { field: "Product", title: "Name" },
        { field: "Color", title: "Color" },
        { field: "Cost", title: "Cost", format: "{0:c}" },
        { field: "MSRP", title: "MSRP", format: "{0:c}" },
        { field: "EditedOn", title: "Edited On" },
        { command: ["edit", "destroy"] , title: " " }
    ]
});

Please note: in the example code above I clearly have a defined model, but this is just sample code.  The model/columns are all derived dynamically from some other data and the json for the dataSource "fields" and the grid "columns" are generated on the fly. There is no way to know what the actual model will look like and therefore I cannot have a defined model to deserialize on the server side.

 

 

 

 

 

Rosen
Telerik team
 answered on 16 Dec 2015
1 answer
637 views
Can I set a different sort field on a column, so when I click 'sort' on the "Name" column it sends the field "Surname" to the server in the sort query. Like SortExpression on the RadGrid?
Kostadin
Telerik team
 answered on 16 Dec 2015
1 answer
423 views

Hi,

 I want to make scheduler detect recurrence rules overlapping

This means that no two tasks may share common time, even in minutes granularity

Just like Google Calendar, events may be created by using recurrence rules (every friday and sunday from 10 AM to 13 PM, for example).

So I would like to detect overlapping tasks by only using rrules.

Is it possible to detect overlapping dates by only using rrules? Is there anything similar already implemented in another library?

Thanks.

Ran

Vladimir Iliev
Telerik team
 answered on 16 Dec 2015
7 answers
1.3K+ views

I am trying to display data read in from sensors, thousands of data points read in over the course of days, and I cannot figure out a way to build a chart that isn't a mess of lines and category axis labels.

 I make an API call to my server to get an array of { Datum: decimal, Time: Date }. I am looking to create a line chart where the category axis is divided so that multiple data points are shown each category so i don't have data points lost to aggregation, something like this the attached image.

 For reference, what I have so far:

$("#chart").kendoChart({
                title: {
                    text: "Test Chart - Client Side"
                },
                legend: {
                    position: "left"
                },
                seriesDefaults: {
                    style: "normal",
                    type: "line"
                },
                series: [{
                    name: "Data",
                    data: formatedData,
                    field: "Datum",
                    categoryField: "Time",
                    markers: {
                        visible: false
                    },
                    tooltip: {
                        visible: true,
                        template: "#: dataItem.Datum # @@ #: dataItem.Time #"
                    }
                }],
                categoryAxis: {
                    type: "date",
                }
            })

Any help is appreciated, Thanks.

Iliana Dyankova
Telerik team
 answered on 16 Dec 2015
1 answer
757 views

Hello,

 

I'm trying to configure a set of user roles in my kendoUI scheduler. These roles depend on the result of a function that fires when the modal for a particular event is fired. I need to change the event handler on the "Save" button depending on the result of this function.

 

My current approach is adding an event to the save button as follows:

In my scheduler declaration:

edit: function(e) {

    $(".k-scheduler-update").on('click', function () {
                console.log("Click event on kendo update worked.");
            });

}

 

I've tried this with a setTimeout, and in the change: endpoint of the scheduler API. How do I set up custom events on a save button of the scheduler modal after said modal has been opened and my user role function has been evaluated?

Vladimir Iliev
Telerik team
 answered on 16 Dec 2015
3 answers
886 views

HI i am using kendo grid to bind data with json and angularjs
here is my code below.
this is the .cshtml page code below.

<div ng-app="Sample" ng-controller="SampleController">
<div>Products: {{products.length}}</div>
<div kendo-grid k-data-source="products" k-selectable="'row'"
k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'
k-columns='[
{ "field": "EmployeeKey", "title": "EmployeeId"},
{ "field": "FirstName", "title": "First Name"},
{ "field": "LastName", "title": "Last Name"},
{ "field": "DepartmentName", "title": "Department Name" },
{ "field": "EmailAddress", "title": "Email Id" }
]'>
</div>
</div>
<script>
var app = angular.module('Sample', ['kendo.directives']);
app.controller('SampleController', function ($scope, $http) {
debugger;
$http.get('~/api/Employee/Employee_Read').success(function (thisdata) {

var myData = $.parseJSON(JSON.parse(thisdata));
$scope.myData = myData;
});

$scope.filterOptions = {
filterText: '',
useExternalFilter: true,
};
});
</script>

and in my mvc controller which name is EmployeeController i used json data like below:

public ActionResult Employee_Read ([DataSourceRequest] DataSourceRequest request )
{
return Json(employeeRepositary.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

but when i am using this code and running my application getting blank grid

no more question i have to ask which path i addressed here "~/api/Employee/Employee_Read"

so here api should it's need to put because in my application no api folder is present.

second is "Employee" is controller name in my mvc application where inside "Employee_Read" function used to call .

this function i used with razor kendo grid it's working fine there but not here.

please help me in this.

Thanks

Kiril Nikolov
Telerik team
 answered on 16 Dec 2015
14 answers
1.8K+ views
Is there any way to style grid rows ? Here is an example :
If I wanted to style all rows who met a certain criteria with a red outline; would that even be possible ? 
Nikolay Rusev
Telerik team
 answered on 16 Dec 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?