I use a Kendo.UI MultiSelect in MVC
#(Html.Kendo().MultiSelect()
.Name("ADGroups")
.DataTextField("Name")
.DataValueField("Value")
.MinLength(3)
.Value(Model.SelectedADGroups)
.HtmlAttributes(new { style = "width:auto", id="ADGroupsList" })
.Filter(FilterType.Contains)
.DataSource(source => source.Read(read => read.Action("GetADGroups", "Edit"))
.ServerFiltering(true))
.Events(e => e.Change("onChange").DataBound("onDataBound"))
)
And now I would like to prevent from deleting some Items.
So I save the current values on DataBound-Event
function saveCurrent(multi)
{
multi._savedValues = multi.value().slice(0);
multi._savedItems = multi._dataItems.slice(0);
}
function onDataBound()
{
saveCurrent(this);
}
And OnChange I detect the difference between before and after.
function onChange()
{
var previous = this._savedValues;
var current = this.value();
if (current.length < previous.length)
{
var diff = $(previous).not(current).get(0);
if (confirm('Sure?'))
{
// do nothing value already deleted
}
else
{
// reset
this.value(previous);
}
}
saveCurrent(this);
}
This works perfectly. But If I type a new phrase so the widget calls the Read-Action to add some Items all works fine and NOW when I delete an item and cancel this action, however items will be removed.
What is wrong?
Related
If I have a kendo combobox that contains more than 1 value I would like to insert "-ALL- as the DataTextField and "9999" as the DataValueField. Currently, if I have only a single record I use the DataBound event to test for that and if it = 1 then I load a grid based on this value, but if the length > 1 then I would like to add the -All-. I don't understand the insert as described by telerik.
#(Html.Kendo().ComboBox()
.Name("FAList")
.Placeholder("Select Fiscal Agency...")
.DataTextField("Text")
.DataValueField("Value")
.HtmlAttributes(new { style = "width:50%;" })
.Filter("startswith")
.AutoBind(true)
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetUserAgencyList", "Entities");
})
.ServerFiltering(true);
})
.Events(e => e
.Change("onFAChange")
.DataBound("onFADataBound")
)
)
and then the function for binding the data
function onFADataBound(e) {
// the agency list dropdown
var combobox = $("#FAList").data("kendoComboBox");
// if there is only a single record then set that in the combobox and load the grid based on that
if (e.sender.dataSource.view().length == 1) {
e.sender.select(0);
var filter = this.value();
$.get('/City/CityGrid_Read', { id: filter }, function (data) {
var grid = $("#FollowUpGrid").data("kendoGrid");
grid.dataSource.read();
})
}
if (e.sender.dataSource.view().length > 1) {
}
}
Answered at: Adding an item dynamically in kendo combobox
Combining that with your code:
if (e.sender.dataSource.view().length > 1) {
$("#FAList").data("kendoComboBox").dataSource.add({ Text: "-All-",
Value: "0" });
}
Something like that! I hope you get this implemented :)
An alternative could be to change the Placeholder text in this event method where length > 1
as per example on: http://www.telerik.com/forums/placeholder-text
$("#FAList").data("kendoComboBox").input.attr("placeholder", "-All-");
DropDownList:
#(Html.Kendo().DropDownList()
.Name("ddlRoles")
.OptionLabel("ACCOUNT TYPE")
.HtmlAttributes(new { #class = "ddlRoles" })
.BindTo((IEnumerable<SelectListItem>)ViewBag.ApplicationRoles)
)
ToolTip
#(Html.Kendo().Tooltip()
.For("#help-tooltip")
.Position(TooltipPosition.Top)
.Content("Hello")
)
The content "Hello" I want it to base it on the item selected on ddlRoles
#(Html.Kendo().DropDownList()
.Name("ddlRoles")
.OptionLabel("ACCOUNT TYPE")
.HtmlAttributes(new { #class = "ddlRoles text-danger" })
.BindTo((IEnumerable<SelectListItem>)ViewBag.ApplicationRoles)
)
)
Then the Tooltip
#(Html.Kendo().Tooltip()
.For("#ddlRoles").
.Position(TooltipPosition.Top)
.Events(events => events.Show("onHoverShowToolTip"))
)
when the tooltip is shown, call a javascript function
function onHoverShowToolTip() {
loadToolTipContent();
}
function loadToolTipContent() {
//this call getToolTipContent();
$("#the name of the generated tooptip").data("kendoTooltip").options.content = getToolTipContent();
$("#the name of the generated tooptip").data("kendoTooltip").refresh();
}
function getToolTipContent() {
var role = selectedRole();
var result = "THE CONTENT THAT YOU WANT";
return result;
}
I am using Kendo Ui Grid with MVC and SignalR. I can successfully perform the CRUD operations on grid using SignalR. I would like to notify clients by highlighting(By changing cell color) the updated cell. How can I achieve this with the following code:
#(Html.Kendo().Grid<Webapplication1.Models.ShipViewModel>()
.Name("ShipGrid")
.Columns(c =>{
c.Bound(m => m.Id).Hidden();
c.Bound(m => m.LocationViewModel)
.Title("Location1");
c.Bound(m => m.Location2ViewModel)
.Title("Location2");
c.Bound(m => m.boxSent);
c.Command(p =>
{
p.Edit().Text(" ").UpdateText(" ").CancelText(" ");
p.Destroy().Text(" ").HtmlAttributes(new { #title = "Cancel" });
});
})
.ToolBar(toolbar =>
{
toolbar.Create().Text("").HtmlAttributes(new { #title = "Add" });
})
.Editable(editable => editable
.DisplayDeleteConfirmation("DELETE.")
.Mode(Kendo.Mvc.UI.GridEditMode.PopUp)
.TemplateName("abcEditor")
)
.Events(events =>
{
events.Edit("edit");
})
.DataSource(dataSource => dataSource
.SignalR()
.Transport(tr => tr
.Promise("hubStart")
.Hub("mainHub")
.Client(c => c.Read("abc_Read").Create("abc_Insert").Update("abc_Update").Destroy("abc_Delete"))
.Server(s => s.Read("abc_Read").Create("abc_Insert").Update("abc_Update").Destroy("abc_Delete")))
.Schema(schema => schema
.Model(m => {
m.Id(p => p.Id);
m.Field(p => p.Location1ViewModel).DefaultValue(ViewData["DefaultLocation1"] as Webapplication1.Models.Location1ViewModel);
m.Field(p => p.Location2ViewModel).DefaultValue(ViewData["DefaultLocation2"] as Webapplication1.Models.DeliveryLocationViewModel);
})
)
)
)
I would like to Highlight the cell that is being updating here. Something like stock market data flashing. How can I achieve this?
I've done similar kind of thing. I don't know if that helps you. In your default view model add a extra property, say "Updated" as a boolean. Now every time you have update a row, put "Updated" as a true.
And in kendo grid add a new dataBound event.
.Events(events => events.DataBound("onDataBound"))
Now on JS use something like the following;
function onDataBound(arg) {
var itemsInActivityGrid = $("#ShippingGrid").data().kendoGrid.dataSource.data().length;
for (i = 0; i < itemsInActivityGrid; i++) {
if ($("#ShippingGrid").data().kendoGrid.dataSource.data()[i].Updated == true) {
$("#ShippingGrid .k-grid-content tr[data-uid='" + $("#ShippingGrid").data().kendoGrid.dataSource.data()[i].uid + "']").css("background-color", "orange");
}
}
}
Update: I don't know your logic. As far as you put on comments, you want to do something like online share dealing sites. Anyway, as far as I could, if you want to highlight individual cell in a row, add another extra field say "Column" along with "Updated"; it could be a string. Here you mark which cell you want to put the back ground colour from the backend. Say we've got it's value as "2".
for (i = 0; i < itemsInActivityGrid; i++)
{
var TableUID = $("#ShippingGrid").data().kendoGrid.dataSource.data()[i].uid;
var TableToColour = $("#ShippingGrid .k-grid-content tr[data-uid='" + TableUID + "']").parent().parent()[0];
var ColumnToColor = $("#ShippingGrid").data().kendoGrid.dataSource.data()[i].Column;
$(TableToColour.rows[0].cells[" + ColumnToColor + "]).select().attr("style","background-color:blue")
}
In case, you need to highlight multiple cells on the same row, in Column send something like "1,2,3,5"; where 1, 2, 3 and 5 represents the column numbers on the same row. And after ColumnToColor do some string parsing, put it into a for loop or something and colour;
Hope this helps. Thank you.
I have achieved this as below and its working fine:
in my .cshtml page
myHub.client.highlightRow = function (id) {
var data = $("#MyGrid").data("kendoGrid").dataSource.data();
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
if (dataItem.id == id) {
//alert(dataItem.uid);
$("#MyGrid").data("kendoGrid").tbody.find("tr[data-uid=" + dataItem.uid + "]").effect("highlight", { color: "#f35800" }, 3000);
}
}
};
And in my update/insert method in my SignalR Hub class:
Clients.Others.highlightRow(mygridViewModel.Id);
I am facing an issue with Kendo grid inline editing, The issue is even though I update any row, 1st row data is displayed in grid, Any help on this?
Before update
After update.
Interestingly the object I return from the controller does have the correct data
Controller code
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
[ActionSessionState(System.Web.SessionState.SessionStateBehavior.Required)]
[OutputCache(Duration = 0, VaryByParam = "none")]
public ActionResult _SaveBatchEditingintegrate([DataSourceRequest] DataSourceRequest request)
{
var UPObj = SessionFacade.UserProfile as UserProfile;
try
{
IntegrationRate objInteg = new IntegrationRate();
TryUpdateModel(objInteg);
if (objInteg.PeriodID != 0)
{
var Integrationrate = (from p in _draftManagecompany.IntegrationRates where p.PeriodID == objInteg.PeriodID select p).First();
TryUpdateModel(Integrationrate);
if (Integrationrate.Rate > 100) //set 100 as default
{
Integrationrate.Rate = 100;
}
}
LoadResourceJSArray();
}
catch (Exception ex)
{
// Adding related additional information along with exception object
//ExceptionLogger.Log(ex, "Period ID", id);
ExceptionLogger.Log(ex, "User Profile Info", UPObj);
// Handle exception with BubbleExceptionPolicy
if (exManager.HandleException(ex, "BubbleExceptionPolicy"))
throw; // Not to include the ex, as the previous stack trace to be maintained
}
//_draftManagecompany.IntegrationRates contains updated value in the correct order
return Json(_draftManagecompany.IntegrationRates.ToDataSourceResult(request));
}
cshtml code:
#{ var integrateGrid = Html.Kendo()
.Grid(Model.Company.IntegrationRates)
.Name("Gridintegrate")
.EnableCustomBinding(true) // Enable custom binding
.BindTo(Model.Company.IntegrationRates)
.Events(events =>
{
events.Change("DataBound_Integ");
})
.ToolBar(
commands =>
{
//commands.Insert().ButtonType(GridButtonType.BareImage).ImageHtmlAttributes(new { style = "visibility:hidden" });
}
)
.Columns(columns =>
{
columns.Bound(p => p.PeriodID).Visible(false);
columns.Bound(p => p.Month).Width(150);
columns.Bound(p => p.Rate).Format("{0:0.00}%").Width(100);
columns.Command(commands =>
{
commands.Edit().HtmlAttributes(new { #id = "btn_IntRateEdit" });
}).Width(150).Title(gridTitle);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource.Ajax()
//.Batch(true)
.Read(read => read.Action("_AjaxBindingintegrate", "Company"))
.Update(update => update.Action("_SaveBatchEditingintegrate", "Company"))
.Model(model =>
{
model.Id(c => c.PeriodID);
model.Field(c => c.Month).Editable(false);
}
)
.Events(events =>
{
events.Error("CheckSessionExistsOnTelerik");
})
);
//.Pageable(paging => paging.Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageSizeDropDown).PageSize(20, new int[3] { 20, 50, 100 })).ToComponent();
var culture = System.Globalization.CultureInfo.InvariantCulture;
//integrateGrid.Localization = new GridControlLocalization(culture);
integrateGrid.Render();
}
I think I see the problem here. From what I can tell when you complete the update you are returning the entire data set back on the update ie June, january, February etc.
On the update all you have to do is return the item you have updated back to the grid
So in your example change the return json to the following:
Return json(new { IntegrationRate}.toDataSourceResult(request,modelState),jsonbehaviour.allowget);
This then should sort out your issue.
Because you are returning the entire data set back it is rendering the first row as the expected result.
As you say you see the data saving correctly behind the scenes. So you know an error is not being thrown.
I'm Using Kendo UI MVC wrapper. I need a DropDownList with checkbox for each item to allow me select multiple of items.
I found this jsfiddle doing what I want to achieve, but it is not with MVC wrapper.Would you please show how I can implement the same thing with MVC wrapper?
#(Html.Kendo().DropDownList()
.Name("StructureCompany")
.HtmlAttributes(new { style = "width:180px" })
.OptionLabel("-- Select --")
.DataTextField("Title")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeCompany", "Company");
});
}))
Here's a way you can do it:
View
#(Html.Kendo().DropDownList()
.Name("StructureCompany")
.HtmlAttributes(new { style = "width:180px" })
.DataTextField("Title")
.DataValueField("Id")
.Template("<input type='checkbox' name='cb' value='#:data.Title#' /> #:data.Title#")
.Events(e => e.Select("onSelect"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeCompany", "Company");
});
}))
I removed your OptionLabelbecause it doesn't flow well with this style. But I found an alternative as you will see below
Script
//This extendes the base Widget class
(function ($) {
var MultiSelectBox = window.kendo.ui.DropDownList.extend({
_select: function (li) { },//Prevents highlighting
_blur: function () { },//Prevents auto close
});
window.kendo.ui.plugin(MultiSelectBox);
})(jQuery);
//Sets up your optional label
$(document).ready(function () {
$("#StructureCompany").data("kendoDropDownList").text("-- Select --");
})
//Does all the functionality
function onSelect(e) {
var dataItem = this.dataItem(e.item);
var ddl = $("#StructureCompany").data("kendoDropDownList");
var cbs = document.getElementsByName("cb");
var display;
var list = [];
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
list.push(cbs[i].value);
}
}
if (list.length == 0) {
display = "-- Select --";
}
else {
display = list.join(", ");
}
ddl.text(display);
}
Here is the tricky part, I'm not a real connoisseur when it comes to javascript so forgive my terminology if it is wrong. The first blob where you have the new scope function allows you to inherit from the kendo.ui namespace so that you are able to change the base level stuff. Such as the auto close and highlighting functionality
That next blob is just my alternative to having your 'OptionLabel'(you can do it however you want)
The last part is the selection which as you can see just creates a comma value then shoves it in as the display in the drop down list via 'ddl.text()' method. You can do this however you want. Hope this helps!