Need Help on validation of Kendo GRID - Inline EDIT - Jquery

Question

Dear Team, I am new to Kendo UI with Jquery, Can you please help me with the below question:

I have Kendo Grid, I am making the Grid as editable, so I am able to do the Grid as Editable, However I want to achive followings :-

1. AFTER Clicking the "Edit Button" in the Grid, When the user clicks the editable textbox but the user doesnt make any changes and comes out of the editable field, then I want to display the validation message as shown in the image - "field required" and also the color of the text box has to change.

2.When the user Clicks the "Edit" button, at present the Kedno Grid is displaying the default "SAVE" button. But I want to hide the save button and not display it unless the user makes any changes to Text box. If the user makes changes then I want to display the "SAVE" button.

Could you please help me how I can do this.

Here is my Code :-

$.ajax({

url: "CustomerDetail/MethodName",

dataType: 'json',

type: 'POST',

contentType: 'application/json; charset=utf-8',

data: JSON.stringify({

userId: thiz.userId

}),

success: function (data) {

thiz.SystemsGrid = thiz.element.find('.i-Systems-grid').kendoGrid({

dataSource: new kendo.data.DataSource({

data: data,

serverPaging: false,

serverSorting: false,

serverFiltering: false,

batch: true,

filter: { logic: 'and', filters: [] }, //set the default it is passed as a value

sort: [], //set the default it is passed as a value

schema: {

data: "Items",

model: {

id: "SystemID",

fields: {

SystemName: { editable: true, nullable: true },

SystemID: { editable: false, nullable: false },

}

}

}

}),

columns: [

{

field: "SystemName",

title: "Some Name",

horizontalAlign: "left",

headerAttributes: { style: "text-align: left; width: 75%;" },

width: '45%',

encoded: false,

name: "SystemName"

}, {

field: "SystemID",

title: "SystemID",

horizontalAlign: "left",

headerAttributes: { style: "text-align: left; width: 75%;" },

width: '25%',

encoded: false,

name: "SystemID"

}

{

command: [{

name: "edit",

text: {

edit: "Edit",

update: "Save",

cancel: "Cancel"

}

}], title: " ", width: "50%"

}

],

editable: "inline",

sortable: false,

resizable: true,

autoBind: true,

navigateHierarchyCell: true,

persistSelections: true,

pageable: false,

autoResizeHeight: false,

dataBoundEnd: function (e) {

},

edit: function (e) {

},

save: function (e) {

}

}

}).data('kendoGrid');