Kendo ui Disable column when add new record - javascript

How do I achieve this, I want to disable radio button on Status Column only when Add New Record and checked on YES.
I don't know which part of script should I give. But here I provide some of it.
My KendoGrid Script
$("#grid").kendoGrid({
dataSource: dataSource,
dataBound: setColor,
height:400,
sortable: true,
columns: [
{ field: "segmentActive", title:"STATUS", width: "120px", editor: RadioSegmentActive,
template: data => data.segmentActive == "y" ? "Yes" : "No" }, // <-- displaying Yes/No insted of y/n
{ field: "marketSegmentName", title:"SEGMENT NAME", width: "120px" },
{ field: "publicPrice", title:"PUBLIC PRICE", width: "120px", editor: RadioPublicPrice,
template: data => data.publicPrice == "y" ? "Yes" : "No"},
{ field: "isHouseUse", title:"HOUSE USE", width: "120px", editor: RadioHouseUse,
template: data => data.isHouseUse == "y" ? "Yes" : "No"},
{ command: ["edit",{ name: "destroy", text: "De-active" }], title: " ", width: "120px" },
],
editable: "inline",
...........
My RadioSegmentActive function
function RadioSegmentActive(container, options) {
var guid = kendo.guid();
$('<input class="k-radio" id="radio3" name="segmentActive" type="radio" value="y" >').appendTo(container);
$('<label class="k-radio-label" for="radio3">YES</label>').appendTo(container); //YES
$('<br>').appendTo(container);
$('<input class="k-radio" id="radio4" name="segmentActive" type="radio" value="n" >').appendTo(container);
$('<label class="k-radio-label" for="radio4">NO</label>').appendTo(container); //NO
}

I am not sure what you mean by "Checked on Yes", but you can do that by handling the edit event of the grid:
editable: "inline",
edit: function(e) {
if (e.model.isNew()) { // We are adding
// if ($("#radio3").prop("checked")) { // Check some field...
$("#radio3").attr('checked', true); // Set yes radio button
$('input[name=segmentActive]').attr("disabled",true); // Disable radio buttons
// }
}
}

Related

Kendo grid make detailinit expand and checkbox selected when select master table

I create a similar demo relate with my situation. What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
It's possible to do like this without using column template for the checkbox.
DEMO IN DOJO
Example like this screen shot. (this one manually checked)
p/s: I found a similar demo, but this one using column.template for the checkbox.
This example code (which is based on your sample code) answers your requirement, which is...
What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
Try this in the Telerik DOJO. We need to wait for Kendo to finish expanding the detail row (making sure all HTML elements are fully built), hence the setTimeout in detailExpand. Change the delay depending on your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Grid Master Detail Checkbox</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
detailExpand: function(e) {
var $checkbox = $(e.masterRow.context);
if ($checkbox.is(":checked")) {
setTimeout(function() {
e.detailRow.find("tbody tr").each(function() {
var $row = $(this);
$row.find(".k-checkbox").each(function() {
var $checkbox = $(this);
$checkbox.attr("checked", true);
});
$(this).addClass("k-state-selected");
});
}, 250);
}
},
columns: [
{ selectable: true, width: 50 },
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
}).data("kendoGrid");
grid.tbody.on("click", ".k-master-row .k-checkbox", function(e) {
var $checkbox = $(this);
if ($checkbox.is(":checked")) {
var $tr = $checkbox.closest("tr");
var $a = $tr.find(".k-hierarchy-cell a.k-icon");
if ($a.length) {
if ($a.hasClass("k-i-expand")) {
grid.expandRow($tr);
}
}
}
});
});
function detailInit(e) {
var detailgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: {
field: "EmployeeID",
operator: "eq",
value: e.data.EmployeeID
}
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ selectable: true, width: 50, headerTemplate: ' '},
{
field: "OrderID",
width: "110px"
},
{
field: "ShipCountry",
title: "Ship Country",
width: "110px"
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipName",
title: "Ship Name",
width: "300px"
}
]
}).data("kendoGrid");
}
</script>
</div>
</body>
</html>
I adapted your first snippet based on the second one that you provided. Check out this revised demo.
Basically, you need to call getKendoGrid() and assign its return value (the actual grid) to the grid variable.
After that, add the change event listener as shown in the second demo snippet that you provided.
grid.tbody.on("change", ".k-checkbox", function() {
var checkbox = $(this);
var nextRow = checkbox.closest("tr").next();
// Note: the row should be expanded at least once as otherwhise there will be no child grid loaded
if (nextRow.hasClass("k-detail-row")) {
// And toggle the checkboxes
nextRow.find(":checkbox")
.prop("checked", checkbox.is(":checked"));
}
});
Also note that it's not .master as in the second demo, but .k-checkbox, as you are not providing a template in the first column (which the second demo does and the checkbox there has the master class).

