Hi I have the following:
#(Html.Kendo().NumericTextBoxFor(e =>e.Cost)
.HtmlAttributes(new { style = "width: 80px;height: 15px;font-size: 11px;" })
.Format("{0:c}")
.Deferred()
.Decimals(2)
.Enable(true)
Spinners(false))
I would like to know how I can read the value entered. I have tried this:
alert($('#Cost').data('kendoNumericTextBox').value());
but I received this error:
JavaScript runtime error: Unable to get property 'value' of undefined or null reference
Can you please help? Thanks.
Related
I need to create a more advanced method of adding new elements to a kendo grid, so in short I have replicated the following example as it does exactly what I needed:
https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/window/KendoWindow-Ajax-Form
And it works just fine. Only difference is the new row is added in it's correct spot in the grid, and not on the top as per usual. How can I, using the example linked to, place the new row on the top?
(I'm thinking it's not necessary to show my code here as it very closely resembles the code given in the link above)
So If you want to add a row up top I am thinking you could use a custom template. I may not be very clear on what you are doing but , I will attempt to help you.
Here is the grid in the code:`
#(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Message).EditorTemplateName("MessageEditor");
}
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("GetOrders", "OrdersData"))
)
)`
Then write the template like this:
<script type="text/x-kendo-template" id="MessageEditor">
<div class="k-header k-grid-toolbar">
<div style="display: inline-block; font-size:1.25em; padding:
</div>
</div>
</script>
Well this may not be the best solution , however it is the only way I know to create a custom column in a Kendo grid
Ended up finding the solution myself eventually. Going by the example in the link I made in the original post, this is what I did:
Firstly when a new "order" is made, I make sure that the model returned in the "Create" method in OrdersDataController has an ID from when the model is added to the DB.
So when this part gets executed in "_OrdersCreate.cshtml":
#if (Model != null && ViewData.ModelState.IsValid)
{
<script>
closeCreatePopup();
</script>
}
I send information on the new Order created. So to that end I have modified "closeCreatePopup()" to handle arguments.
So for the finished results I will just use a piece of code from my own project, the following is my implementation of "closeCreatePopup()":
function closeCreateEmployeeWindow(name, rHPersonID, personID, organizationID) {
if (name !== undefined
&& rHPersonID !== undefined
&& personID !== undefined
&& organizationID !== undefined) {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
grid.dataSource.sync();
}
var wnd = $("#createEmployeeModal").data("kendoWindow");
wnd.refresh({ url: '#Url.Action("CreateEmployee", "Employee", new { Area = "Administration" })' });
wnd.close();
}
The important part is this:
var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
grid.dataSource.sync();
What is happening here is I use the "insert" method from the grid, and add a new object. "Insert" inserts the new object to the very top of the grid. Remember to call the "sync" method right after.
By doing it like this, the normal "create" method built into the grid is replicated.
I'm trying to use the Kendo Mvc Grid as a Mvc EditorTemplate like so.
ViewModel.cs
public class ViewModel{
...
public List<EditorViewModel> Lines{get;set;}
...
}
EditorViewModel.cs
public class EditorViewModel{
...
public string Text{get;set;}
...
}
View.cshtml
#model ViewModel
<form>
...
#Html.EditorFor(m => m.Lines, "Grid")
...
</form>
EditorTemplates/Grid.cshtml
#Model IEnumerable<EditorViewModel>
#Html.Kendo().Grid<EditorViewModel>().BindTo(Model)
...
.Columns(col => {
col.Bound(m => m.Text)**.EditorTemplate("Text.Grid");**
})
.Editable(g => g.Enabled(true).Mode(GridEditMode.InCell))
...
)
The Grid is displayed correctly and is editable as excepted, but when I'm leaving the edit mode a javascript error is thrown.
Uncaught TypeError: Cannot read property 'Text' of undefined
at eval (eval at getter (kendo.all.js:2041), <anonymous>:3:21)
at init.set (kendo.all.js:8149)
at init.change (kendo.all.js:8930)
at init.f (jquery-2.2.4.min.js:2)
at init.trigger (kendo.all.js:124)
at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (<anonymous>:587:33)
at init._change (kendo.all.js:35754)
at init._blur (kendo.all.js:35719)
at init._focusout (kendo.all.js:35770)
at HTMLInputElement.f (jquery-2.2.4.min.js:2)
Is it possible to use a KendoGrid as Mvc EditorTemplate?
And if it is possible what am I doing wrong?
UPDATE:
If found a solution for this problem.
Changes made is with bold text.
In the Text.Grid.cshtml you add this line
#{
ViewData.TemplateInfo.HtmlPrefix = string.Empty;
}
this way the property prefix is removed
My kendo multiselect control as displays below clears the selected values on page submit. When i submit the page and it contains validations errors, the selected items in the multiselects get lost. Even though its gets fill in the HttpPost method of the controller. Please help me find a solution for this behaviour.
#(Html.Kendo().MultiSelectFor(m => m.GemeentesIds)
.HtmlAttributes(htmlAttrMultiselect)
.DataTextField("Name")
.DataValueField("Id")
.Placeholder(Model.Disabled ? "" : "Selecteer gemeentes indien van toepassing...")
.Value(Model.Gemeentes)
.AutoBind(false)
.DataSource(source => {
source.Read(read => {
read.Action("GetGemeentes", "General").Data("GemeenteFilter").Type(HttpVerbs.Post);
})
.ServerFiltering(false);
})
)
Controller:
if (model.GemeentesIds != null)
model.Gemeentes = _organisatorischeEenheidRepository.GetGemeentesByIds(model.GemeentesIds);
Try this and see if it helps. Also assign a Name attribute using Name() method. In your case, I think it should be Gemeentes.
So your multi-select code would look like:
#(Html.Kendo().MultiSelectFor(m => m.GemeentesIds)
**.Name("Gemeentes")**
.HtmlAttributes(htmlAttrMultiselect)
.DataTextField("Name")
.DataValueField("Id")
.Placeholder(Model.Disabled ? "" : "Selecteer gemeentes indien van toepassing...")
.Value(Model.Gemeentes)
.AutoBind(false)
.DataSource(source => {
source.Read(read => {
read.Action("GetGemeentes", "General").Data("GemeenteFilter").Type(HttpVerbs.Post);
})
.ServerFiltering(false);
})
)
Source link which helped me resolve a similar issue:
http://www.telerik.com/forums/multiselect-and-form-not-sending-values-back
I have a Telerik grid that is displayed a list of users. In my database, I have a bit field that determines if a user is priority or not. I am having an issue displaying it as a checkmark in Telerik window. It always come up as a drop down. I was able to get it to display as textbox; however, this option does not allow the user to manually group according to priority. The second way that I tried is failed and saying that 'CS1660: Cannot convert lambda expression to type 'string' because it is not a delegate type' see sample code below.
//the below example works fine, but it won't allow the user to sort. The automatic sort option is not available since it is an template.
#* columns.Template(
#<text>
<input type="checkbox" name="prioprity" id="chkPriority" #(item.Users.PriorityUser == true ? "checked" : "unchecked") disabled="disabled"/>
</text>)
.Width(60)
.Title("Priority User");*#
//The below example should allow sorting. However, it throwing an exception 'CS1660: Cannot convert lambda expression to type 'string' because it is not a delegate type'
columns.Bound(x => x.Users.PriorityUser).Width(50)
.ClientTemplate(
#<text>
<input type='checkbox' name='prioprity' id='chkPriority' #(item.User.PriorityUser == true ? "checked" : "unchecked") disabled='disabled'/>
</text>
).Title("Priority User")
//This attempt displays the data, but it is showing as a dropdown.
columns.Bound(x => x.Users.PriorityUser).Width(50)
.ClientTemplate("<input type='checkbox' name='prioprity' id='chkPriority'#(item.Users.PriorityUser == true ? 'checked' : 'unchecked') disabled='disabled'/>"
).Title("Priority User");
Any help or suggestions would be greatly appreciated.
The issue has been resolved.
columns.Bound(x => x.Users.PriorityUser).Width(50) works just fine after I deleted the .edmx file and recreated it. Previously, I was simply doing an update from database to update the .edmx file.
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.AirlineCode).Title("Airline");
columns.Bound(p => p.SegmentInfo[0].FareClass).Title("Fare Class");
}
.ClientRowTemplate(
"<tr>"+
"<td style =\"width: 130px\"><img src=\"/Content/themes/base/image/#=AirlineCode#.jpg\"/><span> #=AirlineName#</span></td>" +
"<td><div class=\"ClassType\"> //#=SegmentInfo[0].FareClass//# </div></td>"+"</tr>"
)
How should I write //#=SegmentInfo[0].FareClass//# section of could to get the value from Model Property SegmentInfo ,which is an class object and I need to access it's Property called FareClass which is string object.
Try to give the proper syntax to access this kind of object value.
Thanks in advance to my helper.
I am not sure how well it will work with an array but try.
.ClientRowTemplate(
"<tr>"+
"<td style =\"width: 130px\"><img src=\"/Content/themes/base/image/#=AirlineCode#.jpg\"/><span> #=AirlineName#</span></td>" +
"<td><div class=\"ClassType\"> #=SegmentInfo[0].FareClass# </div></td>"+"</tr>"
)
(Remove the // completely)