or
2 answers
122 views
Hello.
I'm using Scheduler with AngularJS. I have custom editor template, which is defined as follows:
01.<div kendo-scheduler="main.calendar" k-options="main.schedulerOptions" id="scheduler" class="full-height">02. 03. <div k-event-template class='custom-event event-font-small event-left-margin'>04. {{dataItem.title}}05. </div>06. 07. <script id="customEditorTemplate" type="text/x-kendo-template">08. <div class="k-edit-label"><label for="projectNumber">Проект</label></div>09. <div data-container-for="projectNumber" class="k-edit-field">10. <select kendo-combo-box k-options="main.projectListOptions"11. name="projectNumber" 12. required="required" data-required-msg="Код проекта обязателен для заполнения" data-bind="value:projectId" />13. </div>14. 15. <div class="k-edit-label"><label for="title">Тема</label></div>16. <div data-container-for="title" class="k-edit-field">17. <input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">18. </div>19. 20. <div class="k-edit-label"><label for="activityType">Вид деятельности</label></div>21. <div data-container-for="activityType" class="k-edit-field">22. <select kendo-combo-box k-options="main.activityTypeListOptions"23. name="activityType" data-bind="value:activityTypeId"/>24. </div>25. 26. <div class="k-edit-label">27. <label for="start">Начало</label>28. </div>29. <div data-container-for="start" class="k-edit-field">30. <input type="text"31. data-role="datetimepicker"32. data-interval="15"33. data-type="date"34. data-bind="value:start,invisible:isAllDay"35. name="start" />36. <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />37. <span data-bind="text: startTimezone"></span>38. <span data-for="start" class="k-invalid-msg" style="display: none;"></span>39. </div>40. <div class="k-edit-label"><label for="end">Окончание</label></div>41. <div data-container-for="end" class="k-edit-field">42. <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />43. <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />44. <span data-bind="text: endTimezone"></span>45. <span data-bind="text: startTimezone, invisible: endTimezone"></span>46. <span data-for="end" class="k-invalid-msg" style="display: none;"></span>47. </div>48. 49. <div data-container-for="comments" class="k-edit-field">50. <textarea name="comments" class="k-textbox" data-bind="value:comments"></textarea>51. </div>52. </script>53. 54. <div k-all-day-event-template class='custom-all-day-event'>55. {{dataItem.title}}56. </div>57. 58. <div k-date-header-template>59. <strong>#=kendo.toString(date, 'd')#</strong>60. </div>61. </div>And I have routes configured as follows:
01.function routeConfig($routeProvider) {02. $routeProvider03. .when('/', {04. templateUrl: 'app/main/main.html',05. controller: 'CalendarCtrl',06. controllerAs: 'main'07. })08. .otherwise({09. redirectTo: '/'10. });11. }
So the main question is: how I can place editor-specific logic in another controller?
And another question: how I can place nested templates (such as k-event-template or custom editor template) in custom angular directives? Is there any examples or guidelines for this?
5 answers
532 views
It would seem after performing a search in multiselect, without selecting an item (just click out to close the search dropdown), corrupts the next value insert.
I've put together a demonstration in the DOJO:
http://dojo.telerik.com/ISEga/6
Just run the code and you'll see that the result is not what it should be. Comment out the search / close lines to see it work properly.
Petyo
Telerik team
answered
on
23 Sep 2015
12 answers
1.3K+ views
We are evaluating Kendo UI for one of our projects, but having some issues with Kendo UI Grid as described below :
I have a Kendo UI grid, which is bound to an KendoObservableArray. I am using inline edit mode. And my options are declared as below :
valueMapCtrl.lookupMappingDetails = new kendo.data.ObservableArray([]); valueMapCtrl.gridOptions = { dataSource: new kendo.data.DataSource({ type: "json", transport: { read: function (options) { options.success(valueMapCtrl.lookupMappingDetails); }, update: function (options) { console.log("Update", options); options.success(options.data); }, create: function (options) { console.log("Create", options); options.data.mappingId = mappingId; mappingId = mappingId + 1; options.success(options.data); }, destroy: function (options) { console.log("Delete", options); options.success(options.data); } }, change: function (e) { console.log("change: " + e.action); // do something with e }, error: function (e) { // handle error alert("Status: " + e.status + "; Error message: " + e.errorThrown); }, //data: valueMapCtrl.dynamicData, schema: { model: { id: "mappingId", fields: { mappingId: {editable: false, nullable: false, defaultValue: 0}, Col1: { type: "string", validation: { required: true } }, Col2: { type: "string", validation: { required: true } } } } }, pageSize: 10, batch: false }), columns: [{ field: "col1", title: "Column 1" }, { field: "col2", title: "Column 2" }, { command: /*"destroy"*/ ["edit", "destroy"], title: " ", width: "200px" }], selectable: "multiple cell", allowCopy: "true", //save: function (e) { // console.log("Save", e); //}, toolbar: ["create"], height: 300, navigatable: true, filterable: true, sortable: true, pageable: true, editable: "inline" };Add record : create fires correctly
Delete record: destroy fires correctly
Update record : nothing happens, no error, all I see in change event sync() action.
But If I declare save as well in my options, that fires correctly.
save: function (e) { console.log("Save", e); //This fires on each update } I am not sure what is wrong in above declaration; browsed through a lot of forums/questions for similar issue but could not get it working. Any help ?
Petyo
Telerik team
answered
on
23 Sep 2015
2 answers
111 views
Hi all,
I am having to do some server side work with the scheduler and am trying to figure out scheduler behavior and fields. I think I have it pretty well mapped and understand what is happening with RecurrenceRule, RecurrenceException, and RecurrenceId. The one I can't seem to figure out is the Recurrence field.
What gets stored in there and what triggers it?
Any information or input that anyone has would be great!
Thanks,
Chris
2 answers
526 views
Hi there,
I have a number of Kendo Windows on my site. In each case, when the content is first loaded from an MVC partial view, it shows a white screen until loaded. And if then reloading the content of the window, it displays the existing content (from previous load) until the window is loaded.
How can I make it display a loading animation whilst loading for each of these cases. Here is my code :-
=== WINDOW ====
@(Html.Kendo().Window()
.Name("window")
.Width(750)
.Height(480)
.Title("Sample Documents")
.Visible(false)
.Content("loading sample documents...")
.Iframe(true)
.Draggable()
.Resizable()
.Events(e => e
.Open("windowOpen")
)
)
=== JS REFRESH ===
contentURLString = '@Url.Action("GetSampleDocuments", "Site")?SampleID=' + SampleID
var win = $("#window").data("kendoWindow");
win.refresh({
url: contentURLString
}).center().open();
Thanks, Mark
8 answers
361 views
Hi am trying to do crud operation using javascript kendo grid with webapi. But one issue am facing here is that,even for update and delete also,post method only hitting. Kindly help me out. Below is my code
JS
-----
@{
ViewBag.Title = "KendoGrid";
}
<html>
<head>
<title></title>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.k-grid tbody .k-button {
width: 81px !important;
height: 25px;
font-size: small;
}
#grid .k-grid-header .k-header {
background-color: white;
font-weight: bold;
}
.k-tooltip {
background-color: orange !important;
width: 300px;
height: 60px;
}
.k-tooltip-content {
vertical-align: middle;
}
.k-tooltip-content p {
float: left;
}
.k-tooltip-content p {
font-size: 1.4em;
padding: 20px;
width: 160px;
text-align: left;
}
.k-grid-content > table > tbody > tr {
/*background-color: white;*/
background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
padding: 20px;
}
.k-grid-content > table > tbody > .k-alt {
/*background-color: lightgray !important;*/
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
}
.k-master-row {
background-color: white;
}
.k-grid tbody tr {
height: 10px !important;
}
.k-grid tbody tr td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 10px !important;
}
.k-grid .k-alt {
background-color: lightgoldenrodyellow;
}
/*selection*/
.k-grid table tr.k-state-selected {
background: #f99;
color: #fff;
}
.highlightedRow {
background-color: yellow !important;
}
.k-grid {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
/* Hide the Grid header and pager during export */
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager-wrap,
.k-pdf-export a.k-button.k-button-icontext,
.k-pdf-export .k-filter-row,
.k-pdf-export .k-grouping-header,
.k-pdf-export .k-grid tr td:last-child {
display: none !important;
}
</style>
<link href="~/Content/KendoStyles/kendo.common-material.min.css" rel="stylesheet" />
<link href="~/Content/KendoStyles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/KendoStyles/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/Jszip.js"></script>
<script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="windowTemplate">
Delete this client
<strong>#= MasterName #</strong>?
<br />
<br />
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
<script>
kendo.pdf.defineFont({
"DejaVu Sans": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
</script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/pako_deflate.min.js"></script>
</head>
<body>
<div id="window"></div>
<div id="example">
<button id="show_col" class="k-button">Show Master Name</button>
<button id="hide_col" class="k-button">Hide Master Name</button>
<div id="grid"></div>
@*<div id="sample"></div>
<br /> <br />
<div id="child"></div>*@
<script>
var hide = false;
var ClientMaster = [
{ "ClientID": 1, "ClientName": "Verizon Consumer", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "ClientID": 2, "ClientName": "Fiserv Securities Inc - 8137", "AppDesc": "*** ALL ***", "WC3ClientKey": "22-33" },
{ "ClientID": 3, "ClientName": "Kaiser Permanente - Colorado (8079)", "AppDesc": "Statements-Statements", "WC3ClientKey": "29-58" },
{ "ClientID": 4, "ClientName": "Kaiser Permanente - Georgia (1381)", "AppDesc": "*** ALL ***", "WC3ClientKey": "29-56" },
{ "ClientID": 5, "ClientName": "United Concordia - 8025", "AppDesc": "CARDS-Cards", "WC3ClientKey": "35-77" },
{ "ClientID": 6, "ClientName": "AAA Colorado - 1439", "AppDesc": "Cards-AAA Colorado Cards", "WC3ClientKey": "39-69" },
{ "ClientID": 7, "ClientName": "Empire BCBS National Accounts - 04270", "AppDesc": "Digital-DC5 Digital Cards", "WC3ClientKey": "52-92" },
{ "ClientID": 8, "ClientName": "CapitalOne - 4345", "AppDesc": "DC5E - T-Empire DC5E Test", "WC3ClientKey": "53-94" },
{ "ClientID": 9, "ClientName": "BOA - 4270", "AppDesc": "No ClientApplication", "WC3ClientKey": "62-73" },
{ "ClientID": 10, "ClientName": "Amazon - 2250", "AppDesc": "Card Only", "WC3ClientKey": "54-98" },
{ "ClientID": 111, "ClientName": "USAA", "AppDesc": "Electronic cards", "WC3ClientKey": "49-25" },
{ "ClientID": 112, "ClientName": "POC Demo", "AppDesc": "Demo cards", "WC3ClientKey": "87-96" },
{ "ClientID": 113, "ClientName": "Reliant Invoices", "AppDesc": "Emails", "WC3ClientKey": "14-82" },
{ "ClientID": 114, "ClientName": "Fiserv Atlanta - 20000", "AppDesc": "Emails", "WC3ClientKey": "54-21" },
{ "ClientID": 115, "ClientName": "Berkshire - 04730", "AppDesc": "Emails", "WC3ClientKey": "67-11" }
];
var ClientDetails1 = [
{ "MasterClientID": 1, "ClientID": 11, "ClientName": "Tier 1 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 12, "ClientName": "Tier 1 Verizon Consumer - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 13, "ClientName": "Tier 1 Verizon Consumer - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 14, "ClientName": "Tier 1 Verizon Consumer - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 15, "ClientName": "Tier 1 Verizon Consumer - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 16, "ClientName": "Tier 1 Verizon Consumer - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 17, "ClientName": "Tier 1 Verizon Consumer - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 18, "ClientName": "Tier 1 Verizon Consumer - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 19, "ClientName": "Tier 1 Verizon Consumer - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 20, "ClientName": "Tier 1 Verizon Consumer - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 2, "ClientID": 21, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 22, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 23, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 24, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 25, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 26, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 27, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 28, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 29, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 30, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 5, "ClientID": 31, "ClientName": "Tier 1 United Concordia - 8025 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 32, "ClientName": "Tier 1 United Concordia - 8025 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 33, "ClientName": "Tier 1 United Concordia - 8025 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 34, "ClientName": "Tier 1 United Concordia - 8025 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 35, "ClientName": "Tier 1 United Concordia - 8025 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 36, "ClientName": "Tier 1 United Concordia - 8025 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 37, "ClientName": "Tier 1 United Concordia - 8025 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 38, "ClientName": "Tier 1 United Concordia - 8025 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 39, "ClientName": "Tier 1 United Concordia - 8025 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 40, "ClientName": "Tier 1 United Concordia - 8025 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" }
];
var clientDetails2 = [
{ "MasterClientID": 11, "ClientID": 211, "ClientName": "Tier 2 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 212, "ClientName": "Tier 2 Verizon Consumer - Virginia - Fairfax", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 213, "ClientName": "Tier 2 Verizon Consumer - Virginia - Chantilly", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 214, "ClientName": "Tier 2 Verizon Consumer - Virginia - Beach", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 215, "ClientName": "Tier 2 Verizon Consumer - Virginia - Loudon", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 216, "ClientName": "Tier 2 Verizon Consumer - Virginia - Centreville", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 217, "ClientName": "Tier 2 Verizon Consumer - Virginia - Potomac", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 218, "ClientName": "Tier 2 Verizon Consumer - Virginia - Leesburg", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 219, "ClientName": "Tier 2 Verizon Consumer - Virginia - Reston", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 220, "ClientName": "Tier 2 Verizon Consumer - Virginia - winfield", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" }
]
var clientMasterID = ClientMaster.length + 1;
var selected = [];
var uids = [];
var gridElement;
function getIndexById(id) {
var idx,
l = ClientMaster.length;
for (var j; j < l; j++) {
if (ClientMaster[j].ClientID == id) {
return j;
}
}
return null;
}
//var testJson = [{ "MasterClientID": 0, "MasterName": "TestFOS", "MasterControlID": null, "Description": null, "StatusInd": null, "ActiveInd": false, "LastUpdateOn": "2015-08-25T10:35:40.74", "LastUpdateBy": "TESTCOG1", "BusinessVertical": null }];
var windowTemplate = kendo.template($("#windowTemplate").html());
$(document).ready(function () {
var crudServiceBaseUrl = "";
var tblMasterClient = [];
var tblMasterClientsDataSource = new kendo.data.DataSource({
//batch: false,
//transport: {
//read: {
// url: "/Home/MsgDetails_Read",
// contentType: "application/json; charset=utf-8",
// type: "GET"
//},
//read: function (e) {
// e.success(ClientMaster);
//},
//create: {
// //e.data.ClientID = clientMasterID++;
// //ClientMaster.push(e.data);
// //e.success(e.data);
// url: "/api/tblMasterClients",
// contentType: "application/json",
// type: "POST"
//},
// read:
// {
// url: "/api/tblMasterClients",
// },
// update: {
// ClientMaster[getIndexById(e.data.ClientID)] = e.data;
// e.success();
// url: "/api/tblMasterClients",
// type: "PUT"
// },
// destroy: function (e) {
// destroy: {
// ClientMaster.splice(getIndexById(e.data.ClientID), 1);
// e.success();
// url: "/api/tblMasterClients",
// type: "DELETE"
// },
// update: {
// url: function (tblMasterClient) {
// return "api/tblMasterClients/" + tblMasterClient.MasterClientID;
// },
// contentType: "application/json",
// type: "PUT"
// },
// destroy: {
// url: function (tblMasterClient) {
// return "api/products/" + tblMasterClient.MasterClientID;
// },
// contentType: "application/json",
// type: "DELETE"
// },
// parameterMap: function (options, operation) {
// if (operation !== "read" && options.models) {
// return { models: kendo.stringify(options.models) };
// }
// },
// error: function (e) {
// alert("Status: " + e.status + "; Error message: " + e.errorThrown);
// },
// serverFiltering: true,
//},
//resizable: true,
//toolbar: ["pdf", "create"],
//pageSize: 10,
//schema: {
// //data: "d",
// //total: function (response) { // For grid item count botttom right of grid
// // return $(response.d).length;
// //},
// model: {
// fields: {
// MasterClientID: { editable: true, nullable: true, type: "number" },
// MasterName: { validation: { required: true } }
// }
// }
//},
//serverPaging: true
transport: {
read: {
url: "/api/tblMasterClients",
type: "GET"
},
create:
{
url:"/api/tblMasterClients",
//data: JSON.stringify(testJson),
//data: JSON.stringify({ 'tblMasterClient': $("#grid").data("kendoGrid").dataSource.view() }),
//contentType: "application/json",
dataType: "json",
type: "POST"
},
update: {
url: "/api/tblMasterClients",
type: "Put",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
destroy: {
url: "/api/tblMasterClients",
type: "Delete",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
//parameterMap: function (options, operation) {
// debugger;
// //if (operation !== "read" && options.models) {
// //if (operation !== "read") {
// // // return { models: kendo.stringify(options.models) };
// // return JSON.stringify(options);
// //}
// if (operation === "update") {
// return { masterClientID: options.MasterClientID }
// }
// if (operation === "create") {
// return JSON.stringify({ MasterName: options.MasterName });
// }
// if (operation === "destroy") {
// return { masterClientID: options.MasterClientID }
// }
//},
parameterMap: function (options, operation) {
//if (operation !== "read" && options.models) {
// return { models: JSON.stringify(options.models) };
//}
if (operation !== "read") {
//tblMasterClient.push({ 'tblMasterClient': JSON.stringify(options) })
return options;
}
}
},
editable: { //disables the deletion functionality
update: true,
destroy: true
},
batch:false,
serverPaging: true,
schema: {
//data: "data", // records are returned in the "data" field of the response
//total: "total" // total number of records is in the "total" field of the response
id: "MasterClientID",
model: {
fields: {
MasterClientID: { editable: false, nullable: true, type: "number" },
MasterName: { validation: { required: true } }
}
}
},
pageSize: 20
});
var element = $("#grid").kendoGrid({
dataSource: tblMasterClientsDataSource,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
height: 430,
scrollable: {
virtual: true
},
sortable: true,
resizable: true,
//pageable: {
// pageSize: 10,
// refresh: true,
// pageSizes: true,
// buttonCount: 5
//},
editable: "popup",
groupable: true,
selectable: "multiple",
reorderable: true,
dataBinding: function (e) {
//store the uids of selected rows
$("#grid .k-state-selected").each(function () {
uids.push($(this).data("uid"));
});
},
dataBound: function (e) {
if (uids.length != 0) {
for (var i = 0; i < uids.length; i++) {
var curr_uid = uids[i];
//find and reselect the rows via their uid attribute
this.tbody.find("tr[data-uid='" + curr_uid + "']").addClass("k-state-selected");
}
}
},
//detailInit: detailInit,
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
endswith: "Ends with"
}
}
},
toolbar: ["pdf", "excel", "create"],
pdf: {
allPages: true,
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
columns: [
//{
// field: "MsgNum",
// title: "Message Number",
// width: "200px",
// filterable: {
// ui: cardNameFilter
// }
//},
//{
// field: "MsgDesc",
// title: "Message Description",
// width: "200px",
// filterable: {
// ui: industryTypeFilter
// }
//},
{
field: "MasterClientID",
title: "Master Client ID",
width: "200px",
type:"number"
},
{
field: "MasterName",
title: "Master Name",
width: "200px"
},
{
command: [
{ name: "edit" },
{
name: "Delete",
click: function (e) { //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var dataItem = this.dataItem(tr); //get the row data so it can be referred later
kendoWindow.content(windowTemplate(dataItem)); //send the row data object to the template and render it
kendoWindow.open().center();
$("#yesButton").click(function () {
$("#grid").data('kendoGrid').dataSource.remove(dataItem);
$("#grid").data('kendoGrid').dataSource.sync();
kendoWindow.close();
})
$("#noButton").click(function () {
kendoWindow.close();
})
}
}
]
},
]
}).data("kendoGrid");
var tooltip = $("#grid").kendoTooltip({
filter: "tr", //this filter selects the first column cells
position: "bottom",
content: function (e) {
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem;
//var target = e.target; // element for which the tooltip is shown
//return $(target).text();
var masterClientID = dataItem.MasterClientID;
var masterClientName = dataItem.MasterName;
//var appDesc = dataItem.AppDesc;
//var wc3ClientKey = dataItem.WC3ClientKey;
//alert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <span style="text-decoration: underline;">underline</span>!');
var dataContent = ('Master Client ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName);
//var dataContent = ('Master Client ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName + '<br>' + 'App Description: ' + appDesc + '<br>' + 'Wc3ClientKey: ' + wc3ClientKey);
return dataContent;
//return content
}
}).data("kendoTooltip");
//$(element.tbody).on("click", "tr", function (e) {
// $(this).addClass("highlightedRow");
//});
$("#show_col").on("click", function () {
element.showColumn(1);
});
$("#hide_col").on("click", function () {
element.hideColumn(1);
});
$("#txtSearchString").keydown(function (event) {
onSearch();
})
});
function SaveClientDetails() {
var postUrl;
var paramValue;
var gridData = $("#grid").data("kendoGrid").dataSource.data();
alert(gridData);
postUrl = '@Url.Content("/api/tblMasterClients/")';
paramValue = JSON.stringify({ 'tblMasterClients': gridData });
$.ajax({
url: postUrl,
type: 'POST',
dataType: 'json',
data: paramValue,
contentType: 'application/json; charset=utf-8',
success: function (result) {
console.log(result);
},
error: function (objAjaxRequest, strError) {
var respText = objAjaxRequest.responseText;
console.log(respText);
}
});
}
var kendoWindow = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
width: "360px",
height: "100px"
}).data("kendoWindow");
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: ClientDetails1
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
,
scrollable: false,
sortable: true,
resizable: true,
detailInit: detailInit1,
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
endswith: "Ends with"
}
}
},
pageable: {
pageSize: 10,
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ClientID", title: "Client ID", width: "80px", type: "number" },
{ field: "ClientName", title: "Client Name", width: "150px" },
{ field: "AppDesc", title: "App Description", width: "150px" },
{ field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },
],
editable: "popup"
});
}
function detailInit1(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: clientDetails2
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
,
scrollable: false,
sortable: true,
resizable: true,
pageable: {
pageSize: 10,
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
endswith: "Ends with"
}
}
},
columns: [
{ field: "ClientID", title: "Client ID", width: "80px", type: "number" },
{ field: "ClientName", title: "Client Name", width: "150px" },
{ field: "AppDesc", title: "App Description", width: "150px" },
{ field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },
],
editable: "popup"
});
}
</script>
</div>
</body>
</html>
webapi
-----------------
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using System.Web.Mvc;
namespace KendoGridPOC
{
public class tblMasterClientsController : ApiController
{
private WC3OnlineEntities db = new WC3OnlineEntities();
// GET: api/tblMasterClients
public IQueryable<tblMasterClient> GettblMasterClients()
{
return db.tblMasterClients;
}
// GET: api/tblMasterClients/5
[ResponseType(typeof(tblMasterClient))]
public IHttpActionResult GettblMasterClient(int id)
{
tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
if (tblMasterClient == null)
{
return NotFound();
}
return Ok(tblMasterClient);
}
// PUT: api/tblMasterClients/5
[ResponseType(typeof(void))]
[System.Web.Mvc.AcceptVerbs(HttpVerbs.Put)]
public IHttpActionResult PuttblMasterClient(int id, tblMasterClient tblMasterClient)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != tblMasterClient.MasterClientID)
{
return BadRequest();
}
db.Entry(tblMasterClient).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!tblMasterClientExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}
// POST: api/tblMasterClients
[ResponseType(typeof(tblMasterClient))]
public IHttpActionResult PosttblMasterClient(tblMasterClient tblMasterClient)
{
//tblMasterClient tblMasterClient
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.tblMasterClients.Add(tblMasterClient);
db.SaveChanges();
//return null;
return CreatedAtRoute("DefaultApi", new { id = tblMasterClient.MasterClientID }, tblMasterClient);
}
// DELETE: api/tblMasterClients/5
[ResponseType(typeof(tblMasterClient))]
public IHttpActionResult DeletetblMasterClient(int id)
{
tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
if (tblMasterClient == null)
{
return NotFound();
}
db.tblMasterClients.Remove(tblMasterClient);
db.SaveChanges();
return Ok(tblMasterClient);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool tblMasterClientExists(int id)
{
return db.tblMasterClients.Count(e => e.MasterClientID == id) > 0;
}
}
}
Kiril Nikolov
Telerik team
answered
on
22 Sep 2015
5 answers
471 views
When the user toggles a checkbox on my screen, I am finding certain event DIV elements, then toggling them with .hide() and .show(). The jQuery .hide will set the CSS display to 'none', which is all good, but because the event elements all use absolute positioning (top/left), the hidden events still appear to take up space to the user. I can't find anything built in that would help to readjust the visible appointments in the scheduler. I'd hate to have to try to write code to reposition events in any cell that was affected, but I may not have a choice. Anyone have any other ideas for this? It would be nice if the SchedulerEvent object actually had a Visible property, and when set, the scheduler's view would readjust things accordingly. I can't be the first to ask for this one...
Plamen
Telerik team
answered
on
22 Sep 2015
1 answer
305 views
It looks like the month view of the scheduler always shows 6 weeks, regardless of whether the current month contains them. This means there are some months where the scheduler displays one or two weeks at the bottom that are entirely within the next month. Is there a way to only show weeks in the current month so that there is more screen area for the current month's events?
Vladimir Iliev
Telerik team
answered
on
22 Sep 2015
1 answer
258 views
Hi,
I am using treelist under the following scenario:
1) i have a local dataset
2) While displaying I use column templating
3) while editing, I create multiple kendo numeric textboxes and appendTo container (code to follow)
4) I am using Angular
My problem is that the update method never gets called after i submit and edit to my numeric text box within the treelist cell. I.e after hitting Edit --> Update button, the code in update function (Transport: Update called) never gets invoked...What am I doing wrong?
Also, whats the best way here to update the data and put it back into the grid as well as my datasource?
Note to Admins: Since I am using angular, from below code: please give me an angular compatible answer if possible...
Thanks a lot,
Labhesh
------------------------
Here's the code:
<div ng-controller="testcontroller as vm"> <div kendo-treelist="vm.treelist" k-options="vm.tlOptions"></div></div>
vm.tlOptions = { dataSource: { transport:{ read: function(e) { console.log("TRANSPORT: READ Called"); e.success(vm.dataToShow); }, update: function(e){ console.log("TRANSPORT: UPDATE Called"); var updatedItems = e.data; console.log(updatedItems); e.success(); } }, schema:{ model: { "id": "sId", "parentId":"sLink", "fields": schemaFlds } } }, editable:true, resizable:true, columns: cc};
NumericEditor attached to each editable column:
var numericEditor = function (container, options) { $('<input id="abc" style=color:red value='+options.model[options.field].vols.mdl + '"/>') .appendTo(container) .kendoNumericTextBox({ decimals: 2, format: "n2" }); $('<input id="abc" style=color:blue value='+options.model[options.field].vols.usr + '"/>') .appendTo(container) .kendoNumericTextBox({ decimals: 2, format: "n2" }); $('<label style=color:green>'+options.model[options.field].vols.actual+'</label>') .appendTo(container);};
Labhesh
Top achievements
Rank 1
Rank 1
answered
on
22 Sep 2015
1 answer
72 views
When Interval is set to 1, the last time entry in the list is repeated in all browsers. See attached screen shot.
This does not happen with any other interval, not even when set to 2. Is there a work around this?
Kiril Nikolov
Telerik team
answered
on
22 Sep 2015
