Telerik Forums
Kendo UI for jQuery Forum
1 answer
170 views
I'm using kendoui Scheduler with a customized appointment editor (with MVC4 Razor).
All fields in the scheduler and in the editor window are in the correct language, except in the reccurrence editor - here all texts are still in default langauge english - alls fields part of "reoccurenceContainer" ?!

<div id="schedulerEventEditor">
    <fieldset>
        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model =>model.Title, new {data_bind ="value: title"})
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Description, new {rows = 5, cols=24, data_bind ="value: description"})
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Start)
        </div>
        <div class="editor-field">
            <input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" />
            <input name="start" type="text" required data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" />
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.End)
        </div>
        <div class="editor-field">
            <input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end ,invisible:isAllDay" />
            <input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end ,visible:isAllDay" />
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.IsAllDay)
        </div>
        <div class="editor-field">
            <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay" />
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.RecurrenceRule)
        </div>
        <div class="reoccurenceContainer">
            <div class="editor-field">
                <div data-bind="value: recurrenceRule" id="recurrenceEditor"></div>
            </div>
        </div>
    </fieldset>
 
<script>
    jQuery(function () {       
        $("\#recurrenceEditor").kendoRecurrenceEditor();
    });
 
</script>
Vladimir Iliev
Telerik team
 answered on 13 Nov 2013
4 answers
93 views
Hi everyone,

    I have created an event editor template and I have added a resource dropdownlist as in this thread.

    http://www.kendoui.com/forums/kendo-ui-web/scheduler/how-to-create-editable-template-with-the-resource-.aspx

    But I think that occurs a bug when you open the event a second time and you close it with cancel button.

    For example:
    1) You open the event window and you change the resourse. If you click Save button all is OK, the event move to selected resource.
    2) You open the same event. In resource dropdownlist the selected option is the updated resource.
    3) But if you click  Cancel button then the event is moved to old resource in all views (day, week, month and agenda). The strangest thing is that in database doesn't occurs any update, it is the new value but in scheduler it is showed the old value.

    If you open another event all work correctly, the problem is only when you open a second time the same event and you click cancel.

Thank you
Regards
salvador
Top achievements
Rank 1
 answered on 13 Nov 2013
1 answer
134 views
Hi...

     Iam currently working on Kendo UI MVC Grid and have a couple of requirements mentioned below:

     1) Kendo grid with a dropdown column in the view mode, i mean its not like the dropdown we see in the edit mode.
     2) Dropdown in the grid should be filtered and loaded based on a row primary key data, it should make an ajax call to controller and populate the drop down after data filter.

I tried using the client template and foreign key columns, both the features only give dropdown in the edit mode and the data in the dropdown is loaded on Grid initialization and stored in view data, so no more hits to server after that. I couldn't find any sources for these couple of requirements i have.
It would be great if i can get some code snippets.
Thanks in advance...
-Naren
Petur Subev
Telerik team
 answered on 13 Nov 2013
5 answers
1.0K+ views
Hi,

I am trying to validate textboxes inside a grid column. This column is having different html controls depending on source data.
For example it can have textbox in one row and dropdown in next. I am able to achieve this using client template.
I want to validate inputs in textboxes. Validation can be different for each text box. It can be for number, max length and/or custom.
I am passing list of validation attributes in source data.

This is working good unless I click on any other grid cell having client template. As soon as I click such cell the validation message is disappering.

Any help on this is greatly appricated!

Thanks

Client template code -

