or
1 answer
143 views
Is there a configuration setting or sample code for entering currency amounts in ATM style ?
For example
keypress display1 $ .12 $ .123 $ 3.125 $ 53.121 $ 153.122 $ 2,153.121 $ 12,153.12etc...
Teya
Telerik team
answered
on
31 Mar 2020
1 answer
9.0K+ views
I am just starting to use the Telerik kendo grid so not sure if I left something out
We have an MVC project and are using razr views. I have a Kendo grid displaying the results of a dynamic SQL query which doesn't allow for sorting or filtering. Are these attributes inherent in the grid or am I missing something?
My grid:
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
columns.Bound(column.ColumnName).Groupable(true).Sortable(true).Filterable(true);
}
})
.Sortable(sortable => sortable.AllowUnsort(false))
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
if (column.ColumnName.Contains("-"))
{
column.ColumnName = column.ColumnName.Replace("-", "");
}
model.Field( column.ColumnName , column.DataType);
}
})
.Read(read => read.Action("ReadData", "Grid"))
)
)
My data source:
public ActionResult ReadData([DataSourceRequest] DataSourceRequest request, int id)
{
DataTable queryResults = QueryResults(id);
return Json(queryResults.ToDataSourceResult(request), "text/html", System.Text.Encoding.Unicode, JsonRequestBehavior.AllowGet);
}
private DataTable QueryResults(int id)
{
String queryString = (from a in _qryList where a.Id == id select a.Sql).First() ;
var dataTable = new DataTable();
try
{
var dataAdapter = new SqlDataAdapter(queryString, connection);
dataAdapter.Fill(dataTable);
}
catch (SqlException e)
{
ViewBag.TextareaHTML = "Your SQL Query is invalid.\r"+e.Message;
}
return dataTable;
}
Thanks
We have an MVC project and are using razr views. I have a Kendo grid displaying the results of a dynamic SQL query which doesn't allow for sorting or filtering. Are these attributes inherent in the grid or am I missing something?
My grid:
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
columns.Bound(column.ColumnName).Groupable(true).Sortable(true).Filterable(true);
}
})
.Sortable(sortable => sortable.AllowUnsort(false))
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
if (column.ColumnName.Contains("-"))
{
column.ColumnName = column.ColumnName.Replace("-", "");
}
model.Field( column.ColumnName , column.DataType);
}
})
.Read(read => read.Action("ReadData", "Grid"))
)
)
My data source:
public ActionResult ReadData([DataSourceRequest] DataSourceRequest request, int id)
{
DataTable queryResults = QueryResults(id);
return Json(queryResults.ToDataSourceResult(request), "text/html", System.Text.Encoding.Unicode, JsonRequestBehavior.AllowGet);
}
private DataTable QueryResults(int id)
{
String queryString = (from a in _qryList where a.Id == id select a.Sql).First() ;
var dataTable = new DataTable();
try
{
var dataAdapter = new SqlDataAdapter(queryString, connection);
dataAdapter.Fill(dataTable);
}
catch (SqlException e)
{
ViewBag.TextareaHTML = "Your SQL Query is invalid.\r"+e.Message;
}
return dataTable;
}
Thanks
Sivaramakrishna Reddy
Top achievements
Rank 1
Veteran
Rank 1
Veteran
answered
on
31 Mar 2020
1 answer
78 views
Hi,
The TypeScript definitions for the View are incomplete.
Kind Regards,
Marco
Martin
Telerik team
answered
on
31 Mar 2020
1 answer
4.4K+ views
Hi,
I am using the popup editing feature of the grid. Now I need to put some validation in. I was able to figure out how to validate the string field but can't figure out how to validate the date fields since I am usingt the DateTimePicker on the popup window (code at bottom).
I would like to validate that the days are greeater than today and that EndDate > StartDate for example.
Thanks in advance.
jennifer
var AuctionGrid = {}; /// class variables AuctionGrid._id = null; AuctionGrid._auctionDataSource = null; /// <summary>Initialize the auctions grid</summary> AuctionGrid.init = function () { // Auction Datasource AuctionGrid._auctionDataSource = new kendo.data.DataSource({ transport: { read: { url: _rootUrl + "Test/GetAuctions/" }, update: { url: _rootUrl + "Test/UpdateAuctions/", type: "POST" }, destroy: { url: _rootUrl + "Test/DestroyAuction/", type: "POST" }, create: { url: _rootUrl + "Test/CreateAuction/", type: "POST" }, parameterMap: function (data, type) { // If update, create or destroy, then serialize the data // as JSON so that it can be more easily read on the server. if (type != "read") { return { models: JSON.stringify(data.models) }; } else { return data; } } }, schema: { model: { id: "AuctionID", fields: { AuctionID: { editable: false, type: "number" }, AuctionName: { type: "string", validation: { required: { message: "An Auction Name is Required!" }, validateAuctionName: function (input) { //alert(input.attr("data-bind")); if (input.attr("data-bind") == "value:AuctionName") { // check if this is the element to validate alert(input.val().length); if (input.val().length > 10) { input.attr("data-validateAuctionName-msg", "AuctionName can only have a maximum of 10 characters."); return false; } else return true; } return true; } } }, ShortDescription: { type: "string" }, LongDescription: { type: "string" }, StartDate: { type: "date" }, EndDate: { type: "date", validation: { required: { message: "End Date is Required!" }, validateEndDate: function (input) { HOW DO I USE VALIDATION HERE - HOW DO I VALIDATE THAT END DATE > START DATE } } }, Active: { type: "boolean" } } } } }); // Display the active auctions in a kendo grid. $("#AuctionGrid").kendoGrid({ dataSource: AuctionGrid._auctionDataSource, scrollable: true, editable: "popup", pageSize: 6, edit: onEdit, height: 300, toolbar: ["create"], columns: [{ field: "AuctionName", title: "Auction Name", width: "200px" }, { field: "ShortDescription", title: "Description", editor: textareaEditor }, { field: "StartDate", title: "Start Date", format: "{0:MM-dd-yyyy hh:mm tt}", editor: dateTimeEditor, width: "100px" }, { field: "EndDate", title: "End Date", format: "{0:MM-dd-yyyy hh:mm tt}", editor: dateTimeEditor, width: "100px" }, { field: "Active", title: "Active", template: "<input type=\"checkbox\" />", width: "80px" }, { command: ["edit", "destroy"], title: " ", width: "110px" }], groupable: false }); } function onEdit(e) { $(e.container).parent().css({ width: '600px', height: '400px' }); // set maxLengths e.container.find("input[name=AuctionName]").attr("maxlength", 10); } function dateTimeEditor(container, options) { $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>') .appendTo(container) .kendoDateTimePicker({}); } function textareaEditor(container, options) { $('<textarea data-bind="value:' + options.field + '" style="width:400px;" rows="4" ></textarea>') .appendTo(container); }
Denitsa
Telerik team
answered
on
30 Mar 2020
1 answer
4.9K+ views
Hello,
First let me start by saying thanks for your previous help on these forums...they got me past a blocking issue and everything is working now...so there's the good news.
The bad news is that even though everything is working...there are some visual glitches that I can't figure out. The worst of those being whenever I add a new row into my grid...on this particular example I have 2 DropDownLists for selecting the values to add in for the new row. They function perfectly, but once I select a value and move onto the next column...the DropDownList and the selected value for it disappears...the value is still there in the new row, because when I click Save and look at the Controller Action, everything is coming across perfectly and the data is added into the database with no problems...also after I click save...the columns show the values as they should...the DropDownLists are disappearing only when adding a new row. I've attached some pictures for reference and I'll include code snippets for my grid and dropdownlist.
In the attached pictures...notice that the columns have the little red triangle in the upper left to note that there's a new value contained...but how when I move onto the next column the DropDownList and it's selected value are hidden...
Grid View:
@using TPOReporting@{ ViewBag.Title = "Server Switch Feature Defect Maintenance"; Layout = null;}<script> function grid_error(e) { if (e.errors) { var message = "There are some errors:\n"; // Create a message containing all errors. $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); // Display the message alert(message); // Cancel the changes var grid = $("#ServerSwitchFeatureDefectGrid").data("kendoGrid"); grid.cancelChanges(); } }</script><div> <h2>Server Switch Feature Defects</h2> <hr size="3" /></div><div> @(Html.Kendo().Grid<ServerSwitchFeatureDefectModel>() .Columns(c => { c.Bound(ssfd => ssfd.FeatureDefectID) .ClientTemplate("#:FeatureDefectName#") .EditorTemplateName("FeatureDefectDropDownListTemplate") .Title("Feature Defect"); c.Bound(ssfd => ssfd.ServerSwitchTestStatusID) .ClientTemplate("#:ServerSwitchTestStatusName#") .EditorTemplateName("ServerSwitchTestStatusDropDownListTemplate") .Title("Server Switch Test Status"); c.Bound(ssfd => ssfd.BugID) .Title("Bug ID"); c.Bound(ssfd => ssfd.LastUpdate) .Title("Last Update"); c.Command(cmd => { cmd.Destroy(); }); }) .DataSource(ds => ds .Ajax() .Create(c => c.Action("AddServerSwitchFeatureDefect", "ServerSwitchFeatureDefect")) .Destroy(d => d.Action("RemoveServerSwitchFeatureDefect", "ServerSwitchFeatureDefect")) .Events(e => e.Error("grid_error")) .Model(m => { m.Id(s => s.ID); m.Field(s => s.ID).Editable(false); }) .Read(r => r.Action("GetServerSwitchFeatureDefects", "ServerSwitchFeatureDefect")) .Update(u => u.Action("UpdateServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))) .Editable(e => e.Mode(GridEditMode.InCell)) .HtmlAttributes(new { style = "height:300px;" }) .Name("ServerSwitchFeatureDefectGrid") .Scrollable() .Selectable() .Sortable() .ToolBar(t => { t.Create(); t.Save(); }))</div>FeatureDefectDropDownListTemplate:
@using TPOReporting@(Html.Kendo().DropDownListFor(m => m) .DataSource(ds => { ds.Custom() .Type("aspnetmvc-ajax") .Transport(t => { t.Read("GetFeatureDefects", "FeatureDefect"); }) .Schema(s => { s.Data("Data") .Total("Total"); }); }) .DataTextField("Name") .DataValueField("ID") .Name("FeatureDefectID") .OptionLabel("Select Feature Defect..."))
ServerSwitchTestStatusDropDownListTemplate:
@using TPOReporting@(Html.Kendo().DropDownListFor(m => m) .DataSource(ds => { ds.Custom() .Type("aspnetmvc-ajax") .Transport(t => { t.Read("GetServerSwitchTestStatus", "ServerSwitchTestStatus"); }) .Schema(s => { s.Data("Data") .Total("Total"); }); }) .DataTextField("DisplayName") .DataValueField("ID") .Name("ServerSwitchTestStatusID") .OptionLabel("Select Server Switch Test Status..."))
The controllers are all working perfectly so I don't think I need to include those source files, but I will gladly do it if requested. They all pass back Model objects as Json via ActionResults. Pretty standard stuff.
Alex Hajigeorgieva
Telerik team
answered
on
30 Mar 2020
1 answer
326 views
I have a grid with 5 columns, 4 of which are set to autoFitColumn. When in the normal view, they are behaving as expected - resizing to fit the needs of the text contained in them.
When I export the view to a PDF though, it is completely minimizing the autofit columns down to a tiny size. When I apply the autoFitColumn to the grid as a whole, the columns are not necessarily auto-fitting, instead having parts of text cut off on the longer columns, while leaving the other smaller columns with a bunch of white space.
Attached image shows what I'm trying to say here. What I'm trying to get is those 4 columns to be autoFit and still show up properly when exported to PDF. OR for the "all columns autofit" to stop giving all the whitespace to the small columns so that it isn't cutting off the text of the larger ones.
Thanks
Ivan Danchev
Telerik team
answered
on
30 Mar 2020
3 answers
140 views
Hello there,
is it possible to translate the functions of the spreadsheet? E.g. =SUM( ), =SUMPRODUCT( ), etc...
Thank you!
Aleksandar
Telerik team
answered
on
30 Mar 2020
8 answers
1.7K+ views
Hi!
I want to show and hide the editor based on the dropdown selection or selected option in a select box using the jQuery and PHP.
Also when I select the "text/plain" from dropdown list I want to hide the editor and show the textarea and for "text/plain" I want to show the editor and hide the textarea.
$editor = new \Kendo\UI\Editor('content');$editor->resizable(true);$deserialization = new \Kendo\UI\EditorDeserialization();$custom = new \Kendo\JavaScriptFunction($(function() { $(\"#content\").data(\"kendoEditor\").wrapper.hide(); }););$deserialization->custom($custom);$editor->deserialization($deserialization);if ($mimeTag == 'text/html') { print_r('show editor');} elseif ($mimeTag == 'text/plain') { print_r('show textarea');} else {//hide the textarea or editor
$editor->deserialization($deserialization); print_r('hide');} $dropDownList = new \Kendo\UI\DropDownList('dropdownlist');$dropDownList->dataTextField('mimeTag') ->dataValueField('value') ->dataSource(array( array('text' => 'text/html', 'value' => 'Html'), array('text' => 'text/plain', 'value' => 'Text') )) ->select('onTADropDownSelect');
function onTADropDownSelect(e) { var value = e.sender.dataSource.options.data; var content = $('#content').data('kendoEditor'); for (var i=0; i < value.length; i++) { if (value[i].value != 'Text'){ $(function() { $('#content').data('kendoEditor').wrapper.hide(); }); } else { $(function() { $('#content').data('kendoEditor').wrapper.show(); }); } if (value[i].value != 'Html'){ $(function() { $('#content').data('kendoEditor').wrapper.hide(); }); } else { $(function() { $('#content').data('kendoEditor').wrapper.show(); }); } } };echo $dropDownList->render();echo $editor->render();
Ivan Danchev
Telerik team
answered
on
30 Mar 2020
2 answers
186 views
Hello,
I have a problem when I'm trying to bind my data to a datasource with remote. If I bind it inline everything is fine and my chart looks like the first attached file. But with remote I get something like the second attached file.
The data I'm using for inline binding is this: var data = [{"Draft": 100, "Published": 200,"Deactivated": 50,"ChangeByVendor": 20}];
And the Data I receive from my endpoint with remote binding is following: "{\"Draft\": 100, \"Published\": 200,\"Deactivated\": 50,\"ChangeByVendor\": 20}"
The series field in my chart looks like this:
series: [{ name: "@T("Pim.Product.Enum.Published")", field: "Published", color: "#48b159", labels: { visible: true, background: "", position: "center", template: '#if (value > 0) {# #=kendo.format("{0:p}", percentage)# #}#' } }, { name: "@T("Pim.Product.Enum.Draft")", field: "Draft", color: "#f4a623", labels: { visible: true, background: "", position: "center", template: '#if (value > 0) {# #=kendo.format("{0:p}", percentage)# #}#' } }, { name: "@T("Pim.Product.Enum.Deactivated")", field: "Deactivated", color: "#f42323", labels: { visible: true, background: "", position: "center", template: '#if (value > 0) {# #=kendo.format("{0:p}", percentage)# #}#' } }, { name: "@T("Pim.Product.Enum.ChangeByVendor")", field: "ChangeByVendor", color: "#f42323", labels: { visible: true, background: "", position: "center", template: '#if (value > 0) {# #=kendo.format("{0:p}", percentage)# #}#' } }],
For me, I don't understand why i get two so different result with inline and remote. What am I missing here? I would love to get the chart to look like the inline result but with a remote binding. I hope you can help me with that.
Best regards,
Dominik
Nikolay
Telerik team
answered
on
30 Mar 2020
1 answer
427 views
Dear Support,
Is there are any options to lazy load the sheets as my excel sheet is large enough and browser gets hanged. Do i missing something or any workaround for that.Thanks in advance.
Veselin Tsvetanov
Telerik team
answered
on
30 Mar 2020
