I have a Kendo Pivot Grid that has only one row, one column and one measure. I have it set up to display the dates on the top of the grid, the time intervals down the left side (rows) and the "Value" column should be the grid cell values. I am able to get the dates to display across the top and I am able to get the measure to display in the grid but I am not able to get the Time intervals to display down the left side as a row. My model is set up exactly as the data is in SQL (ForecastDate - Date, Forecast Interval - TimeSpan, Value - Decimal). As seen in the Pivot Grid Screen Shot I am getting [object Object] next to the Forecast Interval. I need to get the interval values to display. How can I do this?
SQL Data
Pivot Grid Screen Shot
#(Html.Kendo().PivotGrid<BluePrint.Models.ForecastFactor_Select_Result>()
.Name("arpPivot")
.ColumnWidth(75)
.Height(300)
.DataSource(ds => ds
.Ajax()
.Transport(transport => transport.Read(r => r.Action("Interval_PivotGridRead", "ForecastFactorDataMaintenance").Data("pivotParameters")))
.Schema(s => s
//.Model(m => m.Field(f => f.ForecastDate))
.Cube(c => c
.Dimensions(d =>
{
d.Add(m => m.ForecastDate).Caption("Forecast Date");
d.Add(m => m.ForecastInterval).Caption("Forecast Interval");
})
.Measures(m =>
{
m.Add("Value").Field("Value").AggregateName("average");
})
)
)
.Columns(c =>
{
c.Add("ForecastDate").Expand(true);
})
.Rows(r =>
{
r.Add("ForecastInterval").Expand(true);
})
.Measures(m =>
{
m.Values(v =>
{
v.Add().Name("Value").Type("Value");
});
})
.Events(e => e.Error("onError"))
)
.ColumnHeaderTemplate("#= columnHeaders(tuple, member) #")
//.RowHeaderTemplate("#= rowHeaders(tuple, member) #")
// .DataCellTemplate("<span style='float:right' class='#= getDataCellClass(columnTuple, rowTuple, dataItem, measure) #'>#= (dataItem.value!='') ? kendo.parseFloat(kendo.toString(dataItem.value,'n2')):'-' #</span>")
//.DataCellTemplate("<span style='float:right' class='#= getDataCellClass(columnTuple, rowTuple, dataItem, measure) #'>#= (dataItem.value!='') ? (showtotal(rowTuple,dataItem)? kendo.parseFloat(kendo.toString(dataItem.value,'n2')):'-'):'-' #</span>")
)
Related
I have used kendo grid in my MVC project. In the my grid i have 3 columns e.g. city, state, country columns. These 3 columns in grid have combox to select value in the grid. But here i am facing an issue, for the first time when page is getting loaded, i am able to view combobox in the columns but after page refresh combobox are getting disappeared and replaced by textbox. Any suggestion would be helpful.
For reference posting grid code.
#(Html.Kendo().Grid<ProjTest.Models.Test>()
.Name("Test")
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
var c = columns.Bound(column.ColumnName);
c.Title(column.Caption);
if ((column.DataType.Name) == "String") c.Filterable(ftb => ftb.Operators(o => o.ForString(s => { s.Clear(); s.IsEqualTo("Is equal to"); s.IsNotEqualTo("Is not equal to"); s.StartsWith("Starts with"); s.Contains("Contains"); s.DoesNotContain("Does not contain"); s.EndsWith("Ends with"); s.IsNotNull("Is not empty"); s.IsNull("Is empty"); })));
switch (column.ColumnName)
{
case "City":
c.EditorTemplateName("_City");
break;
case "State":
c.EditorTemplateName("_State");
break;
case "Country":
c.EditorTemplateName("_Country");
break;
}
}
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
var field = model.Field(column.ColumnName, column.DataType);
}
})
.Action("Read", "Test")
.Data("gridParam")
)
)
.Events(events => events
.DataBound("onDataBound")
.Edit("onEdit")
)
)
Make sure to call EditorTemplateName in 'onEdit' function i.e you need to re-create the templates on every edit. Please refer the documentation here
I have a Kendo MVC hierarchy grid. My example is simplified for readability.
#(Html.Kendo().Grid<LeagueViewModel>(Model.Leagues)
.Name("grid_#=LeagueTypeId#")
.Columns(columns => { })
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New League(Window)");
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("LeagueEdit")
.Window(w =>
{
w.Position(p => p.Top(200)); // position not working, need to center more vertically
w.Width(800);
}
)
)
.Events(e => e.Edit("leagueEdit"))
.DataSource(dataSource => dataSource
.Server()
.Model(model =>
{
model.Id(p => p.LeagueID);
model.Field(l => l.strSportId).DefaultValue("#=SportId#"); // set default value with parent grid data
model.Field(l => l.strLeagueTypeId).DefaultValue("#=LeagueTypeId#"); // set default value with parent grid data
}
)
.Read(read => read.Action("Bound_League_Read", "Configuration", new { _leagueTypeId = "#=LeagueTypeId#" }))
.Create(create => create.Action("League_Create", "Configuration"))
)
)
Here is my javascript event handler. When observing the e.model object from the handler after the create button is clicked i have the default values i set earlier with in the grid with DefaultValue("#=ParentProperty#").
function leagueEdit(e) {
// setting these with default value on model,
// had to have string variants to pass over because template expression syntax
e.model.SportId = parseInt(e.model.strSportId);
e.model.LeagueTypeId = parseInt(e.model.strLeagueTypeId);
}
LeagueEdit.cshtml
When my popup template opens, the model has no data. How do i get data into the model? I have elements in the popup editor that need the values from the parent grids.
<p>sport: #Model.SportId</p> <!-- value does not carry over -->
<p>leaguetype: #Model.LeagueTypeId</p> <!-- value does not carry over -->
In your Edit event try to find the control in popup using its Id and set the value. For example in the below code am finding a datepicker inside my popup and setting its value to the model property.
function LeagueEditEdit(e) {
var val1 = e.container.find("input[name=CallDate]").data("kendoDatePicker");
val1.value($('#CallDate').attr('value'));
e.model.CallDate = val1._value;
}
I have a MVC Kendo UI Grid as follows
#(Html.Kendo().Grid<SomeViewModel>()
.Name("someGrid")
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add Entry");
toolbar.Save();
})
.Columns(columns =>
{
columns.Bound(p => p.Name).ClientTemplate(#"<input type='radio' name='SomeradioName'> #= Name # </input>");
columns.Bound(p => p.DateCreated).Format("{0:dddd dd MMMM yyyy}");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e => e.DataBound("onDataBound"))
.Events(e => e.Edit("onDataEdit"))
.Selectable(selectable => selectable.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Scrollable()
.Filterable()
.HtmlAttributes(new {style = "height:200px;"})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Batch(false)
.Events(events => events.Error("onError"))
.Model(model =>
{
model.Id(s => s.Id);
model.Field(s => s.Name).Editable(true);
model.Field(s => s.DateCreated).Editable(false);
})
.Read(read => read.Action(...))
.Create(create => create.Action(...))
.Update(create => create.Action(...))))
I want to disable In cell editing for already added entries.
So, couple of things I tried
Approach# 1:
<script>
function onDataEdit(e) {
if (!e.model.isNew()) {
var grid = this;
grid.closeCell();
}
}
</script>
Apparently this breaks the radio button selection event (.change event) which is wired up in OnDataBound.closeCell screws it up and change event no longer gets fired up
Approach# 2:
In OnDataEdit event do
$("#Name").attr("readonly", true);
This is also fine but again Change event is no longer fired on radio button click until the Cancel changes command is clicked.
Approach# 3
There seems to be another way of doing it by disabling enable as given in this link here: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit
if (!e.model.isNew()) {
// Disable the editor of the "id" column when editing data items
var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
numeric.enable(false);
}
How do I do something similar in my case ? Couldn't get data resolved.
Any other ways ?
Update
Approach# 4
e.container.find("input[name=Name]").each(function () { $(this).attr("disabled", "disabled") });
var grid = this;
grid.cancelChanges();
This does not break the change event. However, the experience is not that great. If adding new record, if the user presses any other row the changes are canceled. They have to add new record and either hit Save or click anywhere except grid rows
You can make the columns readonly on edit, using Approach 3
function edit(e) {
if (e.model.isNew() == false) {
$('[name="Name"]').attr("readonly", true);
}
}
Also, your template doesnt have an id=Name, hence I doubt below will work for you. Instead find by name attribute as above
$("#Name").attr("readonly", true);
Refer this link for more information
I have chosen approach 4 which I updated. IF anyone has any better ideas feel free to share.
I am using two Telerik MVC grids and adding selected value of one Grid to other in following way
var dataItem = this.dataItem($(e.currentTarget).closest("tr")); // This is selected row of Grid One
// Now i am going to add this to second Grid
var grid = $("#SecondGrid").data("kendoGrid");
grid.dataSource.add(dataItem);
I want to display combobox for each row of second grid. I have successfully added that and executing JS function on DataBound, but this adds combo box to only first row
// Hows second Grid looking
#(Html.Kendo().Grid<MyModel>()
.Name("SecondGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.ForeName).Title("First Name");
columns.Bound(p => p.SurName).Title("Last Name");
columns.Bound(p => p.Dept);
columns.Bound(p => p.Dob).Format("{0:dd/mm/yyyy}");
columns.Bound(p => p.Relationshiptype).Title("Relationship").Template(#<text></text>).HtmlAttributes(new { #class = "templateCell" }).ClientTemplate(
Html.Kendo().ComboBox()
.Name("Relationshiptype")
.Placeholder("Select relationship...")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Husband", Value = "1"
},
new SelectListItem() {
Text = "Wife", Value = "2"
},
new SelectListItem() {
Text = "Other relative", Value = "3"
},
new SelectListItem() {
Text = "Other non relative ", Value = "4"
}
}).ToClientTemplate().ToString());
columns.Command(command => command.Custom("Deselect").Click("removePupil")).Width(180);
})
.Events(ev => ev.DataBound("initCombo"))
)
// Here is my InitCombo function
function initCombo(e) {
$(".templateCell").each(function () {
eval($(this).children("script").last().html());
});
}
Please help me sort this issue. Secondly how would i be able to traverse and get selected value of combo along with other row values .
Thanks
I suggest you creating template only by using the Template method. Like in Kendo documentation—How to Customize the Way Properties Are Displayed in Grid-Bound Column.
Next, note that you should use a unique ID for each widget created on the page. Thus, the Name value should be unique for each row. By assigning it to a string, the DOM elements rendered will have the same ID.
More detailed response with example provided is available in a forum thread, where the same questions is asked—Initialize Combobox for each row of Telerik MVC Grid
I have a Kendo grid that has a static size of 6 rows, the data comes dynamically from remote source, each property of data being bound to a specific column.
The grid should always show 6 rows even if the rows are empty (No data to show on them), I achieved this by setting empty data to the rows in model side, in case there was less than 6 data items.
I can add, edit and remove data per each grid-row, and the grid being static in size I would like to support functionality where one can add new data item to row 1, and for example row 5 so that when the data is reload it always shows the data on those exact rows. The default functionality in Kendo-grid would be that it shows the data which was added to row 5 in row 2 after the reload.
Is there a way of forcing Kendo to put data to a specific row in grid, even if there might be empty rows before and after this one row? I understood that the Grid has uid for rows, which are changed after reload thus being unuseful in this case. The grid does not have a template, it's simply defined with Html.Kendo()-bindings.
Data binding:
#(Html.Kendo()
.Grid<DataStructure>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.ListActionIndex)
.Width(100)
.Sortable(false);
columns.Bound(o => o.Action)
.Filterable(false)
.Width(100)
.Sortable(false);
columns.Bound(o => o.Status)
.Width(40)
.EditorViewData(new { Width = 40 })
.HtmlAttributes(new { title = "test" });
})
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(source =>
{
source.Ajax()
.Read(read => read.Action("GetData", "DataStructure").Data("additionalData")).PageSize(6)
.Model(model =>
{
model.Field(o => o.Action).Editable(false);
model.Field(o => o.Status).Editable(false);
model.Field(o => o.ListActionIndex).Editable(false);
})
.Model(model => model.Id(o => o.ListActionIndex));
})