
I added a new column to my grid but it's not showing up because I'm using the setOptions method along with localStorage to save the grid options and it must be overriding the grid columns. How can I reset/clear localStorage so that the grid gets updated properly in the browser? Here is the relevant JS code:
$(function () {
var grid = $("#reviewsGrid").data("kendoGrid");
var options = localStorage["pat-sessions-options"];
if (options) {
var parsedOptions = JSON.parse(options);
parsedOptions.toolbar = [
{ template: $("#toolbarTemplate").html() }
];
parsedOptions.columns[0].headerTemplate = $("#emptyHeaderTemplate").html();
grid.setOptions(parsedOptions);
}
});
function onDataBoundPATItems(e) {
var grid = $("#reviewsGrid").data("kendoGrid");
localStorage["pat-sessions-options"] = kendo.stringify(grid.getOptions());
}
Hello,
I'm currently trying to make the grid's on our website persisted but have a couple of questions:
1. Persisting Columns with Multicheck Filters
When I try and open the column menu on a column that has multi check filter, it errors. It's the exact same issue as in https://www.telerik.com/forums/multi-check-box-filter-and-persistance but the answer was from 2 years ago. Is there an update to this?
2. Handling data changes
What happens when you add, remove or rename a column? Is there a way to compare the saved (in local storage) columns and see if there are any differences? If so, delete the saved grid settings as it's now incorrect?
Thank you
Lucy
Hi,
I have implemented the filter multi check as described here:
http://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes
and I have persisted the grid using the methods described here:
http://demos.telerik.com/aspnet-mvc/grid/persist-state
For the checkboxes, I have a method server side which returns the filter checkboxes as Json.
Code Snippet:
@(Html.Kendo().Grid<DefectNotificationReportItemDto>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.MaterialCode).Width(140).Filterable(f => f.Multi(true).ItemTemplate("itemTemplate").Search(true).DataSource(source => source.Read(r => r.Action("GetMaterialCodes", "DefectNotificationReport", new { selectedSnapshotDate = Model.ToString("dd MMM yyyy") }))));
columns.Bound(p => p.MaterialDescription).Width(300).Filterable(f => f.Multi(true).ItemTemplate("itemTemplate").Search(true).DataSource(source => source.Read(r => r.Action("GetMaterialDescriptions", "DefectNotificationReport", new { selectedSnapshotDate = Model.ToString("dd MMM yyyy") }))));
columns.Bound(p => p.BatchNumber).Width(140).Filterable(f => f.Multi(true).ItemTemplate("itemTemplate").Search(true).DataSource(source => source.Read(r => r.Action("GetBatchNumbers", "DefectNotificationReport", new { selectedSnapshotDate = Model.ToString("dd MMM yyyy") }))));
}
function itemTemplate(e) {
if (e.field === "all") {
//handle the check-all checkbox template
return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>";
} else {
//handle the other checkboxes
return "<div class='kendo-custom-filter'><span><label><input type='checkbox' name='" + e.field + "' value='#=Value#'/><span>#= Text #</span></label></span></div>";
}
}
Everything works fine, until the state of the grid is reloaded. If I then click on a filter I get a JavaScript error:
VM12456:3 Uncaught ReferenceError: BatchNumber is not defined
at eval (eval at compile (kendo.all.js:194), <anonymous>:3:209)
at Object.render (kendo.all.js:175)
at Object.proxy [as render] (jquery-3.1.1.js:502)
at init.createCheckBoxes (kendo.all.js:37796)
at init.refresh (kendo.all.js:37762)
at init.options.forceUnique.checkChangeHandler (kendo.all.js:37614)
at init.trigger (kendo.all.js:124)
at init._process (kendo.all.js:6965)
at init.success (kendo.all.js:6710)
at success (kendo.all.js:6637)
I find all of your features are great in isolation but when combined this sort of things happens. Please can you tell me why this happens and how I can fix the issue?
Thanks
Hi there,
First let me state what we're trying to achieve.
We need to inject some values into a pre-defined spreadsheet with data already on it (basically a copy from a previous version). I thought I could name specific cells using the "defineName" method on the spreadsheet to create named ranges (each one cell in size) and then later find those ranges to set the values.
However, I might be incorrect in what the named ranges are for, but I cannot find a way to find a named range and then set it's value. Is there a way to do this, or some other way to give cells that can be anywhere some kind of "metadata" that I can use later to inject data?
Say for example we have data relating to countries, I'd want to generate the spreadsheet, give each country's cell a number and give the cell a range name of the country. I wouldn't necessarily know the exact cell number, because users could insert new rows/columns etc, but the range name would stay. Then later I'd be able to find the ranges by country name somehow and put different numbers in there.
Thanks.
Hey guys,
We have a big problem compiling Kendo templates which contain other Kendo widgets, e.g. a Grid.
We have the following template (simplified):
<script id="myTemplate" type="text/x-kendo-template">@(Html.Kendo().Grid<MyViewModel>() .Name("myGrid") .Columns(columns => { columns.Bound(c => c.Name); }))</script>The original template contains other dynamic data-bound values, e.g. "#=Id#"... thus we need a template approach! Now we want to compile this template, because we need to show it as content of a window:
<script type="text/javascript"> var myTemplate = kendo.template($("#myTemplate").html());</script>This should work fine, but Kendo gives us invalid JavaScript when compiling:
Invalid template... Generated code: var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<div class="k-widget k-grid" id="myGrid"><table><colgroup><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="Name" data-index="0" data-title="Name" scope="col"><span class="k-link">Name</span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="1"></td></tr></tbody></table></div><script>\n\tjQuery(function(){jQuery("';myGrid").kendoGrid({"columns":[{"title":"Name","field":"Name","encoded":true}],"scrollable":false,"autoBind":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-server']){return 'aspnetmvc-server';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":"channelsAssignGrid-"},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"Name":{"type":"string"}}}}}});}); ;$kendoOutput+=;}return $kendoOutput;
Any ideas/solutions for this? I think we're not the first discovering this problem... is there any straight forward solution?
Thanks, Dimitrij
Hi,
I have a licensed version of Kendo. That is showing error for first time user. If someone clicks error and add it to the trusted site it resolved but user is not expert to do that. How can I solve it?
Thanks,
T
I currently have a editor set up with an image browser. Looking at this demo, it appears that a user should be able to select an image that has been inserted into the editor, and resize it by grabbing the corners.
In my editor, however, inserted images are not showing up as selectable or resizeable. I can't seem to find any settings that can enable this functionality. Am I missing something? What can I do to enable image resizing?
<div class="form-horizontal"> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @(Html.Kendo().Editor() .Name("FullStory") .HtmlAttributes(new { style = "height:440px" }) .Resizable(resizable => resizable.Content(true).Toolbar(true)) .ImageBrowser(imageBrowser => imageBrowser .Image("~/UploadedPhotos/{0}") .Read("ImageBrowser_Read", "Home", new { storyID = "#=StoryID#" }) .Create("ImageBrowser_Create", "Home") .Destroy("ImageBrowser_Destroy", "Home") .Upload("ImageBrowser_Upload", "Home", new { storyID = "#=StoryID#" }) .Thumbnail("ImageBrowser_Thumbnail", "Home") ) .Tools(tools => tools .ViewHtml() .FontName() .FontSize() .FontColor() ) .Value(@<text> </text>) ) @Html.ValidationMessageFor(model => model.FullStory, "", new { @class = "text-danger" }) </div> </div></div>
