my question is how can i add multiple checkbox that contains char varying[] in database and also i want to add image in the grid and want to show image preview on my kendo grid , I also want to add dropdown that values is coming from different table and last one is radio button so now these thing are that i want to store in my kendo grid.
New contributor
Julius_1907 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
</head>
<body>
<div>
</div>
<div id="grid"></div>
<h2>
Index
</h2>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Crud/GetAll",
dataType: "json"
},
create: {
url: "/Crud/Add",
type: "post",
datatype: "json"
},
update: {
url: "/Crud/Update",
type: "post",
datatype: "json"
},
destroy: {
url: function(data){
return "/Crud/Delete/" + data.c_id;
},
@* url:"/Crud/Delete", *@
type: "post",
datatype: "json"
}
},
pageSize: 10,
schema: {
model: {
id: "c_id",
fields: {
c_id: { type: "number", editable: false },
c_name: { type: "string" },
c_gender: { type: "string" },
c_skill: { type: "string" },
c_cityid: { type: "string" },
c_image: { type: "string" },
c_date: { type: "string" }
}
}
}
});
$('#grid').kendoGrid({
dataSource: dataSource,
columns: [
{ selectable: true, width: "50px" },
{ field: "c_id", title: "Id" },
{ field: "c_name", title: "Name" },
{ field: "c_gender", title: "Gender", editor: genderEditor },
{ field: "c_skill", title: "skill", editor: skillEditor },
{ field: "c_cityid", title: "city", editor: cityEditor },
{ field: "c_image", title: "Image", template: "<img src='#: c_image #' alt='Image' style='max-width:100px; max-height:100px;' />", editor: imgEditor },
{
field: "c_date",
title: "Date of Birth",
format: "{0:yyyy/MM/dd}",
editor: function (container, options) {
var dob = options.model.c_date ? kendo.toString(new Date(options.model.c_date), 'yyyy/MM/dd') : new Date();
$('<input name="c_date" data-format="yyyy/MM/dd" required="required" />').appendTo(container).kendoDatePicker({
value: dob,
change: function (e) {
var parsedDate = kendo.toString(new Date(this.value()), 'yyyy/MM/dd');
options.model.set("c_date", parsedDate);
},
});
},
},
{ command: ["edit", { name: "destroy", text: "Delete" }], title: "Action" }
],
editable: "popup",
pageable: true,
sortable: true,
filterable: true,
toolbar: ["create", { template: '<button id="deleteSelected" class="k-button">Delete Selected</button>' }, { template: ' <input type="text" id="gridSearch" placeholder="Search..." class="k-textbox" style="width: 200px;" />' }, { template: ' <button id="exportToExcel" class="k-button">Export to Excel</button>' }, { template: ' <button id="exportToPDF" class="k-button">Export to PDF</button>' }],
excel: {
fileName: "GridData.xlsx",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
},
@* edit: function(e) {
// Redirect to another page when the edit event is triggered
window.location.href = '/Mvc/Edit';
} *@
});
$("#deleteSelected").on("click", function () {
var grid = $("#grid").data("kendoGrid");
var selectedRows = grid.select();
if (selectedRows.length) {
if (confirm("Are you sure you want to delete the selected item?")) {
selectedRows.each(function (index, row) {
grid.removeRow(row);
});
grid.dataSource.sync();
}
} else {
alert("Please select at least one item to delete.");
}
});
$("#exportToExcel").on("click", function () {
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
});
$("#exportToPDF").on("click", function () {
var grid = $("#grid").data("kendoGrid");
grid.saveAsPDF();
});
$("#gridSearch").on("keyup", function () {
var grid = $("#grid").data("kendoGrid");
var searchValue = $(this).val();
grid.dataSource.filter({
logic: "or",
filters: [
{ field: "c_id", operator: "contains", value: searchValue },
{ field: "c_name", operator: "contains", value: searchValue },
{ field: "c_gender", operator: "contains", value: searchValue },
{ field: "c_skill", operator: "contains", value: searchValue },
{ field: "c_cityid", operator: "contains", value: searchValue },
{ field: "c_date", operator: "contains", value: searchValue }
]
});
});
function genderEditor(container, options) {
$('<input type="radio" name="c_gender" value="Male" />Male<br/>')
.add($('<input type="radio" name="c_gender" value="Female" />Female<br/>'))
.appendTo(container);
}
function skillEditor(container, options) {
var checkboxWrapper = $('<div>').appendTo(container);
checkboxWrapper.kendoCheckBoxGroup({
items: [
{ label: "Design", value: "Design" },
{ label: "Develop", value: "Develop" },
{ label: "Testing", value: "Testing" }
],
layout: "horizontal"
});
var checkboxGroup = checkboxWrapper.data("kendoCheckBoxGroup");
checkboxGroup.value(options.model.c_skill.split(','));
checkboxGroup.bind("change", function (e) {
var selectedHobbies = e.sender.value().join(',');
options.model.set("c_skill", selectedHobbies);
});
}
function imgEditor(container, options) {
$('<input type="file" name="c_image" accept="image/*" />').appendTo(container)
.change(function () {
var file = this.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
options.model.c_image = e.target.result;
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem($(container).closest("tr"));
if (dataItem) {
dataItem.set("c_image", e.target.result);
} else {
console.error("Data item not found.");
}
};
reader.readAsDataURL(file);
}
});
}
function dateEditor(container, options) {
var dateValue = options.model[options.field];
var parsedDate = kendo.parseDate(dateValue);
var formattedDate = parsedDate ? kendo.toString(parsedDate, 'yyyy-MM-dd') : '';
$('<input required name="' + options.field + '" value="' + formattedDate + '">')
.appendTo(container)
.kendoDatePicker();
}
function cityEditor(container, options) {
$('<input required name="' + options.field + '">')
.appendTo(container)
.kendoDropDownList({
dataTextField: "c_cname",
dataValueField: "c_cid",
dataSource: {
transport: {
read: {
url: "/Crud/GetCities",
dataType: "json"
}
}
},
optionLabel: "--Select City--"
});
}
});
</script>
</body>
</html>
New contributor
Julius_1907 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.