01.sourceData 
02.function CustomControlEditor(sourceData, defaultValue, templateType, controlType)
03.    {
04.         
05.        if (sourceData != null && sourceData != '' )
06.        {
07.            var dd;
08.            if (controlType == "Multiselect")
09.            {
10.                dd = "<select id= 'dd' multiple='multiple'  onchange='SensorDropDownChanged(this,\"" + templateType + "\");'>";
11.  
12.                //get source data
13.  
14.        //get default values
15.  
16.        //populate list  
17.                
18.                return dd;
19.            }
20.            else if (controlType == "Dropdownlist")
21.            {
22.                dd = "<select id= 'dd' onchange='SensorDropDownChanged(this,\"" + templateType + "\");'>";
23.  
24.                 //get source data
25.  
26.        //get default values
27.  
28.        //populate list  
29.                
30.                return dd;
31.            }
32.          
33.        //textbox sourceData is list of validation attributes
34.           else {
35.  
36.            var tb;
37.  
38.            if (defaultValue != null)
39.        {
40.                 
41.                    tb = "<input id= 'tbText' type='text' value='" + defaultValue + "' onblur='SensorTextBoxChanged(this,\"" + templateType + "\");' " + sourceData + "/>";
42.                }
43.            else
44.        {
45.                    tb = "<input id='tbText' 'tb' type='text' 'onblur='SensorTextBoxChanged(this,\"" + templateType + "\");' " + sourceData + "/>";
46.                }
47.            return tb;
48.        }
49.        }
50.          
51.              
52.    }

Archana
Top achievements
Rank 1
 answered on 12 Nov 2013
1 answer
111 views
One thing I have missed a lot with Kendo, that I was accustomed to with KnockoutJS was the KnockoutJS Mapping Plugin. This was an extremely useful feature to me. I have very much wanted its functionality in kendo, so I took some time and just wrote a small few lines of code to do some of what I used to with knockout.

I don't know if this will ever see the light of day, but I would love to see this kind of thing in the future of kendo.

First, you just declare a mapping. To make this easier, I simply added it to the declaration of a model in kendo.data.Model.define. This particular mapping simply uses a function to merge all children under an array called Tags when it is created, so that they each have a function.

var Model = kendo.data.Model.define({
    id: "Id",
    fields: {
        Id: {
            type: "string",
        },
        Name: {
            type: "string",
        },
        Tags: []
    },
    mapping: {
        Tags: {
            children: function (data) {
                return $.extend(data, {
                    onRemove: function (e) {
                        console.log(e);
                    }
                });
            }
        }
    }
});
Next, you need an actual function to perform the mapping. I did this with this code.
kendo.mapping = function (source, mapping) {
    var name,
        value;
 
    // if the user provides us a mapping, we can use that to help
    // build the objects appropriately
    for (name in source) {
        if (source.hasOwnProperty(name)) {
            // get the value for this property or item
            value = source[name];
 
            // try to determine if this is an array, or just a
            // normal object. That will greatly dictate our choice of behavior
            if (value instanceof Array) {
 
                // if this is an array, then we will try to check for a
                // key in the mapping schema
                if (mapping[name].children) {
 
                    // if we discover a mapping key for this array, we
                    // will use it to reconstruct the array data
                    for (var i = 0; i < value.length; i++) {
                        source[name][i] = mapping[name].children(value[i]);
                    }
                }
            } else {
                // attempt to match any non array type keys
                if (mapping[name]) {
                    source[name] = mapping[name](value);
                }
            }
        }
    }
 
    return source;
}
This will go through the mapping data given, and some JSON data given, and do the appropriate work to call upon the mapping keys and
children functions.

Now, I have a function for merging raw JSON data with a kendo view model.
kendo.data.ObservableObject.prototype.fromJSON = function (source, mapping) {
    var name,
        value,
        observable = this;
 
    // if there is mapping given, then pass it through that first
    if (mapping) {
        source = kendo.mapping(source, mapping);
    }
 
    for (name in source) {
        if (observable.hasOwnProperty(name)) {
            observable.set(name, source[name]);
        }
    }
}
So then, I can just call this in my view model and javascript like this.
var viewModel = new Model({
    Id: null,
    Name: null,
    Tags: []
});
 
var dataSource = new kendo.data.dataSource({
    transport: {
        read: {
            url: '/data/items/',
            dataType: "json",
            type: 'GET'
        }
    },
    schema: {
        total: "total",
        data: "data"
    }
});
So then, the controller returns data that looks like this.
Id: "items/1",
Name: "Some Game Item",
Tags: [
    {
        Id: "tags/1",
        Name: "Sword"
    },
    {
        Id: "tags/2",
        Name: "Weapon"
    }
]
And the mapping just needs one call, to merge it with the view model, and to map the function onto the tags array. Where data is the data returned from the dataSource.
viewModel.fromJSON(data.toJSON(), viewModel.mapping);
I think you will find this is extremely useful for building complex models that meet more realistic business needs.

