This is a migrated thread and some comments may be shown as answers.

Custom Edit item template

9 Answers 1774 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Randhir
Top achievements
Rank 1
Randhir asked on 28 Aug 2012, 09:34 AM
Hi 

I need to implement  Custom Edit functionality for Kendo UI Grid instead of inline Edit and Popup edit .Please suggest on this . I am very new to kendo UI .

Thanks,
Nawaz

9 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 30 Aug 2012, 02:29 PM
Hello Randhir,

I am afraid that the Grid cannot operate in custom edit mode. The supported modes are "incell" (batch), "inline" and "popup". It is also possible to define a custom editor function (per column) or a custom template for the popup window.

Could you please give more details about what you are trying to achieve? Does none of the aforementioned options fit in your requirements?

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Neil
Top achievements
Rank 1
answered on 25 Sep 2012, 08:09 AM
Hi Alexander,

I noticed this topic as I was searching for a solution to my problem. I would also like to be able to define a custom 'Create Item' template for a grid. E.g. imagine a grid that displays rows of phone numbers with the columns (Telephone Number, Telephone Number Type)

Now supposing the Telephone Number Type column displays values from a list like 'Landline', 'Mobile'... etc. In view mode the column would display the descriptive text which is fine, but in add/edit mode instead of this column displaying an empty text box editor it would display a drop down list with the possible values to choose from.

So if would be useful if we could define templates for the controls and data we wish to present to users during record creation.

Thanks,

Neil.
0
Alexander Valchev
Telerik team
answered on 28 Sep 2012, 07:23 AM
Hi Neil,

I believe that you are looking for a Kendo Grid custom editor or the Foreign Key column editor.

I am not sure whether you want to customize the editor for both edit and create operations. The Grid controls uses same editor template for both actions, so using different editors for each operation is not supported out of the box.

What you can do in that case is to hook up to the edit event and modify the editors manually via Jquery code. In order to determine if the user is editing existing record or inserting a new one, you can use the isNew method of the model. As an example:
$("#grid").data("kendoGrid").bind("edit", function(e){
    if(e.model.isNew()) {
       //create
    } else {
       //edit
    }
})


Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Simon831
Top achievements
Rank 1
answered on 05 Oct 2012, 01:17 PM
What code can be used to:  "hook up to the edit event and modify the editors manually via Jquery code" ??
0
Alexander Valchev
Telerik team
answered on 10 Oct 2012, 08:16 AM
Hi Simon,

The general idea of the approach is demonstrated in the code snippet from previous post.
If you need further assistance, please open a support ticket with a detailed description of the issue that you encountered and we will do our best to help. Example demonstrating your current implementation will be also appreciated.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
husni
Top achievements
Rank 1
answered on 15 Aug 2015, 11:20 AM
I recently tried the facility for CRUD data using inline editing, I just tried to run the save command but failed. I combine three files:
1. SQL to store data that has been inputted

function spGroup($data){
$db=pDatabase::getInstance();
$inventorygroupname=stripslashes(strip_tags($data[1]));
$query="INSERT INTO inventorygroup (inventorygroupname, status)VALUES('$inventorygroupname',0)";
$rs=$db->query($query);
if($rs){
return true;
}else{
return false;
}
}

2. Javascript to run commands on kendo ui.

var group=(function(){
return{
load:function(){

var ik_data = {
ajax: 1,
mode: "pages",
cl: "inventorygroup",
ikdata: {0:"getGroup"}
};

$.ajax({
url: lokal+"ajax.php",
type: "POST",
dataType: "json",
async:true,
data: ik_data,
success: function(e){
if(e!=false){
var dataSource = new kendo.data.DataSource({
                            schema: {
                                model: {
                                    id: "idinventorygroup",
                                    fields: {
                                        idinventorygroup: { editable: false, nullable: true },
                                        inventorygroupname: { validation: { required: true } }
                                    }
                                }
                            },
transport: {
read: function (s) {
s.success(e);
},
update: function (s) {

url:group.editgroup();
s.success();
},
create: function (s) {

url:group.save();
s.success();
},

parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
                            },
                            batch: true,
                            pageSize: 10
                        });
$("#grid_group").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
toolbar: ["create", "save", "cancel"],
columns: [
{ field:"inventorygroupname", title: "Group Name" },
//{ title:"Status", format: "{0:c}", width: "120px", template: kendo.template($("#status").html())},

{
title: "Action",
width: 50,
template: kendo.template($("#edit").html())
},
{ command: [

{
name: "edit",
text: { 
edit: "Edit Data",               
update: "Update",            
cancel: "Cancel"    
}
},

name: "destroy", 
text: "Delete Data" 
}
], title: " ", width: "250px" }],
editable: {
mode: "inline",
}
});
}
}

});

},
save:function(a,b){
var inventorygroupname=a;
var idinventorygroup=b;
var ik_data = {
ajax: 1,
mode: "pages",
cl: "inventorygroup",
ikdata: {0:"spGroup",1:inventorygroupname}
};

$.ajax({
url: lokal+"ajax.php",
type: "POST",
dataType: "json",
async:true,
data: ik_data,
success: function(e){
if(e!=false){
group.load();
}
}
});
},​

