Hi there,
I am currently working on Kendo Grid. I have implemented with model binding from database.
I have 3 windows. To add a row, to see the details, and to change the concern row.
So far everything works.
Now if the logged user wants to change his grid, I allowed him to record its changes / customization on the grid.
Again everything works fine. I record the grid's statements in my database.
To do this I Took example on this project :
http://www.telerik.com/support/code-library/save-grid-state-in-session-on-server-side
The problem is that when I load my save states, my add button disappears (Custom Toolbar), and none of my windows opens (edit, detail, this 2 buttons are Custom Command)
Do you have an idea for how to save the states of these elements?
Thank you in advance,
Ps : This is the javascript code I use to saved grid's states :
I have a project to show you but it's between 8 and 9 MB when compressed.
Best regards.
I am currently working on Kendo Grid. I have implemented with model binding from database.
I have 3 windows. To add a row, to see the details, and to change the concern row.
So far everything works.
Now if the logged user wants to change his grid, I allowed him to record its changes / customization on the grid.
Again everything works fine. I record the grid's statements in my database.
To do this I Took example on this project :
http://www.telerik.com/support/code-library/save-grid-state-in-session-on-server-side
The problem is that when I load my save states, my add button disappears (Custom Toolbar), and none of my windows opens (edit, detail, this 2 buttons are Custom Command)
Do you have an idea for how to save the states of these elements?
Thank you in advance,
Ps : This is the javascript code I use to saved grid's states :
<
button
id
=
"save"
>Save state</
button
>
$(
"#save"
).click(
function
() {
var
grid = $(
"#Table"
).data(
"kendoGrid"
);
var
dataSource = grid.dataSource;
var
state = {
columns: grid.columns,
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
filter: dataSource.filter(),
group: dataSource.group(),
};
$.ajax({
url:
"/Base/Save"
,
data: {
data: JSON.stringify(state)
}
});
});
I have a project to show you but it's between 8 and 9 MB when compressed.
Best regards.
8 Answers, 1 is accepted
0

Regis
Top achievements
Rank 1
answered on 03 Jul 2014, 03:07 PM
Here is the sample project if someone need.
Best regards.
Best regards.
0

