Telerik Forums
Kendo UI for jQuery Forum
7 answers
137 views
Hi guys,

So I have a custom editor template which looks like this:

<script id="editor" type="text/x-kendo-template">
    <div >
        <h3>Create appointment</h3>
        <p>
        <label>Notes: <textarea name="notes"></textarea></label>
        </p>
        <p>
        <label>Employee:
            <select ng-controller="Employees" name="employee_uid" class="form-control" required>
                <option ng-selected="{{e.uid == @Model.m_sesson.m_staffGuid}}" value="{{e.uid}}" ng-repeat="e in employees"   >{{e.first_name}} {{e.last_name}}</option>
            </select>
        </label>
        <p>
        <label>Client:
            <select ng-controller="Clients" name="client_uid" class="form-control" required>
                <option value="{{c.uid}}" ng-repeat="c in clients" >{{c.first_name}} {{c.last_name}}</option>
            </select>
        </label>
        </p>
        <p>
        <label>Start: <input data-role="datetimepicker" name="start" /></label>
        </p>
        <p>
        <label>End: <input data-role="datetimepicker" name="end" /></label>
        </p>
    </div>
</script>

And my schema looks like this:

schema: {
                model: {
                    id: "taskId", // The "id" of the event is the "taskId" field
                    fields: {
                        // Describe the scheduler event fields and map them to the fields returned by the remote service
                        taskId: {
                            from: "uid", // The 'TaskID' server-side field is mapped to the 'taskId' client-side field
                            type: "number"
                        },
 
                        client_uid: { type: "number" },
                        employee_uid: { type: "number" },
                        notes: { type: "text"},
 
                        start: { type: "date" },
                        end: { type: "date" },
 
                        title: { from: "notes", defaultValue: "No title", validation: { required: true } },
                        description: { from: "Description", defaultValue: "No description" },
                        recurrenceId: { from: "RecurrenceID", defaultValue: null },
                        recurrenceRule: { from: "RecurrenceRule", defaultValue: null },
                        recurrenceException: { from: "RecurrenceException", defaultValue: null },
                        isAllDay: { type: "boolean", from: "IsAllDay", defaultValue: false }
                    }
                }
            }

But the only fields which get written out (from my template) when I click 'save' on a new appointment are 'start' and 'end'.

Any idea why?

Cheers, Paul.
Kiril Nikolov
Telerik team
 answered on 18 Aug 2014
3 answers
397 views
I have a kendo upload component with a custom template that will include a dropdown list for each file selected. The user will select a list of files to upload and then use the dropdown lists to select the upload type for each item in the upload list.


<script id="fileTemplate" type="text/x-kendo-template">
    <span class='k-progress'></span>
    <div class='file-wrapper'>
        <span class='file-icon #=addExtensionClass(files[0].extension)#'></span>
        <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
        <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
        <label></label>
        <select id="uploadType" class="uploadType" name="uploadType">
            <option>Unknown</option>
            <option>Type A</option>
            <option>Type B</option>
            <option>Type C</option>
            <option>Type D</option>
        </select>
        <button type='button' class='k-upload-action'></button>
    </div>
</script>
 
$(document).ready(function () {
    $("#files").kendoUpload({
        multiple: true,
        async: {
            saveUrl: '@Url.Action("Save", "DataUpload")',
            autoUpload: false
        },
        template: kendo.template($("#fileTemplate").html()),
        error: onError
    });
});
 
function onError(e)
{
    ???How do I get error information to use here???
}



[HttpPost]
public ActionResult Save(IEnumerable<HttpPostedFileBase> files, ???)
{
    //I need to know what type was selected before I can decide what
    //processing should be done for the file. So, I assume I need another
    //Param that contains he type selected by the user.
 
    return Content("");
}


I have 2 questions:

1. How do I get access to the dropdown values set for each item from inside my controller action?

2. if the upload fails how do I get error information to use in the onError method?
Dimiter Madjarov
Telerik team
 answered on 18 Aug 2014
1 answer
132 views
I'm running into a situation where a grid is getting it's template parsed during the rendering of another entirely different views grid.

Here's the rundown:

I have a datasource that is bound to two different grids (each on their own view).

That datasource get's read with some options that then return which view to render based on the results passed back from the server.

Initial rendering result A : Grid "List" is fine...
Initial rendering result B : Grid "Details" is fine as well...
now if I go back and search where the result will be scenario "A" again... the view still tries to parse the row templates for grid B. I don't know what I'm doing wrong. I'm positive I only have one instance of each Grid (they are unique IDs).

