Telerik Forums
Kendo UI for jQuery Forum
2 answers
942 views
Our grid data comes as a part of a larger object returned by ajax call. Other properties of this object are used outside of the grid. Thus instead of dataSource.transport we use dataSource.data.
To let you better understand the following code snippets, I'll mention that the grid DataSource is defined inside AngularJS controller. 
$scope.ticket = {"Comments":[]};
$scope.commentsDS = new kendo.data.DataSource({
  data:$scope.ticket.Comments,
  schema:{model:{fields:{
    txt: {type:"string"},
    by: {type:"string"},
    on: {type:"string"}
  }}},
  pageSize:10
});
When the grid originally loads, it has no rows as the ticket.Comments array is empty.
Now, the Comments data comes in the ajax response returned by "Tickets" service:
if ($scope.objId > 0) {
  Tickets.ticketPromise($scope.objId).then(function(response){
    if (response.data) {
      $scope.ticket = response.data;
      $scope.commentsDS.read();
    }
  });
}
However the grid does not show any records after this. I can step through the code and verify, that $scope.ticket gets an array of Comments before the read() is called.
I found a workaround by using a different data array and then updating elements of this array. 
$scope.tmp = [{}];
$scope.ticket = {"Comments":$scope.tmp};
$scope.comments = new kendo.data.DataSource({
    data: $scope.tmp,
    schema: { ... },
    pageSize: 20
});
if ($scope.objId > 0) {
    Tickets.ticketPromise($scope.objId).then(function(response){
        if (response.data) {
            $scope.ticket = response.data;
            for (var i = 0; i < $scope.ticket.Comments.length; i++){
                $scope.tmp[i]=$scope.ticket.Comments[i];
            }
            $scope.comments.read();
        }
    });
}
I had to use this extra loop to assign tmp elements because one liner "$scope.tmp = $scope.ticket.Comments;" does not work!
Is there a better way???

Thanks, 
-Pavel
Quotient
Top achievements
Rank 1
 answered on 31 Dec 2013
2 answers
140 views
Hello Kendo team!

I'm facing an issue when I try to use ES5 get/set functions within an ObservableObject. Please check this JSBin for details. I was expecting to be invoke get or set functions on my observable object. However, apparently those functions are not recognized as part of the object structure.

Any clues about this problem?

Thanks!
Olivier
Top achievements
Rank 1
 answered on 31 Dec 2013
1 answer
345 views
Hello,

I'm using a  grid,I have calculated cells startDate, endDate and Duration.

When i update the value of either one of these the calculated cell values will change.

But I always get the previous values of the cell and not the current edited value.

Is there a cellLeave function where i can access this value?

Grid is  as follows:-
 @(Html.Kendo().Grid<ROI_DataLayer.ViewModel.MilestonePhasesViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.order_id).Title("ID").Hidden(false).Width(30);
            columns.Bound(e => e.pk_milestone_phase_id).Title("Id No").Hidden(true).Width(50);
            columns.Bound(e => e.phase_name).Width(210);
            columns.Bound(e => e.plan_start_date).Title("Planned <br>Start Date").Format("{0:MM-dd-yyyy}").Width(70);
            columns.Bound(e => e.duration).Title("Duration").Width(40);
            columns.Bound(e => e.plan_end_date).Title("Planned <br>End Date").Format("{0:MM-dd-yyyy}").Width(70);
       })
            .ToolBar(toolbar =>
            {
                toolbar.Save().HtmlAttributes(new { @onclick = "savePhase()" });
            })
        .Editable(editable => { editable.Mode(GridEditMode.InCell); editable.DisplayDeleteConfirmation(false); })
        .Pageable()
        .Navigatable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(5)
        .ServerOperation(false)
        .Model(model =>
            {
                model.Id(p => p.pk_milestone_phase_id);
                model.Field(p => p.SrNo).Editable(false);
                model.Field(p => p.pk_milestone_phase_id).Editable(false);
            })
       .Events(events => { events.Error("error_handler"); })
       .Read(read => read.Action("MP", "Milestone", new { project_id = @Model.pk_project_id }))
        .Update(update => update.Action("Update_MP", "Milestone"))
        ).Selectable(s => s.Mode(GridSelectionMode.Single))
        .Events(events =>
        {
               events.Edit("onEdit");
         })
        .ClientDetailTemplateId("template")
)

