We have a Priority boolean flag column
We want a grid filter that only returns rows that only have that flag
Can you please give a quick snippet of how to accomplish this:
a) Show two radio buttons for "Priority" "Not Priority"
b) Only show a radio button for "Priority" (with the radio button pre-selected since it's the only choice)
c) Use a drop-down with a preloaded value ... This is what I have at the moment - replacing the text input with a drop down list with only one value ... BUT for the lift of me I cannot pre-select that value - the user has to expand the drop-down and select the value
$(param.element).kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{
text: "Priority",
value: 0
}
],
index: 0
});
d) using a custom UI ... the filter UI is just a form with some controls and form buttons, correct? - for the future I would really love to be able to create my own UI with my own inputs, and decide myself what value I want bound when the form is submitted
I tried switching the type on the text input (not shown) and I tried creating a cloned input element and switching the type (shown below) ... and it looks perfect, except on submit it's not recognized as a filter
$(param.element[0]).clone().attr('type', 'radio').attr('checked', true).addClass('avoPriorityFilterRadio').insertAfter(param.element[0]).prev().remove();
$(".avoPriorityFilterRadio").after("<span>Priority</span>");
Appreciate any help - I've struck out with all of these options
Daniel
define([
'plugins/http'
,
'durandal/app'
,
'knockout'
],
function
(http, app, ko) {
return
{
displayName:
'My Applications'
,
applications: ko.observableArray([])
editApp:
function
(e) {
e.preventDefault();
alert(
"test"
);
},
activate:
function
() {
var
that =
this
;
return
http.get(
'http://localhost/api/App'
).then(
function
(response) {
that.applications(response);
});
}
}
});
<
section
>
<
h2
data-bind
=
"html: displayName"
></
h2
>
<
div
id
=
"gridContainer"
>
<
div
data-kendo-role
=
"grid"
data-kendo-scrollable
=
"false"
data-kendo-sortable
=
"true"
data-kendo-bind
=
"source: applications"
data-kendo-columns="[
{'field':'Id','hidden':true},
{'field': 'Name'},
{'command':[{'text':'Edit Application','click':'this.editApp','name':'Edit-App'}],'title':'','width':'50px'}
]"
style
=
"height:100%;"
>
</
div
>
</
div
>
<
div
style
=
"float:left;"
>
<
a
href
=
"#addapp"
>Register Application</
a
>
</
div
>
</
section
>
i have a grid where the current input cell that is being edited may have had a class added to it in a prior edit to indicate that it had been changed
or the current input cell being edited may be in process of being edited and has the k-dirty flag
Can I interrogate that cell in javascript or jquery to determine the class or classes that are attached to that input cell?
I am not able to find any examples
thanks
Jim
I am using Time Picker in MVVM SPA application page. it is happening in IE 11 (working fine in FireFox ).
when i select a time from Dropdown picker or even manually enter it in Time picker Text Box. it gets the value property set to the that value.
however it resets to 12:00 AM and sometimes to 10:00 PM and shows that value in Time picker's text box. However value field returns me correct value.
following is the declaration of Time picker
$("#tpRunTime").kendoTimePicker({
dateInput: true
});
<tr>
<td class="col-md-8"><input id="tpRunTime" name="Run time" data-required-msg="Select run time" required /></td>
</tr>
Please advise.
I have a Kendo grid set up, including a template string that shows a button to click to see more details about the row. In order to do this, I set a 'dataBound' function to fire that attaches a click event to each row... which fires the below function. The idea is that this function will accept the 'event' details and use them to show the respective deatils in a pop up box. However, when I get to the bolded line below, I get an error that .dataItem is not a function at showDetails.
I know that this used to work when there was no template string being used (I implemented the template string for some conditional row formatting). Is there a way to pass these 'event' details to the function in this manner?
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
Lately, I see lots of errors like this:
" failed: TypeError: Cannot read property '__kendo_devtools_id' of undefined"
And the performance is a bit sluggish in Chrome
Any new Issue with chrome?
I'm using bootstrap with a material theme for bootstrap in my project. I want my kendo controls to look material as well. Currently for bootstrap v4 I must use the kendo bootstrap v4 file to keep my regular bootstrap formatting working, this means my kendo controls look nothing like I want them to look. Bootstrap should not be a "theme". Are there any new "fixes" that can be applied to make this scenario work? Is there a way to modify the current material theme in a way that doesn't break bootstrap? The theme builder doesn't give anywhere near enough customization to achieve a material look.
It would be good if in the future you could separate theming from the layout system so your bootstrap file is additive to any theme the user wants to use. Right now we are frantically evaluating all options and that includes eliminating Kendo UI completely unfortunately. I am hoping there is a solution because kendo is already in, but more work has been invested in the overall app design.
Thank you in advance
Hello,
I'm using the grid with AngularJS on a screen where I need to make the data change "in line."
The 'update' method needs to check whether that operation can be done or not (depending on business rules).
But when I make the call to the API method I get an error.
Follow my code.
$scope.gridOptions = {
columns: [
{
command: [
{ name: "edit", text: " "},
{ name: "destroy", text: " " }
], title: " ", width: 230
},
{ field: "StateID", title: "ID", width: 70 },
{ field: "StateCode", title: "Code", width: 70 },
{ field: "StateName", title: "Name" }
],
dataSource: {
pageSize: 5,
batch: false,
transport: {
read: {
url: "/Definitions/Country/State_Get_List/" + ID,
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8"
},
update: function (opt) {
$http.post(urlTest, '"' + opt.data.model + '"')
.success(function (res) {
if (res === '0') {
alert('you can not update this');
}
else {
alert('Success!');
}
});
},
create: function (opt) {
alert('create');
opt.sucess();
},
destroy: function (opt) {
alert('destroy');
opt.sucess();
}
},
schema: {
model: {
id: "StateID",
fields: {
StateID: { editable: false, type: "number", nullable: true },
StateCode: { type: "string" },
StateName: { type: "string" }
}
}
}
},
filterable: false,
sortable: true,
autoBind: true,
navigatable: true,
pageable: true,
height: 390,
editable: "inline",
toolbar: ["create"]
};
My API method (ASP.NET MVC):
[HttpPost]
public JsonResult State_Save([System.Web.Http.FromBody]State state)
{
string _return = "0";
// I WILL CHECK IF THIS UPDATE WILL BE OK,
// IF NOT I WILL CHANGE TO "1"
return Json(_return, JsonRequestBehavior.AllowGet);
}
The list of states appears, but when I try to edit and click the "Update" button the below error appears.
jQuery.Deferred exception: Unexpected number SyntaxError: Unexpected number
if X_axis Min value is "0" then Tooltip showing "d" on header, please refer attached screenshot and give any suggestion i can i able to show "0" instead of "d" on tooltip header.
Thanks,
.NET Developer
Hi,
I have a resizable angular kendo grid, whenever I do column resize grid data cleared off and shows empty grid.
Having this problem in all the browsers. We haven't met this problem ever before.
Thanks in advance.