Here's my code to show the relevant parts of this:

My Two views that contain grids... (Note these templates referenced here only contain one div that is a container for a Grid instantiated in my model)...

I can attach my row templates in separate code to try and keep this from getting crazy messy.
var checkinSearchResultsListView = new kendo.View("#checkin-search-results-list-view-template",{
model: checkinSearchModel, init: checkinSearchModel.initSearchResultsListGrid, show: checkinSearchModel.onShowListGrid
});
 
var checkinSearchResultsDetailView = new kendo.View("#checkin-search-results-detail-view-template",{
model: checkinSearchModel, init: checkinSearchModel.initSearchResultsDetailGrid, show: checkinSearchModel.onShowDetailGrid
});


Here's my Datasource... Where I parse the response to determine the view, because I don't know which path the user will take upon their initial search.

getSearchResults : new kendo.data.DataSource({
            transport: {
                read:  {
                    url: function(options) {
                        return "/4DACTION/WEB_CheckinSearch/" + JSON.stringify(options);
                    },
                    type: 'POST',
                    dataType: "json",
                    complete: function(jqXHR) {
                        var response = dataGetComplete(jqXHR);
                        console.log(response.success);
                        if (response.success.resultsType == "0"){
                            // No results
                            checkinSearchModel.set('noResultsVisible', true);
                        else if (response.success.resultsType == "1") {
                            console.log('-----showing detail view-----');
                            // List of family members results
                            mainLayout.showIn("#checkin-content", checkinSearchResultsDetailView);     
                        } else if (response.success.resultsType == "2") {
                            console.log('-----showing list view-----');
                            // List of families results ; multiple results
                            mainLayout.showIn("#checkin-content", checkinSearchResultsListView);   
                        }
                    }
                }
            },
            schema: {
              data: function(response) {
                console.log(response.success);
                if(response.success.resultsType == "1"){
                    return response.success.resultsDetails;
                } else {
                    return response.success.resultsList;
                }
              },
              total: function (response) { return response.success.total; }
            },
            pageSize: 10
    }),


Here's Grid A's Init Code...
initSearchResultsListGrid : function(e){
    e.preventDefault();
    $("#search-results-list-grid").kendoGrid({
        dataSource: checkinSearchModel.get('getSearchResults'),
        rowTemplate: $('#checkin-search-results-list-row-template').html(),
        altRowTemplate: $('#checkin-search-results-list-row-alt-template').html(),
        selectable: "row",
        sortable: true,
        autoBind: true,
        pageable: {
          pageSizes: true,
          pageSizes: [10,25,50,100,500]
        },
        columns: [
                {
                    title: 'Name',
                    field: "lastName",
                    sortable: true
                }, {
                    title: 'Address',
                    hidden: false
                }]
    });
},

Here's Grid B's init code
initSearchResultsDetailGrid : function(e){
    e.preventDefault();
    $("#search-results-detail-grid").kendoGrid({
        dataSource: checkinSearchModel.get('getSearchResults'),
        rowTemplate: $('#checkin-search-results-detail-row-template').html(),
        altRowTemplate: $('#checkin-search-results-detail-row-template').html(),
        selectable: "row",
        pageable: {
          pageSizes: true,
          pageSizes: [10,25,50,100,500]
        },
        columns: [
                {
                    title: 'Name',
                    sortable: true
                }, {
                    title: 'Checking into'
                }, {
                    title: 'Currently in'
                }, {
                    title: ' ',
                    width: 85
                }, {
                    title: ' ',
                    width: 85
                }, {
                    title: ' ',
                    width: 85
                }]
    });
},


David
Top achievements
Rank 2
 answered on 15 Aug 2014
2 answers
238 views
Hi, how can I translate the DatePicker to my language ? I've post new question in Stackoverflow 

http://stackoverflow.com/questions/25300046/translate-date-picker-kendo-ui-with-angularjs

any help?
Rodrigo
Top achievements
Rank 1
 answered on 15 Aug 2014
1 answer
83 views
Hello,

is it possible to create kendoui controls by code only (without creating html tags)? I am using SmartMobileStudio to create html5 apps. In SmartMobileStudio you actually don't touch the html file, it is all generated by code.
Alexander Valchev
Telerik team
 answered on 15 Aug 2014
1 answer
70 views
I am using KendoMap control.

I just want to position the close option in tool tip of Map marker.How to do this.?
And the code , I'm using is..........
<script type="text/javascript">
    var markers_array = [];
    function create_markers_array_from_data() {
     $.ajax({
          type: "POST",
          url: '@Url.Action("GetDemographyDetails", "Map")',
          data: {
              selectedChannels: '@Model.ParameterNames',
              channelids:'@Model.ParameterIds'
          },
          async: false,
          dataType: "json",
          success:
              function (response) {
                  if ((response == "\"Session Expired\"") || (response == "Session Expired")) {
                      location.href = kendo.format('@(Server.UrlDecode(Url.Action("Account", "Login")))');
                  }
                  for (var i = 0; i < response.length; i++) {
                      markers_array.push({
                          location: [parseFloat(response[i].Latitude), parseFloat(response[i].Longitude)],
                          tooltip: {
                              content: response[i].Content,
                              close: {
                                   position:"left"     
                              }
                           },
                           shape: response[i].CompanyStatus
                      })
                  }
              }
      });

        return markers_array;
    }
    $("document").ready(function()
    {
        $("#map").kendoMap({
            center: [21.0, 79.4667],
            zoom: 5,
            layers: [{
                 type: "tile",
                 urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                 attribution: "&copy; OpenStreetMap"
                 }],
             markerDefaults: {
                 shape: "GREENMARKER"
             },
             markers: create_markers_array_from_data()
             
        });
    });
  
Hristo Germanov
Telerik team
 answered on 15 Aug 2014
1 answer
271 views
During execution of a kendoDropTargetArea.drop function I would like to (based on conditions) cancel the drop and have the object snap/fly back like it was dropped on a un-droppable area.

Is there a "cancel" drop solution?

thanks.
Alexander Valchev
Telerik team
 answered on 15 Aug 2014
1 answer
131 views
I made a router for my spa, and it's working, but I just want to make sure I'm doing it right since there's no demo for routing and people have done it differently.
It looks like it works great, but do most people use angular for the routing?  I'd rather not load another library, but maybe there's more features, I don't know.  I can't seem to find may real world examples.

I saw a course on Plural site using it and they put everything in kendo templates. (main below is a kendo template render on the div root).
//Initialize New Router
router = new kendo.Router({
    init: function () {
        main.render("#root")
    }
});
For me, my root is never going to change, it's the header so I didn't put my main header in a view.  There's no benefit in the is there?

Is my following code good for my spa?  Should I add push state?  When I do, things mess up cus my site isn't on the '/' directory.
<section class="header main">
    <nav>
        <a id="nav-toggle" href="#"><span></span></a>
        <ul>
            <li><a id="linkHome" href="#">Home</a></li>
            <li><a id="linkClients" href="#">Clients</a></li>
            <li><a id="linkReports" href="#">Reports</a></li>
        </ul>
    </nav>
    <div class="brandmark">
        <img src="/images/brandmark-snap-light.png">
    </div>
    <div class="searchBox">
        <input type="search" class="k-input toggle">
    </div>
</section><!-- / .header.main -->
<div id="content" >
  
</div>
 
<script>
    var router;
    var menu;
 
    //Initialize New Router
    router = new kendo.Router({
       init: function () {
           router.navigate("HomeSA");
        }
    });
 
    router.route("/", function () {
    });
 
    router.route(":firstLevel", function (firstLevel) {
        $("#content").load("Content/" + firstLevel + "Page.html");
    });
    $(function () {
        router.start();
        $("#linkHome").click(function () {
            router.navigate("HomeSA");
            $('section.main.header ul').slideToggle();
            return false;
        });
        $("#linkReports").click(function () {
            router.navigate("Report");
            $('section.main.header ul').slideToggle();
            return false;
        });
        $("#linkClients").click(function () {
            router.navigate("Client");
            $('section.main.header ul').slideToggle();
            return false;
        });
    });

Petyo
Telerik team
 answered on 15 Aug 2014
3 answers
166 views
Hello,

Would it be possible to change the stacking of Notifications, so that the next Nofication basicly moves the old Notification to the stacking direction ?
If would like the stacking to work like Toastr demo .

Thanks in advance.
Dimo
Telerik team
 answered on 15 Aug 2014
2 answers
201 views
Pardon my ignorance but what is the reason behind the pattern of using 

var that = this;

in KenodUI? 

that is declared as a local variable so would it not always refer to this when a function on 
a widget is invoked? 

I must be missing something.

Thanks in Advance.
Petyo
Telerik team
 answered on 15 Aug 2014
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
Bronze
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
Bronze
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?