Regis
Top achievements
Rank 1
answered on 03 Jul 2014, 03:09 PM
sorry for multi-post ...
0
Hi Regis,
Since the Grid is destroyed and recreated when the "Load" button is clicked, you need to define all Grid settings and not just the one that you have saved. Please follow the syntax guidelines, which are provided in the Grid's client configuration documentation:
http://docs.telerik.com/kendo-ui/api/web/grid
Regards,
Dimo
Telerik
Since the Grid is destroyed and recreated when the "Load" button is clicked, you need to define all Grid settings and not just the one that you have saved. Please follow the syntax guidelines, which are provided in the Grid's client configuration documentation:
http://docs.telerik.com/kendo-ui/api/web/grid
Regards,
Dimo
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Regis
Top achievements
Rank 1
answered on 08 Jul 2014, 09:03 AM
Hi Dimo,
Thanks for your answer. I wanted to know if is it not possible to save my custom options with the rest of my options?
Something like that :
Here is my grid :
With your answer I found this : { command: "edit" }, and same thing for custom toolbar.
But if possible I want to save my custom option with the other option.
If I can't can you show me how to recreate this custom option (toolbar and command)
I am not understanding how to deal with the method I use.
Thanks a lot,
Best regards.
Thanks for your answer. I wanted to know if is it not possible to save my custom options with the rest of my options?
Something like that :
$(
"#save"
).click(
function
() {
var
grid = $(
"#Table"
).data(
"kendoGrid"
);
var
dataSource = grid.dataSource;
var
state = {
columns: grid.columns,
command: grid.command,
//Here to save custom command
toolbar: grid.toolbar,
//Here to save custom toolbar
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
filter: dataSource.filter(),
group: dataSource.group(),
};
$.ajax({
url:
"/Base/Save"
,
data: {
data: JSON.stringify(state),
id: 1,
name:
"Customer Grid"
}
});
});
$(
"#load"
).click(
function
() {
var
grid = $(
"#Table"
).data(
"kendoGrid"
);
var
dataSource = grid.dataSource;
$.ajax({
url:
"/Base/Load"
,
data: {
id: 1,
name:
"Customer Grid"
},
success:
function
(state) {
state = JSON.parse(state);
var
options = grid.options;
options.columns = state.columns;
options.command = state.command;
//And here to load custom command
options.toolbar = state.toolbar;
//Then here to load custom toolbar
options.dataSource.page = state.page;
options.dataSource.pageSize = state.pageSize;
options.dataSource.sort = state.sort;
options.dataSource.filter = state.filter;
options.dataSource.group = state.group;
grid.destroy();
$(
"#Table"
)
.empty()
.kendoGrid(options);
}
});
});
Here is my grid :
@(Html.Kendo().Grid<
Data.Models.Customer
>()
.Name("Table")
.ToolBar(toolBar => toolBar.Custom()
.Text(Resources.Add)
.HtmlAttributes(new { id = "CreateCustomer" })
.Url("#")
)
.Columns(columns =>
{
columns.Bound(c => c.CustomerID).Title(Resources.HeaderGridCustomerID);
columns.Bound(c => c.LastName).Title(Resources.HeaderGridCustomerLastname);
columns.Bound(c => c.FirstName).Title(Resources.HeaderGridCustomerFirstname);
columns.Bound(c => c.Address).Title(Resources.HeaderGridCustomerAddress);
columns.Command(command => command.Custom(Resources.Detail).Click("CustomerDetail"));
columns.Command(command => command.Custom(Resources.Edit).Click("EditCustomer").HtmlAttributes(new { id = "EditCustomer" }));
columns.Command(command => command.Destroy().Text(Resources.Delete));
})
.HtmlAttributes(new { style = "max-height:500px;" })
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Groupable()
.Filterable()
.Reorderable(r => r.Columns(true))
.Sortable()
.ColumnMenu()
.Resizable(r => r.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(true)
.Model(model => model.Id(p => p.CustomerID))
.Read(read => read.Action("CustomerList", "Customer"))
.Destroy("DeleteCustomer", "Customer")
)
)
With your answer I found this : { command: "edit" }, and same thing for custom toolbar.
But if possible I want to save my custom option with the other option.
If I can't can you show me how to recreate this custom option (toolbar and command)
I am not understanding how to deal with the method I use.
Thanks a lot,
Best regards.
0
Hi Regis,
Generally, all Grid options are accessible via:
However, if you will be recreating the Grid with its default settings together with the user's custom settings, maybe it will be smarter and easier to switch to client-side-only initialization - you don't need the server one, which will create a Grid instance that you will destroy later. In addition, I don't think you need to save and load settings, which the user cannot change - you can simply hard-code them in the client declaration.
The previously provided documentation page shows how to configure all the Grid features client-side. Furthermore, you can also see how the server configuration is serialized and rendered as a client-side initialization script and use this information for easier client-side initialization.
Regards,
Dimo
Telerik
Generally, all Grid options are accessible via:
$(
"#GridID"
).data(
"kendoGrid"
).options
However, if you will be recreating the Grid with its default settings together with the user's custom settings, maybe it will be smarter and easier to switch to client-side-only initialization - you don't need the server one, which will create a Grid instance that you will destroy later. In addition, I don't think you need to save and load settings, which the user cannot change - you can simply hard-code them in the client declaration.
The previously provided documentation page shows how to configure all the Grid features client-side. Furthermore, you can also see how the server configuration is serialized and rendered as a client-side initialization script and use this information for easier client-side initialization.
Regards,
Dimo
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Regis
Top achievements
Rank 1
answered on 08 Jul 2014, 12:29 PM
Hi Dimo,
Thanks for your answer and sorry for the duplicate support ticket.
I understant what you mean. It's a good idea, I was just thinking that it was impossible to do this like that.
I need to keep my wrappers. But If I can initialize some element with client side I'll do this.
I'll try as soon as possible. If I managed to do what I want I will share with you.
Thanks a lot.
Best regards.
Thanks for your answer and sorry for the duplicate support ticket.
I understant what you mean. It's a good idea, I was just thinking that it was impossible to do this like that.
I need to keep my wrappers. But If I can initialize some element with client side I'll do this.
I'll try as soon as possible. If I managed to do what I want I will share with you.
Thanks a lot.
Best regards.
0

Fernando
Top achievements
Rank 1
answered on 23 Oct 2014, 01:03 PM
Could you provide an example of how to save commands and toolbar and then load them again?
Thanks in advance
Thanks in advance
0
Hello Fernando,
As I tried to explain in my previous reply, the command and toolbar settings cannot be changed by the end user. From this point of view, there is no need to save and load them. You can hard-code these settings in the Javascript code and use them when creating the Grid client-side. The Grid client-size API and demos will help you with the correct syntax. Let me know if you stumble upon anything.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
http://demos.telerik.com/kendo-ui/grid/editing
http://demos.telerik.com/kendo-ui/grid/toolbar-template
In case you are using the MVC wrapper of the Kendo UI Grid, keep in mind that the toolbar is rendered as HTML. The toolbar settings are not serialized as part of the auto-generated Grid initialization script. This means that you can't copy-paste these settings and need to implement them using the resources above. This is something I did not clarify in my previous post.
Regards,
Dimo
Telerik
As I tried to explain in my previous reply, the command and toolbar settings cannot be changed by the end user. From this point of view, there is no need to save and load them. You can hard-code these settings in the Javascript code and use them when creating the Grid client-side. The Grid client-size API and demos will help you with the correct syntax. Let me know if you stumble upon anything.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
http://demos.telerik.com/kendo-ui/grid/editing
http://demos.telerik.com/kendo-ui/grid/toolbar-template
In case you are using the MVC wrapper of the Kendo UI Grid, keep in mind that the toolbar is rendered as HTML. The toolbar settings are not serialized as part of the auto-generated Grid initialization script. This means that you can't copy-paste these settings and need to implement them using the resources above. This is something I did not clarify in my previous post.
Regards,
Dimo
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.