Kendo Grid custom editable popup - kendo-ui

I create a custom popup_editor here, and what I want to achieve when add new record,
If radio button Percentage checked disable amount field, else if radio button Amount checked disable percentage field. (refer to image below). And how to do default value in text field? Thank for helping me.
DOJO DEMO

Try this
If radio button Percentage checked disable amount field, else if radio
button Amount checked disable percentage field. (refer to image below)
edit: function(e){
$('#RadioPercentage').change(
function(){
if ($(this).is(':checked')) {
$("#percentage").removeProp("disabled").removeClass("k-state-disabled");
$("#amount").prop("disabled", true).addClass("k-state-disabled");
}
});
$('#RadioAmount').change(
function(){
$("#amount").removeProp("disabled").removeClass("k-state-disabled");
$("#percentage").prop("disabled", true).addClass("k-state-disabled");
});
},
And how to do default value in text field?
Try this (inside "edit"), every time you open the popup you find that value, if you want to do it once just enter a flag
$("[type='text']").val("default");
Any idea how I can use kendoNumericTextBox for percentage and amount?
Appreciate your help
Try this

Related

Url Button in Grid

I have a grid that shows a business component data. One field of this table is an Url type. I don't want to show the url as text, i want show only a button that, if pressed, opens the link.
How I can do that?
I found a solution for the problem:
I changed the visible property of the url field to 'false' and added the link to another field of the grid with this code in the 'load' event:
OtherFieldName.LinkTarget= '_BLANK'
OtherFieldName.Link = link(ATT:UrlFieldName)
I hope this can be useful for you.

Kendo UI Batch Grid Edit Cell when not in Editor Template

I turn to you stackoverflow!
I'm using a kendo ui batch grid with InCell editing set and am wanting to know a way to set a particular column into edit mode.
I've tried using editCell, and so far it hasn't caused any of the cells to go into edit mode :(
In this particular case, we have a ClientTemplate column specified which has a button (really its a link...) in it. When the user clicks the button I would like a particular cell in that row to switch to edit mode. For reference here's what the specific column template looks like:
columns.Template(t => { }).HeaderTemplate("")
.ClientTemplate(#"
<a href='javascript: void(0)' class='abutton SecondaryActiveBtn' onclick='editVariableRate(this)' title='Edit'>Edit</a>")
.Width(100).Title("");
Here is the particular javascript method that gets called on the button click:
function editVariableRate(element) {
grid = $("#variableFee").data("kendoGrid");
var cell = $(element).closest("tr").find("td:eq(2)");
grid.editCell(cell);
}
Am I doing something wrong here because the particular column never goes into edit mode?
For reference, I can do the following successfully using the same "cell" variable:
var cellIndex = grid.cellIndex(cell);
and cellIndex gets assigned correctly, so I don't think its a problem of selecting the particular cell...
Anybody have any ideas?
Figured it out! It was the link that was the cause of the problem :( Swapping that to be an input button was the only thing that was needed. bangs head into desk.

Kendo UI Web Grid, Virtual Scrolling and dynamic checkbox

I am using the kendo UI Web Grid to display some data.
Since I am dealing with a lot of data I have decided to use the grid virtual scrolling feature, which works great.
Now, I need to add a non databound column that will get populated with a checkbox, so that I can check/uncheck a record in the grid for further processing.
I cam able to add the checkbox column by simply using a template :
columns: [
{
field: "",
width:'3%',
title: " ",
hidden: false,
template: "<input type=\"checkbox\" />"
},
The problem that I am running into is that when virtual scrolling is enabled, if I check one of the checkboxes, then scroll the grid, when I go back to the record that was checked, it is not checked anymore.
How can I use virtual scrolling and still keep my checkbox checked ?
Thanks
The rows are always re-created when you pass as many records as your pageSize is. However if you really bind that checkbox to the underlying model, the changes will be persisted and once you are back on the same page you will see the items as checked.
One way to make the checkboxes reflect the changes to the model is like this:
grid.tbody.on('click',':checkbox',function(e){
var row = $(this).closest('tr');
grid.dataItem(row).set('isAdmin',$(this).is(':checked'));
})
Where isAdmin is the name of the field the checkbox is bound to.
Here is live example.

jqgrid multiple datepickers and autofocus

i think i found a strange bug in jqGrid.
If you click on this link you can see a jqGrid with a pager. If you click on the '+' button you get the add form in which the 2 datepickers work as expected.
If you now click on this link you can see the very same table, and the very same add button. Anyway if you try to set the second date using tha datepicker you will notice that the focus moves back to the first input, opening the first datepicker.
The example does not work because it has the first field (Id) hidden, so the real first field is a datepicker. Moreover, the edit form is modal.
Last, if you click in this link the behaviour is correct even if the first field is a datepicker. The only thing i changed is the modal property (to false, before it was true).
However, i NEED to hide the Id field AND have a modal window, so i have to to get rid of this problem...
Can someone suggest a solution or an hint?
Thanks
PS: notice that if you set modal: false, you still get the black/transparent overlay like if the window is modal BUT it is not! If you click outisde the edit form it will be closed. This is not acceptable for my requirements.
try to set jqModal parameter into false
var editParams = {
modal: true,
jqModal:false,
... //other options you need
}
grid.editGridRow(row_id, editParams);
for more information see answer Oleg's analisys

How to custom jqgrid search dialog

i'm starter in jqGrid. i have 4 feild , Id,Name,Date and Age. i Want when user click in icon search and appear search box when select Date item for search Now Appear one textBox for user enter your date, but i want Appear two textBox for user enter FromDate and ToDate.like this form
please help me. thanks All
User beforeShowForm event and add whatever you want like this..
beforeShowForm: function (form) {
$("#Location").empty();
$("#Location").append("<option value='0'>--Select--</option>");
$("#Area").empty();
$("#Area").append("<option value='0'>--Select--</option>");
}

Resources