kendo ui grid edit button not working after loading persisting state - php

Question

I am using Teleric kendo UI grid. I am using a database table to store grid options to save (persist) the grid state (column ordering, no of column default viewable etc) . It save option for every user, when the user login agin the state will automatically loded using an ajax call. Everything work fine
But the problem is that Edit button not working after loading saved state.
Please help.
thanks in advance
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<?php echo $this->session->flashdata('message');?>
<div class="panel panel-default">
<div class="panel-heading clearfix">
<div class="panel-body">
<?php
$transport = new \Kendo\Data\DataSourceTransport();
$read = new \Kendo\Data\DataSourceTransportRead();
$read->url(site_url('task/jsonMData'))
->contentType('application/json')
->type('POST');
$transport->read($read)
->parameterMap('function(data) {
return kendo.stringify(data);
}');
$model = new \Kendo\Data\DataSourceSchemaModel();
$id = new \Kendo\Data\DataSourceSchemaModelField('id');
$id->type('number');
$Name = new \Kendo\Data\DataSourceSchemaModelField('name');
$Name->type('string');
$Address = new \Kendo\Data\DataSourceSchemaModelField('address');
$Address->type('string');
$model->addField($id)
->addField($Name)
->addField($Address);
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')
->model($model)
->total('total');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport)
->pageSize(500)
->schema($schema)
->serverFiltering(true)
->serverSorting(true)
->serverGrouping(false)
->serverPaging(true);
$grid = new \Kendo\UI\Grid('grid');
$idField = new \Kendo\UI\GridColumn();
$idField->field('id')
->locked(false)
->width(60)
->hidden(true)
->title('ID');
$nameField = new \Kendo\UI\GridColumn();
$nameField->field('name')
->width(100)
->locked(false)
->hidden(true)
->title('Name');
$addressField = new \Kendo\UI\GridColumn();
$addressField->field('address')
->width(200)
->locked(false)
->hidden(true)
->title('Address');
$command = new \Kendo\UI\GridColumnCommandItem();
$command->click('commandClick')
->text('Edit');
$commandColumn = new \Kendo\UI\GridColumn();
$commandColumn->addCommandItem($command)
->title('Edit')
->width(125);
$excel = new \Kendo\UI\GridExcel();
$excel->fileName(' Task Export.xlsx')
->filterable(true)
->proxyURL('task/saveToExcel');
$grid->addColumn($id,
$name, $commandColumn)
->height(500)
->scrollable(true)
->editable('popup')
->dataSource($dataSource)
->resizable(true)
->reorderable(true)
->sortable(true)
->filterable(true)
->columnMenu(true)
->pageable(true)
->addToolbarItem(new \Kendo\UI\GridToolbarItem('excel'))
->excel($excel);
$grid->columnHide('function(e) { saveGridState(); }');
$grid->columnShow('function(e) { saveGridState(); }');
echo $grid->render();
?>
</div></div></div>
<div style="display:none;">
Click
<input type="hidden" name="rowIndex" id="rowIndex" value="-1" />
<input type="hidden" name="taskId" id="taskId" value="0" />
</div>
<!--to support excel import -->
<script>
function commandClick(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
console.log(dataItem);
var grid = $(e.currentTarget).closest("tr");
var row = grid.select();
var rowIndex = row.index();
var j = $('#hidden-link');
if(j)
{
$('#rowIndex').val(rowIndex);
$('#taskId').val(dataItem.id);
j.attr('href','<?php echo base_url()."task/edit";?>/'+dataItem.id)
j.click();
}
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'afterClose':function () {
var rowIdx = $('#rowIndex').val();
var taskId = $('#taskId').val();
if(taskId != 0 && rowIdx >= 0)
{
userData = 'id='+taskId;
$.ajax({
url: "<?php echo site_url('task/getTaskById');?>",
type: "post",
data: userData,
dataType: "json",
success: function(data){
var firstRowItem = $('#grid').data().kendoGrid.dataSource.data()[rowIdx];
firstRowItem.set('Name',data.name);
firstRowItem.set('Plant',data.address);
},
async:false,
error:function(){
alert('There is error while submit');
}
});
}
},
});
var grid = $("#grid").data("kendoGrid");
userData = "type='m'";
$.ajax({
url: "<?php echo site_url('task/getGridSavedState');?>",
type: "post",
data:{type:'m'},
// contentType:'application/json',
dataType: "json",
success: function(data){
if(data.columns)
{
options=data;
grid.setOptions(options);
}
},
error:function(){
console.log("Error loding save grid state");
}
});
});
function saveGridState()
{
var grid = $("#grid").data("kendoGrid");
gridOptions=grid.getOptions();
var request=kendo.stringify({gridOptions : gridOptions,type:'m'});
$.ajax({
url: "<?php echo site_url('task/saveGridState');?>",
type: "post",
contentType:'application/json',
data: request,
dataType: "json",
success: function(data){
console.log("stated saved");
},
error:function(){
console.log("Error in stated saved")
}
});
}
</script>

Answer 1

From the API docs
Notice that when the options object is retrieved and then serialized into a string through JSON.stringify(options), then each field that is a function will be lost. This is limitation of the serialization that the JSON.stringify does. You need to either explicitly set the fields that were functions after parsing the object back or you need to use some custom implementation for serialization to handle the serialization of the JavaScript functions.
So you need to bind the command button to the function again: at least I think that is what they mean. So try adding a basic jQuery ('selector').on('click') function after the setOptions.

Answer 2

var grid = $("#grid").data("kendoGrid");
userData = "type='m'";
$.ajax({
url: "<?php echo site_url('task/getGridSavedState');?>",
type: "post",
data:{type:'m'},
dataType: "json",
success: function(data){
if(data.columns)
{
options=data;
if(options.editable)
{
//popout last column i.e command column
edit= options.columns.pop()
//add new command column explicitly.
commandCol={"command":[{"text":"Edit","click":commandClick}],"title":"Edit","width":125};
options.columns.push(commandCol);
grid.setOptions(options);
}
}
},
error:function(){
console.log("Error loding save grid state");
}
});