Telerik Forums
Kendo UI for jQuery Forum
1 answer
296 views

I have a page that contains a dropdown that will drive the contents of my kendo grid.  When a button is clicked, I want to manually call my read function of my grid to get data from my MVC controller.  See below:

$("#engineButton").click(function () {
        $("#logGrid").data("kendoGrid").dataSource.options.transport.read.data.engineId = $("#stationaryEngine").val();
        $("#logGrid").data("kendoGrid").dataSource.read();
        $("#logGrid").show();
    });

My grid is set up as follows:

$("#logGrid").kendoGrid({
     dataSource: {
         transport: {
             read: {
                 url: "@Url.Action("StationaryEngineLogGrid_Read", "Engine")",
                 type: "get",
                 dataType: "json",
                 data: { engineId: 0 }
             },
             create: {
                 url: "@Url.Action("StationaryEngineLogPopup_Create", "Engine")",
                 type: "post",
                 dataType: "json"
             },
             update: {
                 url: "@Url.Action("StationaryEngineLogPopup_Update", "Engine")",
                 type: "post",
                 dataType: "json"
             },
             destroy: {
                 url: "@Url.Action("StationaryEngineLogPopup_Destroy", "Engine")",
                 type: "post",
                 dataType: "json"
             }
         },
         schema: {
             model: {
                 id: "Id",
                 fields: {
                     Id: {
                         type: "number",
                         editable: false
                     },
                     EngineId: {
                         type: "number",
                         editable: false
                     },
                     LogDate: {
                         type: "date",
                         parse: function (data) {
                             var d = new Date(data);
                             data = kendo.toString(new Date(d), "MM/dd/yyyy");
                         }
                     },
                     EngineHoursStart: {
                         type: "number",
                         validation: {
                             required: true
                         }
                     },
                     EngineHoursEnd: {
                         type: "number",
                         validation: {
                             required: true,
                             customValidation: function (input, params) {
                                 if (input.is("[name=engineHoursEnd]")) {
                                     var endHours = $(input).val();
                                     var startHours = input.closest(".k-edit-form-container").find("input[name=engineHoursStart]").val();
                                     if (endHours <= 0) {
                                         $(input).attr("data-customValidation-msg", "End Hours must be > 0.");
                                         return false;
                                     } else if (endHours <= startHours) {
                                         $(input).attr("data-customValidation-msg", "End Hours must be > Start Hours.");
                                         return false;
                                     }
                                 } else if (input.is("[name=engineHoursStart]")) {
                                     var startHours = $(input).val();
                                     var endHours = input.closest(".k-edit-form-container").find("input[name=engineHoursEnd]").val();
                                     if (startHours <= 0) {
                                         $(input).attr("data-customValidation-msg", "Start Hours must be > 0.");
                                         return false;
                                     } else if (startHours > endHours) {
                                         $(input).attr("data-customValidation-msg", "Start Hours must be < End Hours.");
                                         return false;
                                     }
                                 } else if (input.is("[name=logDate]")) {
                                     var date = $(input).data("kendoDatePicker").value();
                                     if (date > new Date()) {
                                         $(input).attr("data-customValidation-msg", "Date must be today or less.");
                                         return false;
                                     }
                                 }
                                 return true;
                             }
                         }
                     },
                     Hours: {
                         type: "number",
                         editable: false
                     },
                     RunningTotalHours: {
                         type: "number",
                         editable: false
                     },
                     EmergencyUse: {
                         type: "boolean"
                     },
                     MaintenanceUse: {
                         type: "boolean"
                     },
                     MonitorLight: {
                         type: "string"
                     },
                     Comments: {
                         type: "string"
                     }
                 }
             }
         },
         error: function (e) {
             if (e.errors) {
                 var message = "Errors:\n";
                 $.each(e.errors, function (key, value) {
                     if ('errors' in value) {
                         $.each(value.errors, function () {
                             message += this + "\n";
                         });
                     }
                 });
                 alert(message);
             }
         }
     },
     editable: {
         mode: "popup",
         template: $("#popup_editor").html()
     },
     edit: function (e) {
         var editWindow = this.editable.element.data("kendoWindow");
         editWindow.wrapper.css({ width: 600 });
         if (e.model.isNew()) {
             editWindow.title("Add new logging record");
             $("#EngineId").val($("#stationaryEngine").val());
             e.model.LogDate = "@DateTime.Now.Date.ToShortDateString()";
             e.model.EngineId = $("#stationaryEngine").val();
         } else {
             editWindow.title("Edit logging record");
         }
         $("#logDate").kendoDatePicker({
             format: "MM/dd/yyyy",
             parseFormats: ["MM-dd-yyyy", "MM/dd/yyyy"]
         });
         editWindow.center();
     },
     toolbar: [{ name: "create", text: "Add new logging record" }],
     columns: [
         { field: "Id", hidden: true },
         { field: "EngineId", hidden: true },
         { field: "LogDate", title: "Date", format: "{0: MM/dd/yyyy}" },
         { field: "EngineHoursStart", title: "Engine Hours Start" },
         { field: "EngineHoursEnd", title: "Engine Hours End" },
         { field: "EmergencyUse", title: "Emergency Use", template: "<input type='checkbox' #= EmergencyUse ? checked='checked':'' # />" },
         { field: "MaintenanceUse", title: "Maintenance Use", template: "<input type='checkbox' #= MaintenanceUse ? checked='checked':'' # />" },
         { field: "MonitorLight", title: "Monitor Light" },
         { field: "Comments", title: "Comments" },
         {
             command: [{
                 name: "edit",
                 text: {
                     update: "Save"
                 }
             },
             {
                 name: "destroy"
             }],
             title: "Actions"
         }
     ]
 });

