Hi,
I have a Grid that is generated dynamically in javascript.
The columns are parametered on the server and I received the configuration in Json. Then I build the Grid as scrollable by default because I can't determine it.
On "databound", I used the "autofit" function to resize each columns. But sometimes, the table width is bigger than the sum of the columns'width and I would like to dispatch the empty width on each columns.
So, is it possible to resize a column dynamically by setting its width such like that ?
myGrid.columns[0].setWidth("500px");
Is it possible to dynamically change the behaviour of a scrollable Grid to a non scrollable Grid ( so that column resizing behaves like if it was initially configured as non scrollable ) ?
Thanks for your help,
Regards
Hi,
I have a problem related to pdf export. If exported view is too long, it's not visible in pdf, and I must zoom it for looking smth (see pdf-export.png). Can I do smth, for example export pdf already zoomed in, and zoom it out if needed?
Hi, I set the pageSize option on the grid, but I'm having a hard time because it's not shown on the screen.
So I can't see the page selection drop-down even though I deactivated all my csss and enabled only the css and js related to kendo.
What should I check to solve this problem?
I will attach my current screen and my grid creation code.
Help me...
$("#dataTable").kendoGrid({
sortable: true,
selectable: true,
groupable: false,
scrollable: true,
dataSource: {
data: [],
pageSize : 10
},
pageable: {
pageSizes: [10,50,100]
},
columns: [
{ title: "No", attributes:{style: "text-align: center"}, template: "#= renderNumber(data) #", width: "50px"},
{ field: "id", title: "SEQ", width: "130px", hidden:true},
{ field: "registDt", title: "일시", width: "160px", attributes:{style: "text-align: center"}, template: '#=registDt==null?" ":new Date(registDt).getDateTime()#' },
],
//dataBound: resetRowNumber,
});
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'
}
};