ExtJS. Checkbox in sourceConfig of property grid

In sourceConfig of property grid i have a field, which i want to be displayed as checkbox.
Currently, i'm set up only editor, but it renders checkbox only when field is clicked, else it shows simple text:
field: {
editor:
Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Checkbox')})
}
Question is, how can i set up renderer to show checkbox?
You need to write the render function in the source config.
Something like this:
Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,
renderTo: Ext.getBody(),
source: {
"(name)": "My Object",
Available: false,
NotAvaliable: true,
"Version": 0.01,
"Description": "A test object"
},
sourceConfig: {
Available: {
renderer: function(d){
var checked = d ? 'checked' : '';
return '<center><input type="checkbox" name="something" '+checked+'></center>';
},
editor: Ext.create('Ext.form.field.Checkbox')
},
NotAvaliable: {
renderer: function(d){
var checked = d ? 'checked' : '';
return '<center><input type="checkbox" name="something" '+checked+'></center>';
},
editor: Ext.create('Ext.form.field.Checkbox')
}
}
});
https://fiddle.sencha.com/#view/editor&fiddle/1lsk

Kendo Grid edit inline with dropdown list isn't show

i have problem with my kendo grid edit inline using dropdownlist inside the grid, this is my ScreenShoot
screenShoot1->please look field "icon"
when i click the icon's field, the field is change to dropdown list
like this
screenshoot2 after i clicked the field icon
, so what must i do ,if i want the field icon is a dropdown list before clicked ??
this is my code:
$("#customers").kendoDropDownList({
dataTextField: "pis_icon_url",
dataValueField: "pis_icon_id",
valueTemplate: '<span class="selected-value" style="background-image: url(\'#:pis_icon_url#\')"></span>',
template: '<span class="k-state-default" style="background-image: url(\'#:pis_icon_url#\')"\></span>',
dataSource: {
transport: {
read: {
dataType: "json",
url: "/api/icon-priority"
}
},
schema:{
data:'list'
}
},
height: 400
});
var dropdownlist = $("#customers").data("kendoDropDownList");
//in field: "pis_icon_id", please check "template", i already add property "id='customers'" in tag input but it doesn't work
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
{ field:"pis_priority_name",title:"Priority Name", width: "180px" },
{ field: "description", title: "Description", width: "380px" },
{ field: "pis_icon_id", title: "Icon", width: "300px",template:"<input id='customers' data-bind='value:pis_icon_id' style='width:100%;'>",
editor:categoryDropDownEditor
// "<div style='width: 100%;'><img src='#:pis_icon_url#' style='width: 22px;height: 22px;'> </div>"
},
{ field: "pis_priority_color", title: "Color",
width: "100px",
editor: function (container, options) {
$("<input type='color' name='"+options.field+"' data-bind='value:" + options.field + "' />")
.appendTo(container)
.attr("pis_priority_color", options.field)
.kendoColorPicker({
buttons: true
});
},
template: "<span style='display: inline-block; width: 50%; height: 50%; background-color: #= pis_priority_color #'></span>"
},
{ field: "is_default",
title: "Default",
width: "100px",
template:"<input name='is_default' class='ob-paid' type='checkbox' data-bind='checked: is_default' #= is_default? checked='checked' : '' #/> "
},
{ field: "active",
title:"Active",
template:"<input name='active' class='ob-paid' type='checkbox' data-bind='checked: active' #= active ? checked='checked' : '' #/> "
,width: "130px"
},
{ command: "destroy", title: " ", width: "150px" }],
editable: {
update:true
}
I was able to get it working using a MVC wrapper and by following this post:
http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration
The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.
I tried implementing the same logic using the javascript implementation but could not get it working.

AngularJS kendo grid with custom command which includes template doesn't handle events

