I am updating an older site running AngularJS and Kendo in Asp.Net MVC
My html Form has this control that is posted to the back end:
@using (Html.BeginForm( new { name = "frmMain", novalidate = "", id = "frmMain" }))
<
input
kendo-date-picker
ng-model
=
".BiWeeklyStartDate"
k-parse-formats
=
"['yyyy-MM-dd']"
k-format
=
"'yyyy-MM-dd'"
/></
p
>
The date that is posted to the backend is a full date. How can I change that so that the Kendo Control sends "yyyy-MM-dd" to the backend only?
Hi,
Is there any way to control the delete button which is displayed by using the {command: 'destroy',title:"Action", width:"20px",attributes: {"class": "delete-row"}
It is doing the necessary thing right, that is deleting a row, but i would like to control it such a way that if there's only one row remaining in that particular grid, it should alert or display a message saying that you will not be able to delete it.
If there are more than one rows then, its ok. But if there is only 1 row remaining, I wanted to handle this.
Can you please tell me a method for doing so?
Thank you.
This is my func userNameAutoCompleteEditor
function
userNameAutoCompleteEditor(container, options) {
$(
'<input required data-bind="value:'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoAutoComplete({
dataTextField:
"UserName"
,
dataValueField:
"UserId"
,
filter:
"contains"
,
minLength: 3,
//_readMethod: '../Warehouse/SearchUser',
dataSource:
new
kendo.data.DataSource({
transport: {
read: {
url:
'../Warehouse/SearchUser'
,
//data: {
// q: function () {
// return $("#autoComplete").data("kendoAutoComplete").value();
// },
// maxRows: 10,
// username: "demo"
//}
}
},
}),
});
}
"" " I want to Catch autosearc value go connroller and come back with user name contains value just give me way to take value PLEASE!!!!""
This is my grid column area
grid._columns.push(grid.GridColumn(
'Id'
,
null
,
'200px'
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
true
));
grid._columns.push(grid.GridColumn(
'User'
,
'User'
,
'200px'
,
null
,
"#=User.UserName#"
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
, userNameAutoCompleteEditor));
grid._columns.push(grid.GridColumn(
null
,
' '
,
'200px'
, { style:
'text-align:right'
},
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
, [
'edit'
,
'destroy'
]));
Hello.
I have a grid that contains user information and a few checkbox templates. Whenever I edit set the checkbox to true or vice versa and click save changes the checkbox reverts to its original value.
Here are the main snippets that handle this event:
$("#btnSaveChanges").click(function () {
grid = $("#grid").data("kendoGrid");
grid.saveChanges();
});
function SetActive(e) {
grid = $("#grid").data("kendoGrid");
dataItem = grid.dataItem($(e).closest("tr"));
dataItem.set("IsAssigned", e.checked);
grid.refresh();
}
function renderGrid(value) {
grid = $("#grid").kendoGrid({
dataSource: {
sort: { field: "NameFirst", dir: "asc" },
batch: true,
pageSize: 100,
error: function (e) {
if (typeof e.errors !== 'undefined') {
alert(e.errors);
}
},
requestEnd: function (e) {
if (e.type === "update") {
$('#grid').data('kendoGrid').dataSource.read();
}
},
transport: {
read: {
url: "GetContacts",
dataType: "json",
cache: false,
data: function () {
return {
ID: $("#DDLConceptID").val(),
isNational: $("#DDLConceptID").find('option:selected').attr("data-isNational")
};
}
},
update: {
url: "UpdateContacts",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type) {
if (type === "update") {
return { entities: kendo.stringify(data.models) };
}
else {
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "ContactID",
fields: {
Email: { type: "string" },
IsAssigned: { type: "boolean" },
RoleID: { type: "string" },
ConceptID: { editable: false },
ContactID: { editable: false },
RcvEmail: { type: "boolean" },
RcvQAEmail: { type: "boolean" },
RcvOrderEmail: { type: "boolean" },
Seq: { editable: true },
DistName: { editable: false },
RoleDescription: { type: "string" },
NameFirst: { type: "string" },
NameLast: { type: "string" },
Phone: { type: "string" }
}
}
}
},
sortable: true,
filterable: {
extra: false,
operators: {
string: {
contains: "Contains"
}
}
},
height: 600,
pageable: true,
scrollable: true,
editable: true,
autoBind: value,
columns: [
{ field: "ContactConceptID", title: "Contact ID", hidden: true },
{ field: "ConceptID", title: "Concept ID", hidden: true },
{ field: "ContactID", title: "Contact ID", hidden: true },
{ field: "IsNational", title: "Is National", hidden: true },
{ field: "Seq", title: "Seq", width: 100 },
{ field: "NameFirst", title: "First Name", width: 150 },
{ field: "NameLast", title: "Last Name", width: 150 },
{ field: "Phone", title: "Phone", width: 250 },
{ field: "RoleDescription", title: "Role", width: 140 },
{ field: "RoleID", title: "Type", width: 100, editor: roleIDEditor },
{ field: "Email", title: "E-mail", width: 250 },
{ title: "Assigned", template: '<
input
class
=
"btnActive"
onchange=\'SetActive(this);\'
type
=
"checkbox"
#= IsAssigned ?
checked
=
"checked"
: "" #
class
=
"assignChkbx"
/>', width: 125 },
{ title: "Notes E-mail", template: '<
input
type
=
"checkbox"
#= RcvEmail ?
checked
=
"checked"
: "" #
class
=
"rcvEmailChkbx"
/>', width: 125 },
{ title: "QA E-mail", template: '<
input
type
=
"checkbox"
#= RcvQAEmail ?
checked
=
"checked"
: "" #
class
=
"rcvQAEmailChkbx"
/>', width: 125 },
{ title: "Order E-mail", template: '<
input
type
=
"checkbox"
#= RcvOrderEmail ?
checked
=
"checked"
: "" #
class
=
"rcvOrderEmailChkbx"
/>', width: 125 },
{ field: "DistName", title: "Distributor", width: 200 },
{ command: { name: "Remove", text: "Remove", click: removeBDCAM }, width: 85 }
],//end of columns
}).data('kendoGrid')
}
I am trying to define an initial sort.
as far as the request, the sort is working and the data comes sorted.
the problem is that in the header, the visual arrow of sort column and direction is not shown.
only after physical click on the column it shows.
please help, this is the used code:
$scope.mainGridOptions = {
dataSource: {
sort: { field:
"email"
, dir:
"desc"
},
serverPaging:
true
,
serverSorting:
true
,
pageSize: 50,
transport: {
read: {
type:
"GET"
,
dataType:
"json"
,
url:
"/p/enduser/licenses/allocation/listWithDevices"
,
headers: {
"X-AUTH-TOKEN"
: authService.getToken()
}
},
parameterMap:
function
(data, type) {
if
(type ==
"read"
) {
console.log(data);
return
{
pageSize: data.take,
page: (data.skip/data.take),
sortBy: data.sort?data.sort[0].field:
null
,
sortDir: data.sort?data.sort[0].dir:
null
}
}
}
},
schema: { data:
"items"
, total:
"itemsCount"
}
},
height: $scope.resize(),
scrollable: {
virtual:
true
},
sortable: {
allowUnsort:
false
,
mode:
'single'
}
};
Hi Team,
Getting ajax call twice for same input if specifying minLength in multiselect. Could you please suggest why ajax call invoke twice for same input with minLength.
HTML:<div><select id="required" multiple="multiple" style="width: 92.5%; margin-top: 21px; margin-left: 2px;" "></select></div>
JS Code:
var searchuserdataSource = new kendo.data.DataSource({
pageSize: 30,
serverFiltering: true,
transport: {
read: function (options) {
var srctxt = {
//searchText: $('#required').data("kendoMultiSelect").input.val()
searchText:"Test"
};
var params = "{searchText: '" + srctxt.searchText + "'}";
$.ajax({
type:"POST",
url: "./Relationships.aspx/GetUserSearch",
data: params,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
var userslist = [];
if (typeof result.d !== 'undefined' && result.d.Completed)
{
$.each(result.d.Data, function (i, item) {
var map = {};
map["id"] = item.Id;
map["name"] = item.DisplayName;
userslist.push(map);
});
}
options.success(userslist);
},
error: function (result) {
options.error(result);
}
});
}
}
});
$("#required").kendoMultiSelect({
autoBind: false,
minLength: 3,
enforceMinLength: true,
dataSource: searchuserdataSource,
dataTextField: "name",
dataValueField: "id",
//itemTemplate :"<input type='checkbox' id='#:data.id#'/> #:data.name#",
//itemTemplate: " <input type='checkbox' name ='#:data.name #' value ='#:data.id#' class='k-checkbox' /><label class='k-checkbox-label' value='#:data.id#' > #:data.name# </label>",
//itemTemplate:"<input type='checkbox' name='#:data.name # value='#:data.id #' class='k-checkbox' />" +
//"<span class='k-checkbox-label' data-value='#:data.id #'>#:data.name #</span>";
autoClose:false,
tagMode:"single",
//tagTemplate:'<span>#: data.values.length # user(s) selected</span>',
filter: "contains",
//placeholder: "Search..",
delay: 200,
close: function(){
var selectedItems =$("#required").data("kendoMultiSelect").dataItems();
if(selectedItems.length !=0)
{
$.each(selectedItems,function(index,obj){
//alert("Name: "+obj.name+"\n"+"Id:"+obj.id+"\n");
CreateUsersFilter(obj.id,obj.name);
});
if (dummyfiltersource.length >= 14)
$(".selectedusersgrid").width("94%");
}
}
});
hello,
How can I get the Saturday and Sunday columns in the Gantt chart and color them?
Do you provide such an interface?
We look forward to your reply!
thank you!