Stacey
Top achievements
Rank 1
 answered on 12 Nov 2013
2 answers
102 views
It is not possible to set valueAxis properties for StockChart Navigator. If we have a chart as in the attached image, we have the blue line in the main chart and also in the navigator, but they seems different. This is because the valueAxis of the line chart is from 0 to 120000 (from 0 because we have the other violet line with values near 0), whereas the navigator "valueAxis" is from 98000 to 104000 (the same in the main line chart, if we put just the blue line and we remove the violet one).
Stefania
Top achievements
Rank 1
 answered on 12 Nov 2013
2 answers
234 views
We have a modal view that has content loaded into it dynamically via some ajax calls. After the data is loaded and the modal is made visible, the scroll bar is always still at the position it was for the previous content. How can we scroll it to the top after loading the content?

Thanks
Michael
Top achievements
Rank 1
 answered on 12 Nov 2013
4 answers
257 views
Hi,

I would like to know if there is any documentation on the filter parameter for the kendoDraggable function.  I have searched a lot and not found anything.

My current situation is that I have drag and drop working between 2 kendo ui grids and all is great.  However, the draggable filter is currently:
filter: "tbody > tr"
This causes the whole line to then display in the drag.  I would like to find a way to specify the first column in that row and not the whole row.

Any input would be greatly appreciated.

Kiril Nikolov
Telerik team
 answered on 12 Nov 2013
1 answer
91 views
Hello,

I am experiencing an issue with the endless scroll when used with data pulled from the local database. When I scroll down the loading image appears at the bottom and it never disappears. Also, when I reach a point in the list and I scroll up there is almost a third of the screen that is not visible until I reach the top. 

I tried it with data pulled from a server and works perfectly but not with data pulled from the local database. To me it looks like it does not know when the request is over so that it can hide the loading image.

This is the code I am using:

 
var dataSource = new kendo.data.DataSource({
           type: "json",
           transport: {
               read: function(options) {
                   db.transaction(queryRows, app.dbError);
                    
                   function queryRows(tx) {
                       tx.executeSql("SELECT comps.*, (SELECT COUNT(*) FROM comps WHERE comps.comp_name LIKE ?) as total FROM comps WHERE comps.comp_name LIKE ? LIMIT ?, ?", ["%" + $("#search-comp-name").val() + "%", "%" + $("#search-comp-name").val() + "%", (options.data.page - 1) * 20, 20], queryRowsSuccess, queryRowsFailure);
                   }
                   
                   function queryRowsSuccess(tx, results) {
                       var res = Array();
                       var total = 0;
                        
                       for(var i = 0; i < results.rows.length; i++) {
                           res.push(results.rows.item(i));
                       }
                        
                       if(results.rows.length > 0)
                           total = results.rows.item(0).total;
                        
                       var resSchema = {
                           results: res, total: total
                       };           
                        
                       options.success(resSchema);
                        
                   }
                    
                   function queryRowsFailure(err) {
                       app.compListDbError();
                   }
               }
           },
           schema: {
               total: function (response) {
                       return response.total;
                   },
               data: function(response) {
                       return response.results;
                   },
           },
           serverPaging: true,
           pageSize: 20
       });
        
       
 
       $("#companyResultList").kendoMobileListView({
           dataSource: dataSource,
           template: $("#endless-scrolling-template").text(),
           endlessScroll: true
       });
Kiril Nikolov
Telerik team
 answered on 12 Nov 2013
1 answer
130 views
Hi everyone,

    Could I change the time format to "HH:mm" in the shadow event when you are moving or resizing the event?

    I've been looking for examples or any guide but I can't find it.

    Maybe using move or resize event?

Thanks in advance
Regards
Vladimir Iliev
Telerik team
 answered on 12 Nov 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?