I have a grid bound to a ViewModel, and the 3rd column is bound to an empty property. This data did not come from a database,so there is no foreign key relationship, in fact there's no database involved at all. In the 3rd column I would like a drop down. This would be the same dropdown in each row of the grid. That dropdown should contain a list of properties (List<string>). When a value is selected,that specific item should be removed from the dropdown list on subsequent rows.
So how can I go about building such a beast? It's easy enough to do in a WebForm, but alas using MVC and these Kendo components has left a real bad taste in my mouth. It seems as if everything has to be gotten via an AJAX call, or must call into some action, or must be bound somewhere along the line; and nothing seems to work out of the box.
I'm using this to map a CSV file to an object. So using the file uploader action, I parse the column headers out of the CSV file, and create a List<CVSColumn> that is actually a property of my CSVColumnsViewModel:
namespace
FileUploader_Mapper.Models
{
public
class
CSVColumn
{
public
int
ColumnNumber {
get
;
set
; }
public
string
ColumnName {
get
;
set
; }
public
string
MappedTo {
get
;
set
; }
}
public
class
CSVColumnsViewModel
{
public
string
CSVFile {
get
;
set
; }
public
List<CSVColumn> Columns =
new
List<CSVColumn>();
public
List<
string
> Properties {
get
;
set
; }
public
CSVColumnsViewModel()
{
Properties =
new
List<
string
>
{
"FirstName"
,
"LastName"
,
"SSN"
,
"Address1"
,
"Address2"
,
"City"
,
"State"
,
"Zip"
};
}
}
}
In the first column of the grid is the ColumnNumber property, the second column is the ColumnName property, and the 3rd column is empty, but is mapped to the MappedTo property. What I want to do is show the list of Properties in a dropdown in the third column so the user can choose which property the current column would map to. Then in the next row, it would only show available properties for the additional columns to map to.
I hope this is making sense...
Here's what I have in my cshtml file
@using FileUploader_Mapper.Models
@model CSVColumnsViewModel
@{
ViewBag.Title = "Result";
}
<
style
>
.k-grid td {
line-height: 2em;
padding: 0 0 0 1em;
}
</
style
>
<
h2
>Result</
h2
>
<
p
></
p
>
@(Html.Label("lblMisc", "Columns from CSV File: " + Model.CSVFile))<
br
/>
@(Html.Kendo().Grid(Model.Columns)
.Name("csvGrid")
.HtmlAttributes(new { style = "width: 650px" })
.Columns(col =>
{
col.Bound(c => c.ColumnNumber).Width(125).Title("Column Number");
col.Bound(c => c.ColumnName).Title("Column Name");
col.Bound(c => c.MappedTo).Title("Mapped To");
})
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Model(m =>
{
m.Id(c => c.ColumnNumber);
m.Field(c => c.ColumnName).Editable(false);
m.Field(c => c.MappedTo).DefaultValue(Model.Properties);
})
)
.Pageable()
)
I really don't know how to proceed and could use some guidance.
Hello,
I'm trying to implement a kendo grid with server side sorting and filtering. I want to be able to sort using the DataSourceRequest.Sort object by more than just the member type and sort direction.
I essentially want the equivalent of the following IEnumerable OrderBy Method
queryList.OrderBy(x => x.SomeMember == SomeConstantValue)
Is there a way to do this by using the SortDescriptor Object?
Any help would be appreciated
When I add an MVC Spreadsheet using this very simple code (in a View page of an MVC app)
@{
ViewBag.Title =
"Index"
;
}
<h2>Index</h2>
@{
var path = Server.MapPath(
"~/Content/CSVFiles/SUNRISE06142016.csv"
);
var workbook = Telerik.Web.Spreadsheet.Workbook.Load(path);
}
<div style=
"background-color: coral; width: 500px; height: 500px; border-style: double"
>
@(Html.Kendo().Spreadsheet()
.Name(
"spreadsheet"
)
.BindTo(workbook))
</div>
The result page is not a spreadsheet, to be sure... I've attached a screen shot of the page without the spread sheet, and then with the spreadsheet. What gives here?
Basically what I'm wanting to do is to upload a CSV file, of any format and load it into a spreadsheet component. Ultimately this will be for users to map their CSV uploads to an object for parsing. Each and every CSV file will most likely be different.
Is it possible to add a bootstrap badge to a tab title?
I want to highlight the number of records in a tab panels, which is not initially selected. Ideally, it would be something like:-
<
span
class
=
'badge'
>10</
span
>
Where the number would come from a variable (initially from the view bag).
Is this possible at all?
I've got a sub-grid, which needs to allow records to be inserted, dependant on a value in the parent record.
I've got an onBound handler, which gets passed the subGrid name, but what do I need to do to hide the create button in the toolbar?
The toolbar is defined here:-
@(Html.Kendo().Grid<
SystemsHelpDesk.Models.View_Support_Action
>()
.Name("ActionGrid_#=LogID#")
.Events(e => e.Edit("onEdit"))
.Columns(columns =>
{
columns.Bound(o => o.ActionID).Title("ID");
columns.Bound(o => o.ActionDate).Title("Date").Format("{0:g}");
columns.Bound(o => o.CategoryDescription).Title("Category");
columns.Bound(o => o.ActionDesc).Title("Details");
columns.Bound(o => o.UserName).Title("User");
})
.ToolBar(commands => commands.Create().Text("Add Action"))
.Events(e => e.DataBound(@<
text
> function(e){onSubBound(e,"ActionGrid_#=LogID#",#=Resolved#)}</
text
>))
.Editable(editable => editable
.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
.Events(e => e.Error(@<
text
> function(e){subError(e,"ActionGrid_#=LogID#")} </
text
>).Sync("ActionSync"))
.Model(m => m.Id(p => p.ActionID))
.PageSize(10)
.Read(read => read.Action("RD_Actions", "Home", new { LogID = "#= LogID #" }))
.Create(create => create.Action("InsertAction", "Home", new { LID = "#= LogID #" }))
.Update(update => update.Action("UpdateAction", "Home"))
.Destroy(delete => delete.Action("DeleteAction", "Home"))
)
.Pageable(p => p.Refresh(true))
.ToClientTemplate()
)
I can pass the Grid name and the value of the Boolean field that determines if records should be able to be added, but I'm at a loss at how to hide the button. I have tried:-
function
onSubBound(e,gridName,Flag)
{
// alert(gridName);
//alert(Flag);
var
grid = $(document.getElementById(gridName)).data(
"kendoGrid"
);
$(grid).find(
"k-grid-toolbar"
).hide();
}
But this doesn't work.
How can I hide the button when I need to?
Thanks
Hello,
I use a PopupEdit Template with cascading DropDownLists and in th second DropDownList a serverfilter (see code)
the problem is, that the template is loaded on grid load and the second DropDownList does'nt work because the value of the
field $("#Fachgruppe_Version_ID").val() in the template is not set at this time...
robert
@(Html.Kendo().DropDownListFor(model => model.Fachgruppe_ID)
.DataTextField("Fachgruppe")
.DataValueField("Fachgruppe_ID")
.BindTo((IEnumerable) ViewData["Fachgruppe"])
.HtmlAttributes(new {style = "width:500px"})
.CascadeFrom("Sparte_ID")
)
@(Html.Kendo().DropDownList()
.Name("FG")
.HtmlAttributes(new {style = "width:100%"})
.OptionLabel("Select product...")
.DataTextField("Fachgruppe")
.DataValueField("Fachgruppe_ID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("FachgruppeVersion_Read", "Home")
.Data("filterFachgruppe");
})
.ServerFiltering(true);
})
.Enable(true)
.AutoBind(false)
.CascadeFrom("Sparte_ID")
)
<
script
>
function filterFachgruppe() {
return {
version_id: $("#Fachgruppe_Version_ID").val()
};
}
</
script
>
I have a Telerik MVC Grid and this has a popup editor for each row. The editor is configured like this:
.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("MyItemEditor"))
The "MyItemEditor" is a.cshtml file containing some controls, including a ComboBox.
I want to modify the combo box in a couple of ways:
(1) On focus it should automatically open its dropdown list of items.
(2) When the user presses the Backspace key, all the text in the combo entry field should be deleted (not just the last character).
I have managed to achieve these two things in a combo that is not inside a template, by running some jquery in the $(document).ready function to add extra events to the combo. But, when the combo is inside a template, the combo is not actually initialised until the popup is opened.
Am I tackling this in the wrong way? Is there an "OnLoaded" event of the combo that I can hook into? I can't find one.
Thanks
I'm trying to add an exploding function to my pie chart. I've been able to locate the follow javascript code to assist from the Kendo UI documentation:
seriesClick: function(e){
$.each(e.sender.dataSource.view(), function() {
// Clean up exploded state
this.explode = false;
});
// Disable animations
e.sender.options.transitions = false;
// Explode the current slice
e.dataItem.explode = true;
e.sender.refresh();
}
Using the MVC version I'm call the series click with:
.Events(events => events
.SeriesClick("explodingPie")
)
Along with the following Javascript:
function explodingPie(e) {
$.each(e.sender.dataSource.view(), function() {
this.explode = false;
});
e.dataItem.explode = true;
e.sender.refresh();
}
I'm unsure why
$.each(e.sender.dataSource.view(), function() {
isn't working properly.
Hello
I have a very weird bug. I have a page on MVC that displays two editors and gets passed a model with the value for both editors. The model is as follows:
public class BulletinsModel
{
[AllowHtml]
[Display(Name = "Some Bulletin")]
public string SomeBulletin { get; set; }
[AllowHtml]
[Display(Name = "Other Bulletin")]
public string OtherBulletin { get; set; }
}
I then, defined a view which receives this view model and maps it to two kendo editors.There is also some javascript code to make a post to update the information.
@model BulletinsModel
<
div
id
=
"settings"
>
<
div
class
=
"form-horizontal"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.SomeBulletin, new { @class = "col-md-6 text-left" })
@(Html.Kendo().EditorFor(m => m.SomeBulletin).Encode(false).Name("Some_Bulletin"))
@Html.LabelFor(m => m.OtherBulletin, new { @class = "col-md-6 text-left" })
@(Html.Kendo().EditorFor(m => m.OtherBulletin).Encode(false).Name("Other_Bulletin"))
</
div
>
</
div
>
</
div
>
My code for my action method that renders this view is as follows (nothing fancy):
[HttpGet]
public PartialViewResult Index()
{
ViewBag.ActiveSectionName = "Bulletins";
var bulletinModel = GetBulletinsModel();
return PartialView("_Bulletins",bulletinModel);
}
However, my issue is that after hitting the Index action a couple of times, the editors become non responsive and I cannot edit the information on them. This only happens on IE, as I have not been able to replicate the issue in other browsers.
On my form, I disabled dates. However, when a user manually keys in a date that is disabled, it seems to clear the input. This then gets passed on to my custom validation rules as a "" (empty string) instead of the date entered. Is there a way to prevent the datepicker from clearing its input when the user keys a disabled date in?