3. PHP as an object that is used as a variable for the operation of the data.
<script type="text/x-kendo-template" id="edit">
    <button class="btn btn-default btn-sm" type="button" onclick="group.save('${inventorygroupname}')">Edit Data</button>
</script>

I have successfully used this concept to the method of the popup, but for my inline application failed. ask for help. Thank you
0
husni
Top achievements
Rank 1
answered on 15 Aug 2015, 11:20 AM
I recently tried the facility for CRUD data using inline editing, I just tried to run the save command but failed. I combine three files:
1. SQL to store data that has been inputted

function spGroup($data){
$db=pDatabase::getInstance();
$inventorygroupname=stripslashes(strip_tags($data[1]));
$query="INSERT INTO inventorygroup (inventorygroupname, status)VALUES('$inventorygroupname',0)";
$rs=$db->query($query);
if($rs){
return true;
}else{
return false;
}
}

2. Javascript to run commands on kendo ui.

var group=(function(){
return{
load:function(){

var ik_data = {
ajax: 1,
mode: "pages",
cl: "inventorygroup",
ikdata: {0:"getGroup"}
};

$.ajax({
url: lokal+"ajax.php",
type: "POST",
dataType: "json",
async:true,
data: ik_data,
success: function(e){
if(e!=false){
var dataSource = new kendo.data.DataSource({
                            schema: {
                                model: {
                                    id: "idinventorygroup",
                                    fields: {
                                        idinventorygroup: { editable: false, nullable: true },
                                        inventorygroupname: { validation: { required: true } }
                                    }
                                }
                            },
transport: {
read: function (s) {
s.success(e);
},
update: function (s) {

url:group.editgroup();
s.success();
},
create: function (s) {

url:group.save();
s.success();
},

parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
                            },
                            batch: true,
                            pageSize: 10
                        });
$("#grid_group").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
toolbar: ["create", "save", "cancel"],
columns: [
{ field:"inventorygroupname", title: "Group Name" },
//{ title:"Status", format: "{0:c}", width: "120px", template: kendo.template($("#status").html())},

{
title: "Action",
width: 50,
template: kendo.template($("#edit").html())
},
{ command: [

{
name: "edit",
text: { 
edit: "Edit Data",               
update: "Update",            
cancel: "Cancel"    
}
},

name: "destroy", 
text: "Delete Data" 
}
], title: "&nbsp;", width: "250px" }],
editable: {
mode: "inline",
}
});
}
}

});

},
save:function(a,b){
var inventorygroupname=a;
var idinventorygroup=b;
var ik_data = {
ajax: 1,
mode: "pages",
cl: "inventorygroup",
ikdata: {0:"spGroup",1:inventorygroupname}
};

$.ajax({
url: lokal+"ajax.php",
type: "POST",
dataType: "json",
async:true,
data: ik_data,
success: function(e){
if(e!=false){
group.load();
}
}
});
},​

3. PHP as an object that is used as a variable for the operation of the data.
<script type="text/x-kendo-template" id="edit">
    <button class="btn btn-default btn-sm" type="button" onclick="group.save('${inventorygroupname}')">Edit Data</button>
</script>

I have successfully used this concept to the method of the popup, but for my inline application failed. ask for help. Thank you
0
husni
Top achievements
Rank 1
answered on 15 Aug 2015, 11:23 AM
I recently tried the facility for CRUD data using inline editing, I just tried to run the save command but failed. I combine three files:
1. SQL to store data that has been inputted
2. Javascript to run commands on kendo ui.
3. PHP as an object that is used as a variable for the operation of the data.

I have successfully used this concept to the method of the popup, but for my inline application failed. ask for help. Thank you
0
Alexander Valchev
Telerik team
answered on 20 Aug 2015, 07:33 AM
Hello Husni,

According to our records this is the 4th place where you post the same question. Posting the same question multiple times causes unnecessary support overload and does not lead to receiving faster response.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Randhir
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Neil
Top achievements
Rank 1
Simon831
Top achievements
Rank 1
husni
Top achievements
Rank 1
Share this question
or