I have an angularjs - kendo UI grid-based solution. In the controller for the grid I have placed the following code:
$scope.customClick = function(e) {
$scope.$apply(
function() {
e.preventDefault();
alert('customClick');
});
};
$scope.gridOptions = {
dataSource: $scope.gridData,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
scrollable: true,
sortable: true,
filterable: true,
selectable: true,
editable: "inline",
columns: [
{
command :[ {text: "", template: '<input type="checkbox" id="check-all" />', click: $scope.customClick} ]
},
{field: "DocumentKey", title: "Document Key"},
{field: "Sender", title: "Sender"},
{field: "Recipient", title: "Recipient"},
{field: "ChangeDate", title: "ReceivedBy Time"},
{field: "FlowComment", title: "Comment"},
{field: "Location", title: "Location"}
]
};
});
Added checkbox is displayed fine, but I don't know how to handle the click event. $scope.customClick is not triggered after clicking on check box.
A fairly old question, the user had probably found a solution long ago, but in case google search gets someone to this question, it's good to have an answer. JavaScript combined with libraries like KendoUI and AngularJS usually allow us to solve problems by using several different approaches, but here is one of them:
Say you have a grid defined like this:
<div kendo-grid="kendo.myGrid" k-options="gridOptions"></div>
Your JavaScript code to define this grid might look like this:
$scope.gridOptions = {
dataSource: new kendo.data.DataSource({
data: dataFromSomeLocalVariableMaybe,
pageSize: 10
}),
sortable: true,
pageable: {
pageSizes: [10, 20, 50]
},
columns: [{
field: "column1",
title: "Column 1",
width: "100px"
}, {
field: "column2",
title: "Column 2",
width: "120px"
}, {
command: [{
template: "<span class='k-button' ng-click='doSomething($event)'> Do something</span>"
}, {
template: "<span class='k-button' ng-click='doSomethingElse($event)'> Do something else</span>"
}],
title: " ",
width: "100px"
}]
};
Notice the $event that is passed to ng-click call to a function. That $event contains the actual click event data.
If it would be like this, then you would need to have these two functions defined:
$scope.doSomething = function($event) {
// Get the element which was clicked
var sender = $event.currentTarget;
// Get the Kendo grid row which contains the clicked element
var row = angular.element(sender).closest("tr");
// Get the data bound item for that row
var dataItem = $scope.kendo.myGrid.dataItem(row);
console.log(dataItem);
};
$scope.doSomethingElse = function($event) {
// Do something else
};
And that's it.
Omit $scope.
It should as follows:
{ command : {text: "", click:customClick}, template: '<input type="checkbox" id="check-all"/>}
Your command template should include ng directive, in your case ng-change for the checkbox input, which would point to your target function:
{
command :[{
text: "",
template: '<input type="checkbox" id="check-all" ng-change="customClick"/>'
}]
}

onUnselect event of jquery easyui datagrid

I am using JQuery EasyUI 1.3.4, I am having some trouble catching onUnselect event, following code illustrates my problem:
function NavigateProcess() {
$(function () {
var data = list;
$('#dg').datagrid({
view: detailview,
cache: true,
data: data,
loadMsg: 'Processing, please wait …',
singleSelect: true,
columns: [[
{
title: 'Name', field: 'Name', width: 180, editor: 'text'
//,formatter: formatProgress
},
{ field: 'ID', title: 'ID', width: 60, align: 'right', editor: 'text' },
{ field: 'RatePlan', title: 'RatePlan', width: 80, editor: 'text' },
{ field: 'ActivationDate', title: 'ActivationDate', width: 80, editor: 'text' },
{ field: 'DataType', title: 'DataType', hidden: 'true' }
]],
onUnselect: function (rowIndex, rowData) {
alert('unselect');
if (lastselectedrow) {
$('#dg').datagrid('endEdit', lastselectedrow);
}
},
onSelect: function (rowIndex, rowData) {
alert('select');
lastselectedrow = rowIndex;
$('#dg').datagrid('beginEdit', rowIndex);
},
detailFormatter: function (index, row) {
return '<div style="padding:1px"><table id="ddv-' + index + '"></table></div>';
}
});
});
function doSearch() {
$('#tt').datagrid('load', {
itemid: $('#itemid').val(),
productid: $('#productid').val()
});
}
}
I put two alert statements in onSelect and onUnselect events, onSelect is triggered when I click on a row. Since singleSelect property is true, selecting another row will result in an onUnselect and onSelect events, at least that's my understanding. When I click on rows only onSelect alert pops up, alert of onUnselect never pops up, can somebody point me how to capture onUnselect event? Any help will be appreciated.
there is an inherent bug that prevents invoking onUnselect event

Categories