or
1 answer
658 views
Hi,
I am trying to include a dropdownlist in some cells, and a special template for the fields, but that made my ADD-New-Record to stop working in all situations (inline - incell - popup) I tried them all but the button looks like it is not firing when I click it.
So I start searching the whole web to find the problem but could'nt.
endly I figured out that when I keep only one template in my grid then the create button is working fine, but when I have more than one it stops.
Another problem I am facing is, the delete and edit functions work perfectly, but when I try to post to the db it looks fine and I can see in dev-tools a response 200/green, but nothing is saved to the db, and after a lot of tries I just found that when I am choosing any from the drop down on the new record it takes the result as an object, but if I edit a not empty cell from the dropdown list it takes it as a number as supposed.
So may can somebody help me to figure it out?
Here is my script.js:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: "fun.php?action=api" },
create: { url: "insert.php?action=insert_channel", type: "POST",
complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } },
update: { url: "update.php?action=upd", type: "POST",
complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } },
destroy: { url: "destroy.php?action=del_channel",type: "POST",
complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } }
},
schema: {
data:"data",
model: {
id:"id",
fields: {
nr: { type:"string", editable:false },
name: { type:"string" , validation : { required : true }},
pic: { type:"string", editable:false, validation : { required : true } },
link: { type:"string", validation : { required : true } },
group: { type:"int", validation : { required : true } },
lang: { type:"int", validation : { required : true } },
status: { type:"int", validation : { required : true } },
up: { type:"string" }
}
}
},
pageSize: 10
},
height:750,
scrollable: true,
sortable: true,
pageable: true,
groupable: {
messages: {
empty: "Drag any column name here to group your channels"
}
},
editable: {
mode: "popup",
update: true,
destroy: true,
confirmation: "Are you sure you want to remove this Channel?" //text for the confirmation message
},
columns: [
{
template: "<center><div class='#: data.class #'>#: nr #</div></center>",
field: "nr",
title: "Nr",
width: 50
},
{
template: "<img width='64' height='64' style='vertical-align:middle; border-radius: 15%;' src='pics/#: data.pic #' alt=''> <span class='#: data.class #'>#: data.pic # </span>",
field: "pic",
title: "pic"
},
{
template: "<div class='#: data.class #'>#: name #</div>",
field: "name",
title: "name",
width: 100
},
{
template: "<div class='#: data.class #'>#: link #",
field: "link",
title:"link",
width:650
},
{
template: "<div class='#: data.class #'>#: group #</div>",
field: "group",
title:"group",
editor:groupEditor
},
{
template: "<div class='#: data.class #'>#: lang #</div>",
field: "lang",
title: "lang",
editor:langEditor
},
{
template: "<div class='#: data.class #'>#: status #</div>",
field: "status",
title: "status",
editor:statusEditor
//template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
},
// adding command in the columns, name - the command name, text - text to be set on the button
{ command: [
{
name: "edit",
text: { // sets the text of the "Edit", "Update" and "Cancel" buttons
edit: "",
update: "Update",
cancel: "Cancel"
}
},
{ name: "destroy", text: "" } // sets the text of the "Delete" button
],
// sets the title and the width of the commands column
title: "Action",
width: "300px"
}
],
toolbar: [
//name - name of the available commands, text - text to be set on the button
{ name: "create", text: "New" },
{ name: "save", text: "Save" },
{ name: "cancel", text: "Cancel" },
{ name: "excel", text: "Export to Excel" }
],
// filter menu settings
filterable: {
name: "FilterMenu",
extra: true, // turns on/off the second filter option
messages: {
info: "Custom header text:", // sets the text on top of the filter menu
filter: "CustomFilter", // sets the text for the "Filter" button
clear: "CustomClear", // sets the text for the "Clear" button
// when filtering boolean numbers
isTrue: "custom is true", // sets the text for "isTrue" radio button
isFalse: "custom is false", // sets the text for "isFalse" radio button
//changes the text of the "And" and "Or" of the filter menu
and: "CustomAnd",
or: "CustomOr"
},
operators: {
//filter menu for "string" type columns
string: {
eq: "Custom Equal to",
neq: "Custom Not equal to",
startswith: "Custom Starts with",
contains: "Custom Contains",
endswith: "Custom Ends with"
},
//filter menu for "number" type columns
number: {
eq: "Custom Equal to",
neq: "Custom Not equal to",
gte: "Custom Is greater than or equal to",
gt: "Custom Is greater than",
lte: "Custom Is less than or equal to",
lt: "Custom Is less than"
},
//filter menu for "date" type columns
date: {
eq: "Custom Equal to",
neq: "Custom Not equal to",
gte: "Custom Is after or equal to",
gt: "Custom Is after",
lte: "Custom Is before or equal to",
lt: "Custom Is before"
}
}
}
});
/* ***********************group**************************** */
function groupEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: "Group...",
dataTextField: "group",
dataValueField: "id",
dataSource: {
transport: {
read: { url: "fun.php?action=cat_channels" }
},
schema: {
data: "data",
model: { id: "id",
fields: {group: {editable: false } }
}
},
},
});
}
/* ***********************language**************************** */
function langEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: "Language...",
dataTextField: "lang",
dataValueField: "id",
dataSource: {
transport: {
read: { url: "fun.php?action=lang_channels" }
},
schema: {
data: "data",
model: { id: "id",
fields: {lang: {editable: false } }
}
},
},
});
}
/* ***********************status**************************** */
function statusEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: "Status...",
dataTextField: "state",
dataValueField: "id",
dataSource: {
transport: {
read: { url: "fun.php?action=state_channels" }
},
schema: {
data: "data",
model: { id: "id",
fields: {state: {editable: false } }
}
},
},
});
}
});Here is insert.php
<?php
include 'config.php';
/* **************************************insert channels*************************** */
function insert_channel() {
global $conn;
if(isset($_POST['submit']))
{
$name =htmlspecialchars($_POST['name'] ?? '');
$pic =htmlspecialchars($_POST['pic'] ?? '');
$link =htmlspecialchars($_POST['link'] ?? '');
$group =htmlspecialchars($_POST['group'] ?? '');
$lang =htmlspecialchars($_POST['lang'] ?? '');
$status =htmlspecialchars($_POST['status'] ?? '');
$sql="INSERT INTO channels (
name,
pic,
link,
cat_id,
language_id,
status
)
VALUES
(
'$name',
'$pic',
'$link',
'$group',
'$lang',
'$status'
)";
$query=mysqli_query($conn, $sql);
if ($sql) {
echo json_encode($sql);
}
else {
header("HTTP/1.1 500 Internal Server Error");
}
}
}
/* -------------------------------switch($_GET['action'])| page.php?action=x ------------------------------------------- */
switch($_GET['action'])
{
case 'insert_channel': insert_channel();
break;
default :
echo 'Please check the parameters';
}
Neli
Telerik team
answered
on
07 Oct 2021
1 answer
429 views
Hi,
Forgive me if this has been answered before, but I haven't been able to find it.
What would be the reasons to chose LESS over SASS or vice-versa when developing with Kendo UI for jQuery?
I am rather new at this, so the only obvious reason to chose LESS that I have found is that it has more existing themes (currently 16) than SASS (4). This should make it easier to find a LESS theme that matches your requirements and modify for final touches.
What other differences might there be? (In terms of using it with Kendo UI for jQuery, I am not talking about a comparison LESS vs SASS in general)
Thanks,
Fredrik
Dimitar
Telerik team
answered
on
07 Oct 2021
1 answer
712 views
We have defined a new data source which executes a $.ajax to retrieve some data from a remote server.
return new kendo.data.DataSource({
pageSize: 10,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
type: "json",
sort: {
field: "name",
dir: "asc"
},
transport: {
read: function (options) {}....Now lets consider the following scenario:
The read function is triggered and the call is made to the server but the server is being slow. In the meantime a new read request needs to be made and we want to abort the current read request and issue a new one.
Using vanilla Jquery we just do something like
myAjaxRequest.abort()
However, I can not seem to find a similar method to abort a read request (or any request) in the Kendo Data Source Object.
Are you able to offer a solution?
Dimitar
Telerik team
answered
on
06 Oct 2021
1 answer
439 views
Hello:
I'm newer for Kendo UI for jquery. I want to use drawer widget to get remoting data.
But I found that after getting the remoting data and show on drawer content.
The drawer show/hide function will be not work (Below toggleDrawer() function is work if not performing get data).Can somebody help me?
Below is my code.
<div id="toolbar"></div>
<div id="drawer">
<div id="drawerContainer" style="margin-left: 5px;">
</div>
</div>
<script type="text/x-kendo-template" id="drawerTemplate">
<ul>
<li data-role='drawer-item' class='k-state-selected'>
<span class='k-icon k-i-inbox'></span>
<span class='k-item-text' data-id='Inbox' data-url='test2.html'>
Inbox
</span>
</li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li>
<li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text' data-id='Calendar'>Calendar</span></li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text' data-id='Attachments'>Attachments</span></li>
<li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text' data-id='Favourites'>Favourites</span></li>
</ul>
</script>
<script>
$(document).ready(function () {
var drawerInstance = $("#drawer").kendoDrawer({
mode: "push",
template: $("#drawerTemplate").html(),
autoCollapse: false,
itemClick: onItemClick,
mini: true
}).data("kendoDrawer");
drawerInstance.show();
});
function onItemClick(e) {
var drawerName = e.item.find(".k-item-text").attr("data-id");
//alert(drawerName);
var nextUrl = '/api/test/inbox'
if (drawerName == 'Inbox') {
nextUrl = 'grid1.html'
}
$.ajax({
url: nextUrl,
method: 'GET',
success: function (result) {
$('#drawerContainer').html(result);
}
});
}
function toggleDrawer() {
var drawerInstance = $("#drawer").data().kendoDrawer;
var drawerContainer = drawerInstance.drawerContainer;
if (drawerContainer.hasClass("k-drawer-expanded")) {
drawerInstance.hide();
} else {
drawerInstance.show();
}
}
$("#toolbar").kendoToolBar({
items: [
{ type: "button", icon: "menu", attributes: { "class": "k-flat" }, click: toggleDrawer },
{
template: "<h3 style='margin-left: 25px;'>RA Web</h3>" },
{ type: "spacer" },
{ type: "button", icon: "information", attributes: { "class": "k-flat" } },
{ type: "button", icon: "gear", attributes: { "class": "k-flat" } }
]
});
</script>
Thanks.
1 answer
117 views
I need to use two MultiSelect widgets side by side and only one will render. The second <select> element just gets completely omitted from the DOM. There are no javascript errors and both widgets are getting initialized. The second one just doesn't show up. I was unable to replicate the issue with a simple working example but I have included my HTML, the HTML that gets rendered, and my javascript for initializing the widgets. Thanks in advance for any help.
My HTML:
<div id="scheduleToolContainer" class="wrapper">
<div class="notificationPrompt"></div>
<div id="scheduleToolContent">
<button id="btnPrevDate" type="button" class="btn btn-light border"><i class="fas fa-arrow-left"></i></button>
<input id="scheduleDatePicker" title="datepicker" />
<button id="btnNextDate" type="button" class="btn btn-light border"><i class="fas fa-arrow-right"></i></button>
<select id="ddAttendingProvider" style="width:250px" data-target-url="@Url.Action("GetAttendingProviders", "ScheduleTool", new { area = "PatientLists" })" />
<select id="ddInsurance" style="width:250px" data-target-url="@Url.Action("GetInsuranceList", "ScheduleTool", new { area = "PatientLists" })" />
<button id="btnViewSchedule" class="btn btn-primary">Apply</button>
<div id="scheduleGrid" class="mt-2 rounded" data-schedule-url="@Url.Action("GetScheduleItems", "ScheduleTool", new { area = "PatientLists" })"></div>
</div>
<button id="btnPrintEncounters" class="btn btn-light border mt-2" data-target-url="@Url.Action("PrintSelectedEncounters", "ScheduleTool", new { area = "PatientLists" })"><i class="fas fa-file-medical-alt fa-2x"></i></button>
<div id="gridLoadingSpinner" class="text-center text-secondary"><i class="fas fa-spinner fa-spin fa-3x"></i></div>
</div>HTML in the DOM:
Javascript (get's called when the page loads):
function loadFilters() {
$("#ddAttendingProvider").kendoMultiSelect({
placeholder: 'All',
dataSource: {
transport: {
read: {
url: attProvidersUrl,
type: "POST",
data: function () {
return {
filter: Filters.toRequestFilter(),
date: $('#scheduleDatePicker').val()
}
}
}
}
}
});
$("#ddInsurance").kendoMultiSelect({
placeholder: 'All',
dataSource: {
transport: {
read: {
type: "POST",
url: insuranceListUrl,
data: function () {
return {
filter: Filters.toRequestFilter(),
date: $('#scheduleDatePicker').val()
}
}
}
}
}
});
}
Martin
Telerik team
answered
on
06 Oct 2021
0 answers
99 views
Support,
I am pulling my hair out here.
I have created a Chart, all the options are correct (i have done a notepad++ compare to a exmple in this Dojo - https://dojo.telerik.com/UdezARot)
Yet for some reason, it shows the wrong values in the output. The total amount (Count) is correct, but the years are wrong and I cannot even figure out how its getting the values
For 2021 it shows 17, the total of 2020 and 2021 for example is 19....
I have attached some screen shots, as well as a DevTools rightclick copy Object from the kendoChart.options
I cannot for the life of me, figure out what I have done wrong.
ANY HELP would be greatly appreciated.
Thanks in advance.
Mark Kornhauser
Top achievements
Rank 1
Iron
Rank 1
Iron
asked
on
05 Oct 2021
0 answers
250 views
How do you display text in a grid cell that has embedded HTML so that formatting is applied to the text. Here is an example of some text:
<b>GREASE PUMP REGULATOR</b> Hand - Slowly adjust the inlet air pressure regulator to 15psi by turning the knob CW. <font color="red"><u><b>Do not exceed 15psi</b></u></font> The max rate for purging the grease is 1/2 ounce/second
1 answer
393 views
Hi, I need to enable / disable command column basing on the dataOrderFilter value. if filter value is NOTTRANSFER, then the command column in the grid should be enabled. if the filter value is INTRANSIT or TRANSFER, then the command column should be disabled. how to achieve this?
var dataOrderFilter = [{ value: "", text: "All Orders" }, { value: "MYORDER", text: "My Orders" }, { value: "NOTTRANSFER", text: "Orders not Transferred", defaultValue: true }, { value: "INTRANSIT", text: "Orders in Transit" }, { value: "TRANSFER", text: "Orders Transferred"}];
var dataOrderSource = [{ value: 0, text: "All Orders" }, { value: 1, text: "Warehouse Orders" }, { value: 2, text: "Online Orders", defaultValue: true}];
var dataSearchType = [{ value: "", text: "Select Search" }, { value: "ORDERNUMBER", text: "Order Number" }, { value: "ORDERDATE", text: "Order Date" }, { value: "CUSTOMERNAME", text: "Customer Name" }, { value: "CUSTOMERID", text: "Customer ID"}];
$(document).ready(function () {
initPage();
initKendo();
initGrid();
});
function initPage() {
var data = callWebService("GetCountryByUser", { userId: userId }, false);
var options = $("#ddCountry");
$.each(data, function (i, v) {
options.append($("<option />").val(v.value).text(v.text));
});
options = $("#ddOrderFilter");
$.each(dataOrderFilter, function (i, v) {
options.append($("<option />").val(v.value).text(v.text));
if (v.defaultValue)
options.val(v.value);
});
options = $("#ddOrderSource");
$.each(dataOrderSource, function (i, v) {
options.append($("<option />").val(v.value).text(v.text));
if (v.defaultValue)
options.val(v.value);
});
// search
var options = $("#ddSearchType");
$.each(dataSearchType, function (i, v) {
options.append($("<option />").val(v.value).text(v.text));
});
}
function initKendo() {
$("#txtOrderDate").kendoDatePicker({
format: "MM/dd/yyyy",
max: convertStringToDate(""),
change: txtOrderDate_onChange
});
}
function initGridData() {
$("#grid").data("kendoGrid").dataSource.read();
}
function initGrid() {
var pageSize = 200;
var dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(grid_Read(e));
},
destroy: function (e) {
e.success(grid_Integrate(e));
},
Integrate: function (e) {
e.success(grid_Integrate(e));
}
},
error: function (e) { recordTheError(e); },
batch: false,
pageSize: pageSize,
serverPaging: true,
serverSorting: true,
sort: { field: "orderDate", dir: "desc" },
schema: {
data: function (data) {
if (data.list == undefined)
return data;
else
return data.list;
},
total: function (data) {
return data.total;
},
model: {
id: "guid",
fields: {
guid: { type: "string" },
orderNum: { type: "string" },
orderDate: { type: "string" },
custName: { type: "string" },
custNum: { type: "string" },
orderStatus: { type: "string" },
ppStatus: { type: "string" },
Transfer: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: {
pageSize: pageSize, pageSizes: [25, 50, 200]
},
columns: [
{ field: "orderNum", title: "Order Number", width: "160px" },
{ field: "orderDate", title: "Order Date", width: "110px" },
{ field: "custName", title: "Customer Name" },
{ field: "custNum", title: "Customer ID", width: "120px" },
{ field: "orderStatus", title: "Order Status", width: "160px", sortable: false },
{ field: "ppStatus", title: "PickPro Status", width: "130px", sortable: false },
{ title: "Transferred<br>to AX", width: "110px", sortable: false,
template: "<input type='checkbox' #=Transfer?'checked':'' # disabled />"
},
{ command: [{ name: "Integrate", click: grid_Integrate}], title: 'Actions' }
],
editable: "inline",
sortable: true
});
}
function grid_Read(e) {
var orderFilter = $("#ddOrderFilter").val();
var orderSource = $("#ddOrderSource").val();
var countryId = $("#ddCountry").val();
//search
var searchValue = "";
var searchType = $("#ddSearchType").val();
switch (searchType) {
case "ORDERDATE":
searchValue = convertDateToString($("#txtOrderDate").data("kendoDatePicker").value());
break;
case "ORDERNUMBER":
searchValue = $("#txtOrderNum").val();
break;
case "CUSTOMERNAME":
searchValue = $("#txtCustomerName").val();
break;
case "CUSTOMERID":
searchValue = $("#txtCustomerId").val();
break;
}
//sorting
var sortField = "";
var sortDir = "";
if (e.data.sort != undefined)
$.each(e.data.sort, function (i, v) {
sortField = v.field;
sortDir = v.dir;
});
var params = { userId: userId, countryId: countryId, orderFilter: orderFilter, orderSource: orderSource,
sortField: sortField, sortDir: sortDir, searchType: searchType, searchValue: searchValue, page: e.data.page, pageSize: e.data.pageSize
};
return callWebService("GetD365OrderSummaryList", params, false);
}
function grid_Delete(e) {
var params = { orderGuid: e.data.guid, archType: "D365", userId: userId };
callWebService("submitOrderToD365", params, false);
}
function grid_Integrate(e) {
if (confirm('Are you sure you want to Integrate Order')) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var params = { orderNumber: dataItem.orderNum, userId: userId };
callWebService("submitOrderToD365", params, false);
}
else {
alert("Confirmed false");
}
initGridData();
}
function btnFilter_clicked() {
initGridData();
//$("#grid").data("kendoGrid").dataSource.filter({});
}
function initGridData() {
$("#grid").data("kendoGrid").dataSource.read();
}
function btnSearch_clicked() {
initGridData();
}
function ddSearchType_changed() {
$(".nested-option").hide();
//$("#btnSearch").show();
var ddSearchType = $("#ddSearchType").val();
switch (ddSearchType) {
case "":
//$("#btnSearch").hide();
btnSearch_clicked();
break;
case "ORDERNUMBER":
$("#divSearchOrderNum").show(); $("#txtOrderNum").val(""); $("#txtOrderNum").focus();
break;
case "ORDERDATE":
$("#divSearchOrderDate").show(); $("#txtOrderDate").data("kendoDatePicker").value(convertStringToDate("")); $("#txtOrderDate").focus();
break;
case "CUSTOMERNAME":
$("#divSearchCustName").show(); $("#txtCustomerName").val(""); $("#txtCustomerName").focus();
break;
case "CUSTOMERID":
$("#divSearchCustID").show(); $("#txtCustomerId").val(""); $("#txtCustomerId").focus();
break;
}
}
function txtOrderDate_onChange(e) {
var dt = e.sender;
var value = dt.value();
if (value === null) {
value = kendo.parseDate(dt.element.val(), dt.options.parseFormats);
}
if (value < dt.min()) {
dt.value(dt.min());
} else if (value > dt.max()) {
dt.value(dt.max());
}
}
Martin
Telerik team
answered
on
05 Oct 2021
2 answers
176 views
Hi,
I did update project ExampleCSVS2010 to new version of Kendo Windows ver. 2021.3.914
After update I got error for class "ExamplesForm":
The type or namespace name "ExamplesForm" could not
be found (are you missing a using directive or an assembly ....)
Thanks,
Leonid
1 answer
99 views
Hi, I just came into contact with Kendo UI. I think it is very powerful, especially the function of MVVM is very easy to use.
I have a question that I haven't understood. After setting the data of the datasource, you can operate on it, but the schema.model property can set the information of the data field. Is this unnecessary?
I never know the relationship between datasource and schema. Model. It seems that I don't set schema. Model and datasource works normally.
Can any engineer explain their specific links and functions? Thank you for your help.
Martin
Telerik team
answered
on
05 Oct 2021
