I have two checkboxes in a Kendo MVC Grid row and need some understanding as to how to set the dataitem property when they are clicked. I have been successful when there is one checkbox per row doing the following:
columns.Bound(p => p.bDelete).ClientTemplate("<
input
type
=
'checkbox'
name
=
'bDelete'
Id
=
'bDelete'
#= bDelete ?
checked
=
'checked'
: '' #
class
=
'chkbx'
/>")
.Width(70).HtmlAttributes(new { style = "text-align: center", title = "Delete Selected" });
<script>
// Any rows that get checked or unchecked after the form is loaded need
// to pass though this event to get the underlying record reconciled
$(
function
() {
$(
'#Grid'
)
.on(
'click'
,
'.chkbx'
,
function
(e) {
debugger;
var
checked = $(
this
).is(
':checked'
);
var
grid = $(
'#Grid'
).data().kendoGrid;
var
dataItem = grid.dataItem($(
this
).closest(
'tr'
));
// if we are in insert mode do not let the user check the delete checkbox
if
(dataItem.iProjectSequence == 0) {
e.preventDefault();
dataItem.set(
'bDelete'
,
false
);
return
;
}
dataItem.set(
'bDelete'
, checked);
dataItem.set(
'bModified'
,
true
);
dataItem.set(
'dirty'
,
true
);
SetRowsModifiedState();
SetPageMessage(
"Data Modified"
);
$(
"#New"
).prop(
"disabled"
,
true
);
$(
"#Cancel"
).prop(
"disabled"
,
false
);
});
})
</script>
The code above works for a row that has only one checkbox in it. How do I detect the underlying model value attached to the checkbox being clicked so that I can set *ONLY* that field?
Thanks
I have the following in a template <script type="text/x-kendo-tmpl" id="documentDetailsTemplate"></script>
@(Html.Kendo().MultiSelect()
.Name("otherParties")
.DataSource(ds =>
{
ds.Read("GetOtherParties", "Term", new { SPHostUrl = ViewBag.SPHostUrl });
})
.DataValueField("TermId")
.DataTextField("Label")
.AutoBind(false)
.HtmlAttributes(new { style = "width:100%" })
.Placeholder("Select Other Parties...")
.ItemTemplate("<
div
class=\"k-state-default term-label\">\\#= data.Label \\#</
div
><
div
class=\"k-state-default term-path\">\\#= data.Path \\#</
div
>")
.Value("#: OtherParties #")
.MinLength(3)
.Filter(FilterType.Contains)
.ToClientTemplate())
The OtherParties property is a List of classes as detailed in the code snippet below.
public
class
TermItem
{
public
Guid TermId {
get
;
set
; }
public
string
Label {
get
;
set
; }
public
string
Path {
get
;
set
; }
}
public
List<TermItem> OtherParties {
get
;
set
; }
The template is then passed with a dataItem in javascript using the code below.
var
documentList = $(
"#documentsList"
).data(
"kendoListView"
);
var
dataSource = documentList.dataSource;
var
document = dataSource.getByUid(documentList.select().attr(
"data-uid"
));
var
template = kendo.template($(
"#documentDetailsTemplate"
).html());
Have checked with Fiddler and the values are coming back correctly. Have debugged the JavaScript and the document object in the snippet above has the values in it.
The documentation at http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/multiselect/overview#pre-select-values-on-initial-load says that you need to select it with a List<class> object.
It's not pre-selecting the values when the template is generated.
Any ideas on what is the correct way to do this?
Hello,
I have one field in Connection model that user should be able to change - "MyConnectionField" in example below.
The thing is that this field can contain different types of data depending on other field in the model. When user clicks on connection in diagram and chooses Edit, dialog pops up with the editable field with label "MyConnectionField". How can I change this label depending on other field in the Connection model - "MyTypeField" in example below?
@(Html.Kendo().Diagram<Shape, Connection>()
...
.ConnectionsDataSource(d => d
.Model(m =>
{
m.Id(c => c.Id); m.Field(c => c.MyTypeField);
m.Field(c => c.MyConnectionField).Editable(
true
);
})
.Read(r =>
{
r.Action(
"MyAction"
,
"MyController"
);
})
)
.ConnectionDefaults(cd => cd
.Editable(e => e.Drag(false).Remove(false)
.Tools(t => {
t.Edit();
})
)
)
...
)
Using UI for MVC (Q1 2016)
@(
Html.Kendo().ComboBoxFor(m => m)
.Filter(FilterType.Contains)
.AutoBind(false)
.Placeholder("Choose Course")
.HtmlAttributes(new { style = "width:400px;" })
//Removed for brevity
)
The following width style in the HtmlAttributes above will cause the combobox dropdown button wrapper div to increase as a percentage of the entire combobox (ie. the div gets wider as the entire combobox gets wider.). Is this the native behavior when changing the width of the combobox? I also have not had this issue with any other widgets.
See attached png file.
I am using Kendo UI 2016.1.226, Windows 7 Enterprise SP 1, Google Chrome 51.0.2704.79 m, SQL Server 2012
I created a ListView for available report filters (Filter List), which loads from a stored procedure and uses the HTML ListView wrapper. On Filter List databound, I am dynamically creating 2 more listviews (Available items and Selected items) for each item in the primary ListView. When an item is selected from the primary, if no items are currently in the available list, the datasource is read from a stored procedure, passing the report filter ID, and returns a list of KeyIndex (int) and Value (string) items from various DB tables. These are supposed to be loaded in the Available ListView's databound event. However, there are no items in the datasource after return from the stored procedure call.
I suspect the issue is a JSON vs. OData format issue (see 12/5/2011 post here: http://www.telerik.com/forums/connect-grid-to-mvc-controller-method). I don't care about grouping, filtering, and sorting of the items, but it seems like I may need to send a request object to the controller in order to call ToDataSourceResult, which I'm guessing converts JSON to OData format. The Available datasource has AutoBind set to false, so that I can load only the report filters as needed. When I try to pass information in the request, I get the following error because there is no data to group, filter, or sort yet:
jquery.min.js:3 Uncaught TypeError: Cannot read property 'length' of undefined
var availableDataSource = listViewAvailable.dataSource;
var parameterMap = availableDataSource.transport.parameterMap;
var request = parameterMap({ filter: availableDataSource.filter(), group: availableDataSource.group(), sort: availableDataSource.sort() });
availableDataSource.transport.options.read.url =
"/ReportCategory/GetFilterValues?FilterID=" + dataItem.ReportFilterID + "&TplNum=" + @ViewBag.TplNum + "&request=" + request;
availableDataSource.read();
If I leave the parameterMap empty, my controller routine is called, the JSON data is populated and returned to the client, but the number of items in the datasource is 0:
var request = parameterMap({ });
public async Task<ActionResult> GetFilterValues([DataSourceRequest]DataSourceRequest request, int FilterID = 0, int TplNum = 0)
{
var url = string.Format("{0}{1}/{2}", GlobalVariables.ApiBaseUrl.Replace("api", "GetFilterValues"), FilterID, TplNum);
var jsonResult = await Request.GetSerializedJsonResult<FilterValues>(url);
IList listFilterValues = (IList)jsonResult;
return Json(listFilterValues.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}
Datasource definition:
filterDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "/api/GetFilterValues/" + filterRecord.ReportFilterID + '/' + @ViewBag.TplNum,
type: "GET",
dataType: "json"
},
},
schema: {
model: {
fields: {
KeyIndex: { type: "number" },
Value: { type: "string" }
}
},
data: function(data) { return data.value; },
total: function(data) { return data["odata.count"]; }
},
serverFiltering: true,
serverGrouping: true,
serverSorting: true
});
Available ListView:
idString = "Filters_1_" + filterIndex;
divString = '<div id="' + idString + '" class="filterlist1" style="display: none;"><h2>Available Values</h2></div>';
divStringInner = '<div class="filterlist1_inner"></div>';
$(divString).insertAfter('#ReportFilters');
$(divStringInner).insertAfter('#' + idString + ' h2').kendoListView({
dataSource: filterDataSource,
dataBound: onAvailableDataBound,
autoBind: false,
pageable: false,
selectable: selectableType,
template: kendo.template($('#' + templateName).html())
});
ListView item template (TBD being eventually replaced by the Value string in the datasource):
<script type="text/x-kendo-tmpl" id="options">
<div class="filter2">
<h3 value='0'>TBD</h3>
</div>
</script>
I saw something for SQL Server called FOR JSON AUTO that may help make the stored procedure OData compliant (https://msdn.microsoft.com/en-us/library/dn921897.aspx), but that is for SQL Server 2016 on. Any ideas?
public
JsonResult GetContainers()
{
List<Container> containers =
new
List<Container>();
containers.Add(
new
Container() { ContainerId = 1, ContainerName =
"Container1"
});
containers.Add(
new
Container() { ContainerId = 2, ContainerName =
"Container2"
});
return
Json(containers);
}
@(Html.Kendo().ComboBox()
.Name("TestContainerName")
.DataTextField("ContainerName")
.DataValueField("ContainerId")
.Filter(FilterType.Contains)
.DataSource(dataSource =>
{
dataSource.Read(read =>
{
read.Action("GetContainers", "Common");
});
})
.SelectedIndex(0)
)
I am using Kendo Grid and also using its Foreign Key column editing option.
When I build my project on local host, it seems everything is perfect.
However, when I publish it, it does not working as on my local host.
On my local, it is a dropdownlist but when I publish it, it seems like its a numeric textbox.
How can I fix this ?
Hi!
After a while, I was able to have a working EditorTemplate for a List<MyObject> type. I'm calling the Template using UIHint over the collection property n the parent ViewModel. The grid on the EditorTemplate is however complete Widget-based now. It is working with the data array woth matching properties as of the actual ViewModel. How do I map the final rows of a kendo grid to the Model?