function onEdit(e)
{
  var controlHtml = e.container.html();

        if (controlHtml.indexOf("plan_start_date") >= 0 || controlHtml.indexOf("duration") >= 0) {
            var startDate = new Date(e.model.plan_start_date);
            var duration = Number(e.model.duration) - 1;
            var endDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + duration);
            e.model.set("plan_end_date", endDate)
        }
        else if (controlHtml.indexOf("plan_end_date") >= 0) {
            //Get 1 day in milliseconds
            var one_day = 1000 * 60 * 60 * 24;

            // Convert both dates to milliseconds
            var date1_ms = new Date(e.model.plan_start_date).getTime();
            var date2_ms = new Date(e.model.plan_end_date).getTime();

            // Calculate the difference in milliseconds
            var difference_ms = date2_ms - date1_ms;

            // Convert back to days
            var duration = Math.round(difference_ms / one_day) - 1;

            if (duration < 0) {
                e.model.set("duration", duration);
                var grid = $("#grid").data("kendoGrid");
                var rowno = e.model.order_id - 1;
                grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").css('background-color', '#FBC1B7');
            }
            else {
                duration++;

                var grid = $("#grid").data("kendoGrid");
                var rowno = e.model.order_id - 1;
                if (rowno % 2 == 0) {

                    grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").removeAttr("style");
                }
                else {
                    grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").css('background-color', '#eaf4f9');
                }
                e.model.set("duration", duration);
            }

        }

}
Atanas Korchev
Telerik team
 answered on 31 Dec 2013
3 answers
309 views
Hi ,

How can we merge the custom filters with existing filters.

Thanks,
Raj Yennam
Dimo
Telerik team
 answered on 31 Dec 2013
1 answer
108 views
2013.3.1119 – 2013.3.1220 have an issue with handling orientation change events and the body height style is incorrectly persisted as the value of the orientation which the app was initialized in.
Uncaught TypeError: Object [object global] has no method '_resizeToScreenHeight'
Kamen Bundev
Telerik team
 answered on 31 Dec 2013
0 answers
101 views
Hello,

I would like to be able to display events that occur simultaneously side-by-side in the month view.  For example, if I have two events that occur from 9AM - 10 AM, they both show up in 2 columns inside of the current stacked model.  

Attached I am providing a mock-up diagram of the views to illustrate my intentions.

Thanks!
Matthew
Top achievements
Rank 1
 asked on 30 Dec 2013
1 answer
89 views
I am wondering if kendo ui mobile has some comparable to a scroll wheel?  Often in mobile apps you will see dropdown boxes take the form of a scroll wheel to scroll through choices to select.  Is there anything like this on mobile?  I swear I had seen it before, but looking through all the widgets I can't seem to find an example.
Kiril Nikolov
Telerik team
 answered on 30 Dec 2013
1 answer
146 views
I have bound kendo grid using MVVM. In model I have defined required validation for FirstName field.
I have set editable=true for kendo grid.
If user will set blank value for FirstName, validation is fired and working fine.
But when I set detail template for grid and bind data to detail template on detailInit method of kendo grid, required validation is not working.
Is there any solution for this situation.

example link with working validation : http://jsfiddle.net/yzKqV/218/
example link with validation not working : http://jsfiddle.net/yzKqV/219/

Kindly do needful
Kiril Nikolov
Telerik team
 answered on 30 Dec 2013
1 answer
82 views
Hi everyone,

I am facing a very interesting problem. I want to create a simple Todo app with DataSource and templating engine. ( I dont want to using Grid yet. )
The ID of my model is TODOID (I am using oracle db with open access.) I want to use this id field in the template. It works properly until I want to add a new Todo Item. For example:
$("#add-button").click(function () {
        dataSource.add({
            "TITLE": "asd",
            "PRIORITY": 3,
            "DEADLINE": "2013-02-02",
            "DONE": false
        });
 
        dataSource.sync();
    });
In that case, I get an error: "ReferenceError: TODOID is not defined". But if I include the TODOID field as well (e.g "TODOID": 100) then my create method is not being called. It is called only when I dont include the id field in new todo item AND I am not using that field in the template. But I have to use the TODOID field in the template to able to modify or delete and select an item.

So, how can i add a new todo item to the datasource without the reference error but also being able to select a single item in the UI?
Or I am doing it the wrong way and I have to use Grid?

Thank you for your answers,
Daniel
Atanas Korchev
Telerik team
 answered on 30 Dec 2013
1 answer
168 views
This question has been asked before:
http://www.kendoui.com/forums/kendo-ui-web/grid/editcell-method-doesnt-work-in-popup-mode.aspx

But the answer there is not acceptable because setting the grid to "InCell" requires Ajax() instead of Server() on the data source.  This breaks everything for me.  Sorting is only done on the 10 items displayed and not on the entire result set.  For 12,000 records all get passed to the client vs. the 10 records that get passed when the server handles the paging.  Templates don't work at all.

I have my grid up and running and editable in a popup window.  All is well.  I just need one drop down box for editing of one single column on the fly.  This must be possible, but I've spent two days on it, and I'm giving up.  Any ideas?
Vladimir Iliev
Telerik team
 answered on 30 Dec 2013
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?