I want to execute an action when click event of a delete button in a grid is done. How can I know when is clicked in Javascript?
(Read IMPORTANT at the end)
Use:
$("tr .k-grid-delete", "#grid").on("click", function(e) {
alert("deleted pressed!");
})
Where #grid is the id of your grid.
If you want to know the data item you can do:
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
Alternatively, you can define the command in the grid.columns as:
{
command: [
"edit",
{
name : "destroy",
text : "remove",
click: myFunction
}
],
title : "Commands",
width : "210px"
}
where myFunction is:
function myFunction(e) {
alert("deleted pressed!");
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
// item contains the item corresponding to clicked row
}
IMPORTANT: You might want to define you own destroy button where only the styling is copied from the original one (no other actions / checks). If so define your grid.columns.command as:
{
command: [
"edit",
{
name : "destroy",
text : "remove",
className: "ob-delete"
}
],
title : " ",
width : "210px"
}
and then define:
$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
e.preventDefault();
alert("deleted pressed!");
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
// item contains the item corresponding to clicked row
...
// If I want to remove the row...
$("#grid").data("kendoGrid").removeRow($(this).closest("tr"));
});
simple. You can make use of remove: to capture destroy event in kendo.
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
alert("save event captured");
//Do your logic here before save the record.
},
remove:function(e){
alert("delete event captured");
//Do your logic here before delete the record.
}
});
$(document).ready(function() {
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
alert("save event captured");
},
remove:function(e){
alert("delete event captured");
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="grid"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
In the kendoGrid, you can implement the Filter Multi Checkboxes in order of specify multiple values for a single column filter.
I would like to replicate the same feature inside the kendoFilter widget. I've tried to use a kendoMultiSelect as an editorTemplate (see this Dojo example)
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } }
}
}
}
});
$("#filter").kendoFilter({
dataSource: dataSource,
applyButton: true,
fields: [
{ name: "ProductName", label: "Product Name", editorTemplate: productDropDownEditor },
],
expression: {
logic: "and",
filters: [
{ field: "ProductName", value: "", operator: "eq" }
]
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" }
]
});
});
function productDropDownEditor(container, options) {
$('<input data-bind="value: value" name="' + options.field + '"/>')
.appendTo(container)
//.kendoDropDownList({
.kendoMultiSelect({
dataTextField: "ProductName",
dataValueField: "ProductName",
autoclose: false,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
}
});
}
Unfortunately, I think it doesn't work because the filter.value doesn't expect an array as a parameter. Is there a standard way to use the tell the kendoFilter how to create a filter based on multiple values?
I think I see what you are trying to do. Unfortunately, you can't use it that way because kendoFilter does it one by one (i.e. you'll need to click on the "+" icon in order to add another filter). Here is another alternative of what I think you are trying to do.
First off, I'd hide kendoFilter. Then based on the multiselected product name I'd redo the expression of the filter. This still accomplishes what you are trying to do (filtering through multiselect). Try the code below in the DOJO.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/filter/custom-editors">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="filter"></div>
<div id="multiselect"></div>
<br />
<br />
<br />
<div id="grid"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } }
}
}
},
});
var filter = $("#filter").kendoFilter({
dataSource: dataSource,
expression: {
logic: "or",
filters: [],
}
}).data("kendoFilter");
$("#multiselect").kendoMultiSelect({
dataTextField: "ProductName",
dataValueField: "ProductName",
autoclose: false,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
change: function(e) {
var dataItems = e.sender.dataItems();
var options = filter.getOptions();
options.expression.filters = [];
for (let dataItem of dataItems) {
options.expression.filters.push({
field: "ProductName",
value: dataItem.ProductName,
operator: "eq"
});
}
filter.setOptions(options);
filter.applyFilter();
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" }
]
});
});
</script>
<style>
#filter {
display: none;
}
</style>
</div>
</body>
</html>
I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).
I have set the popup window's title in editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
and the Add button in the toolbar:
toolbar: [{name: 'create'}]
Notably, I've tried this to no avail:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.
I've looked all over the internet and Telerik and found nothing. Am I missing something?
EDIT: Someone asked for the entirety of my grid code:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
To change the title you should use edit function of the grid like this:
$("#grid").kendoGrid({
dataSource: {...},
height: 550,
toolbar: ["create"],
columns: [
{
field: "",
title: '',
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
},
{
command: [
{ name: "edit", text: 'Edit' },
],
title: 'tools',
width: "200px",
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
}
],
editable: {
mode: "popup",
template: $("#template").html(),
},
edit: function(e) {
if (e.model.isNew()) {
e.container.kendoWindow("title", "Createee");
} else {
e.container.kendoWindow("title", "Updateee");
}
}
});
And for using the template, see this answer : Kendo UI Grid popup
Edit:
According to kendo : Kendo Forum , isNew
The isNew method returns true or false depending on the id value of that model.
If the id is still set to the default value then it will assume it is a New Model.
So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
And here are two Samples: ( Sample 1 , Sample 2 )
Is it possible to add a column to the kendo ui grid by clicking on a buutton? I have tried to add it but this column doesn't initialased in the grid and I have no any data from it. How to add a col to schema dynamically? Mabye I should somehow reinitialize it?
I want to add empty column only with the header and its name and column.field name, than to edit it in other rows. I never know beforehand what columns it will be and how much. They should be dynamic. And after adding the col new row should be with it.
The most problem is to add field to grid.dataSource.schema.model.fields.
let gridProducts = $('#gridProducts').kendoGrid({
dataSource: new kendo.data.DataSource({
data: e.event.products,
autoSync: true,
schema: {
model: {
id: "productID",
fields: {
productName: {
defaultValue: productDefault.products[0].productName,
validation: {
required: true
},
type: "string"
},
productCategory: {
defaultValue: productDefault.products[0].productCategory
},
productDiscount: {
defaultValue: productDefault.products[0].productDiscount,
type: "array"
}
}
}
}
}),
dataType: "object",
pageable: false,
toolbar: ["create"],
columns: [{
field: "productID",
title: "id"
},
{
field: "productName",
title: "Name"
},
{
field: "productCategory",
title: "Category",
template: "1",
editor: productCategoryDropDownEditor,
},
{
field: "productDiscount",
title: "Discount"
},
{
command: "destroy",
title: "x",
width: 29
},
],
editable: true,
sortable: true,
resizable: true
});
$("#addPrice").click(function() {
addPriceDialog.data("kendoDialog").open();
});
addPriceDialog.kendoDialog({
width: "450px",
title: "Add price",
closable: true,
modal: true,
actions: [{
text: 'Cancel',
action: function() {
return false;
},
},
{
text: 'Ок',
primary: true,
action: function() {
let name = $("#priceName ").val();
let type = $("#priceType").val();
let val = $("#priceValue").val();
let price = $("#price").val();
let grid = $("#gridProduct").data("kendoGrid");
let columns = grid.columns;
let newCol = {
title: "Price -" + name,
field: "price" + type + [columns.length],
format: "",
};
$("#gridTicket").data("kendoGrid").columns[(columns.length)] = newCol;
return true;
},
}
]
});
You can use setOptions to redefine the columns of the grid.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<button onclick="addColumn()">Add Column</button>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
function addColumn() {
grid.setOptions({
columns: grid.columns.concat([
{ field: "test" }
])
});
}
</script>
</body>
</html>
I'm using Gijgo Grid and I have added a button to the grid rows using the cellDataBound event but I can't get the button click event to fire. Anyone any idea what the issue may be ?
CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
if (record.Subscribed === '1') {
$displayEl.html('<Span style="color: green;">Subscribed</Span>');
}
else if (record.Subscribed === '0') {
$displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
}
}
});
$('#btnCompanyUserSubscribed').on('click', function (e) {
alert('Button has been clicked')
})
I think that would be best if you use column.renderer about this. You should assign the click event right after the creation of the element.
<table id="grid"></table>
<script>
var subscribeRenderer = function (value, record, $cell, $displayEl) {
var $btn = $('<button type="button" class="btn btn-danger">Renew</button>').on('click', function () {
alert('clicky');
});
$displayEl.empty().append($btn);
};
$('#grid').grid({
dataSource: '/Players/Get',
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name' },
{ field: 'subscribe', renderer: subscribeRenderer }
]
});
</script>
The code above should be also useful with cellDataBound event.
Give the event click function inside the columns and use cellDataBound.Like this
reportGrid = $('#eventReportData').grid({
primaryKey: 'UserPrivilegeRequestsID',
autoLoad: false,
responsive: true,
bodyRowHeight: 'fixed',
dataSource: '/Admin/GetDiscrepencyReport',
columns: [
{
field: 'UserName', title: 'Trainer', sortable: true,
events: {
'click': function (e) {
var userName = e.data.record.UserName;
popupGrid(userName);
}
}
},
{ field: 'Organization', title: 'Organization', sortable: true },
{ field: 'Country', title: 'Country', sortable: true },
{ field: 'Action', width: 170, renderer: editManager }
],
params: { sortBy: 'UserName', direction: 'desc' },
pager: { limit: 10, sizes: [5, 10, 15, 20] },
});
reportGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('UserName' === column.field) {
$displayEl.html("<div data-toggle='modal' data-target='#myModal2' >" + record.UserName + "</div>");
}
});
function popupGrid(userName) {
alert(userName);
}
Make it a function and do it like this:
$(document).ready(function () {
CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
if (record.Subscribed === '1') {
$displayEl.html('<Span style="color: green;">Subscribed</Span>');
}
else if (record.Subscribed === '0') {
$displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
$('#btnCompanyUserSubscribed').on('click', CompanyUserSubscribed);
}
}
});
});
function CompanyUserSubscribed() {
alert('Button has been clicked');
}
you can create your button this way:
$(document).ready(function () {
function Edit(e, type) {
alert("Button was clicked for row: " + e.data.record.recid)
}
grid = $("#myGrid").grid({
dataKey: "recid",
uiLibrary: "bootstrap",
dataSource: //SomeURL,
columns: [
{ field: 'recid', title: 'RecordID', width: 20, resizable: true, align: 'center' },
{ title: 'Edit', field: 'Edit', width: 15, type: 'icon', icon: 'glyphicon-pencil', tooltip: 'Edit', events: { 'click': Edit }, align: 'center' }
]
});
});
Most important part is calling your Edit function here:
events: { 'click': Edit }
Here is a demo to for the behavior I am experiencing.
If you edit the existing row with id 1, change the text to something else and then press the cancel button, the row is reverted correctly to its previous state.
In order to reproduce my problem you need to:
Add a new row
Press the update button to save it.
Select the row again and press the update button.
Press the cancel button
The row disappears!
Even though there are similar questions on this problem, I have yet to find a satisfactory answer.
Some people say that I need to define an id. As you can see from my demo, this does not make any difference, the new row has an id and it still disappears.
There are some suggestions when you are using a remote datasource, but this does not work in my case, I need to use local data.
Finally, there is this answer. While it does prevent the new row from disappearing, Canceling the row does not revert the data to its old state, it only closes the editor and the data are as they where after the edit.
Had the same problem. I had it solved by simply calling the cancelChanges() method of the DataSource:
..
cancel: function(e) {
$('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
},
..
It seems like bug only.But still you could acheive desired output through the below code.
I have introduced new variable tempSavedRecords and update
that variable when you are save or delete the record with kendo
datasource data.
When the user clicks cancel button fill the kendo datasource with tempSavedRecords.
$(document).ready(function() {
var tempSavedRecords = null;
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px'}],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
updateTempRecords();
},
cancel:function(e){
if(tempSavedRecords != null){
$('#grid').data('kendoGrid').dataSource.data(tempSavedRecords);
}
else{
$('#grid').data('kendoGrid').dataSource.cancelChanges();
}
},
remove:function(e){
$('#grid').data('kendoGrid').dataSource.remove(e.model)
updateTempRecords();
}
});
function updateTempRecords(){
tempSavedRecords = $('#grid').data('kendoGrid').dataSource.data();
tempSavedRecords = tempSavedRecords.toJSON();
}
});
Hope this helps.Thanks.
$(document).ready(function() {
var tempSavedRecords = null;
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
updateTempRecords();
},
cancel:function(e){
if(tempSavedRecords != null){
$('#grid').data('kendoGrid').dataSource.data(tempSavedRecords);
}
else{
$('#grid').data('kendoGrid').dataSource.cancelChanges();
}
},
remove:function(e){
$('#grid').data('kendoGrid').dataSource.remove(e.model)
updateTempRecords();
}
});
function updateTempRecords(){
tempSavedRecords = $('#grid').data('kendoGrid').dataSource.data();
tempSavedRecords = tempSavedRecords.toJSON();
}
});
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="grid"></div>
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>
This happens because the id remains set to its default value. The data source considers such data items as "new" and cancelling them removes them. Once you save a "new" item you need to set its id to a non-default value.
I modified your changes with this pluckr, and it seems to work.
The only change that I did was to rename 'id' column to 'ided'.
Somehow the 'id' column name, as shown in kendo examples does not work, and to me it seems like a bug.
model: {
id: 'ided',
fields: {
ided: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
I could resolve this problem by re-setting the data object after add new row.
For example:
function onInsertNewRow(dataItem) {
myDataSource.insert(dataItem);
myDataSource.data(myDataSource.data());
}
By calling data() method you say to grid that the new data asigned is the base data and the new rows are no longer new.
I hope this help you.