Now, all of this works for my read function.  I hit my breakpoint in my controller.  Great.  However, when I do a Create, I have a date field inside my popup template that will not come across to my controller.  It's defined as follows:

<script id="popup_editor" type="text/x-kendo-template">
...
    <input type="text" name="logDate" data-type="date" data-bind="value:LogDate" data-role="datepicker" required />
...
</script>

Every time I submit the popup form, the date never comes across to my controller.  I read in other posts that you have to use a ParameterMap in your datasource, but if doing so, it messes up the read functionality.

Is there a way to accomplish both the read functionality and the create with my date being parsed correctly and passed to my controller?

Stefan
Telerik team
 answered on 06 Oct 2016
1 answer
90 views

Documentation for depth / start is wrong.

Quote:

"MONTH"
shows the days of the month
"YEAR"
shows the months of the year
"DECADE"
shows the years of the decade
"CENTURY"
shows the decades from the century

MONTH, YEAR, DECADE ... is not working, month, year, decade ... is.

Dimiter Topalov
Telerik team
 answered on 06 Oct 2016
2 answers
198 views

There are 2 different examples how to use confirm:

kendo.confirm("Are you sure that you want to proceed?").then(function () { //from online demos

kendo.confirm("Are you sure that you want to proceed?").done(function () { //from online documentation

But kendo.all.d.ts has:

function confirm(text: string): void;

which makes it impossible (without typecasting to any) for chaining (then/done). Same for prompt.

Vessy
Telerik team
 answered on 06 Oct 2016
1 answer
161 views

I have a grid declared as:

    columns: [
        { title: "", width: "55px", template: kendo.template($("#serviceActionsTemplate").html()) },
        { field: "serviceDate", title: "Service Date", type: "date", template: "#= kendo.toString(kendo.parseDate(serviceDate), '" + vm.dateFormat + "') #", width: "120px" },
        { field: "serviceType", title: "Service Type", width: "150px" },
        { field: "referenceNumber", title: "Ref Number", width: "100px" },
        { field: "odometer", title: "Odometer", type: "number", format: "{0:n0}", attributes:{style:"text-align:right;"}, width: "100px" },
        { field: "engineHours", title: "Engine Hrs", type: "number", format: "{0:n0}", attributes: { style: "text-align:right;" }, width: "100px" },
        { field: "totalCost", title: "Total Cost", type: "number", format: "{0:c2}", attributes: { style: "text-align:right;" }, aggregates: ["sum"], footerTemplate: "<div style='float: right'>#= kendo.toString(sum, 'c2') #</div>", width: "90px" },
        { field: "itemId", title: "ItemId", type: "number", width: "90px", hidden: true },
        { field: "serviceId", title: "ServiceId", type: "number", width: "90px", hidden: true }
    ],
    autoBind: false,
    dataSource: vm.serviceListGridData,
    editable: "inline",
    filterable: true,
    groupable: false,
    height: 400,
    navigatable: true,
    pageable: false,
    resizable: true,
    scrollable: true,
    sortable: { mode: "multiple" }
}

The html:

<md-tab label="Servicing">
    <md-content>
        <div id="vehicleServicingList" name="vehicleServicingList">
            <section class="page-bar">
                <md-button ng-click="vm.addServicing($event)" ng-disabled="!vm.security.allowCreateServicing" aria-label="Add Servicing">
                    <md-tooltip>Add New Servicing</md-tooltip>
                    <md-icon md-svg-icon="plus"></md-icon> Add
                </md-button>
                <md-button ng-click="vm.editServicing($event)" ng-disabled="vm.security.editLevelServicing < 1 || vm.selectedServices.length != 1" aria-label="Edit Servicing">
                    <md-tooltip>Edit Selected Servicing</md-tooltip>
                    <md-icon md-svg-icon="pencil"></md-icon>
                </md-button>
                <md-button ng-click="vm.removeMultipleServices($event)" ng-disabled="!vm.security.allowDeleteServicing || vm.selectedServices.length < 1" aria-label="Delete Selected Servicing">
                    <md-tooltip>Delete Selected Servicing</md-tooltip>
                    <md-icon md-svg-icon="delete"></md-icon>
                </md-button>
            </section>
 
            <kendo-grid id="serviceListGrid" name="serviceListGrid" options="vm.serviceListGridOptions" ></kendo-grid>
        </div>
    </md-content>
</md-tab>

When I attempt to click the checkbox in the first column the grid moves and then I try again and it moves again until it pushes the toolbar off the top.

Please see attached images of how it looks before the click on checkbox and after. The grid seems to push the tabs, toobar and column headers off the top.

Alexander Popov
Telerik team
 answered on 06 Oct 2016
1 answer
152 views

Kendo UI for JSP

Hi All,

How can i create dependency in kendo UI for JSP. for example. I have combo box with country names. I will select country names its respective states should get load in another combo box. please help me with this.

 

 

regards,

Irfan

Dimiter Topalov
Telerik team
 answered on 06 Oct 2016
7 answers
2.1K+ views
How to get the cells' value of the selected range? please give the example, thanks!
Alexander Popov
Telerik team
 answered on 06 Oct 2016
10 answers
369 views

Hello guys, 

Is there a way to change the visual marker to be on left on the line on the middle.

I have provided this dojo to better illustrate what i want to do.

Thank you very much.

Daniel
Telerik team
 answered on 06 Oct 2016
3 answers
182 views
Hello,
I'm trying to figure out why this behavior is changed on the last kendo release .. with no luck
The strange behavior that was working perfecly on kendo 2014.3.1411 and which is changed in vers. 2015.1.318
is the follow:

when I have a dropdown list in a popup edit mode which can be nullable and I manually change the value from the defaultValue to another value,
the first time the dropdown doesn't fire anything, all the other tiimes it fires correctly.

http://dojo.telerik.com/isECi

Eg.
click on New Record
change once "CategoryID" (doesn't fire)
chenge it once again (it fires)

with old versions

http://dojo.telerik.com/isECi/3
click on New Record
change once "CategoryID" (fires)

is this a bug ?
Thank you

Simone
Georgi Krustev
Telerik team
 answered on 06 Oct 2016
13 answers
2.3K+ views
Can someone please have a look at the code and screen shots below and see 
if you can give me some idea why the grid is blank after returning a valid collection
as part of a JsonResult?

Html.Kendo().Grid<AppointmentsDTO>().Name("FailedAppointments")                 .Columns(columns =>                 {                     columns.Bound(o => o.MemberFirstName).Title("Member First").Width(80);                     columns.Bound(o => o.MemberLastName).Title("Member Last").Width(80);                     columns.Bound(o => o.ClientMemberID).Title("ClientID").Width(60);                     columns.Bound(o => o.ProviderID).Title("ProviderID").Width(60);                     columns.Bound(o => o.ProviderFirstName).Title("Provider First").Width(80);                     columns.Bound(o => o.ProviderLastName).Title("Provider Last").Width(100);                     columns.Bound(o => o.AppointmentDate).Title("Appointment Date").Width(200);                     columns.Bound(o => o.IHAAppointmentID).Hidden(true);                 })                 .EnableCustomBinding(true)                 .AutoBind(true)                 .Pageable(page => page.Enabled(true).PageSizes(new Int32[] {20, 30, 50,100}))                 .Sortable(sorting => sorting.SortMode(Kendo.Mvc.UI.GridSortMode.SingleColumn))                 .Selectable()                 .Scrollable(scroll => scroll.Height(350))                 .DataSource(dataSource => dataSource                     .Ajax()                     .Read(read => read.Action("BindFailedAppointments""AppointmentScheduling")))





Daniel
Telerik team
 answered on 06 Oct 2016
1 answer
117 views
I'm experiencing extreme performance issues when loading pages with vertical grouping in IE on Windows 7. For example, http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical will take 15 seconds or longer to load. During load time, IE will lock up for about 15 seconds and bog don my computer until the page finally completes rendering. This only appears to happen on vertical grouping since none of the other demos for the scheduler cause issues. The odd thing is that this seems to happen to random windows 7 machines. I have been unable to reproduce this on Windows 10 or in Chrome and Firefox. This happens in all versions of IE.
Bozhidar
Telerik team
 answered on 06 Oct 2016
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
ScrollView
Switch
TextArea
BulletChart
Licensing
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
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?