Telerik Forums
UI for ASP.NET MVC Forum
2 answers
498 views

Is it possible to mask a phone number with or without an extension?  I'm looking for:

(612) 555-1212

or

(612) 555-1212 ext. 5

or

(612) 555-1212 ask for Larry

 Basically, the beginning of the string must be formatted as a phone number, but the user can enter whatever they want after that. 

 Can I do it?

 Thanks!

Laurie
Top achievements
Rank 2
 answered on 09 Jun 2015
1 answer
612 views
 I have a dynamic model below is the cshtml code, is line editing possible with dynamic model ? 
 
@(Html.Kendo().Grid<dynamic>()
              .Name("requestCapacity")
              .Columns(columns =>
              {
                  foreach (var c in Model)
                  {
                      if (c.Equals("Week Starting"))
                          columns.Template(@<text> </text>).ClientTemplate(@"<span class='k-widget k-datepicker' style='width: 150px;'><span class='k-picker-wrap k-state-default'><input id='datepicker'  style='width: 100%;' data-role='datepicker' type='text' class='k-input' role='combobox' aria-expanded='false' aria-owns='datepicker_dateview' aria-disabled='false' aria-readonly='false' aria-activedescendant='270cfa37-b189-46a8-b0ea-857df06f84ab_cell_selected'><span unselectable='on' class='k-select' role='button' aria-controls='datepicker_dateview'><span unselectable='on' class='k-icon k-i-calendar'>select</span></span></span></span>").Width(150).Title(c.Key);
                      else
                          columns.Template(@<text>c</text>).Title(c.Key);
 
                  }
                  columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
              }
      )
              .Editable(editable => editable.Mode(GridEditMode.PopUp))
                  .HtmlAttributes(new { style = "height:auto;width:85%;align:center;margin:0 auto" })
                  .Pageable()
                  .ToolBar(toolbar => toolbar.Create().Text("Add"))
              .Sortable()
              .Scrollable().EnableCustomBinding(true)
               .DataSource(dataSource => dataSource
                      .Ajax().Model(model =>model.Id("ID")
                      )
                  .PageSize(10)
                    .Events(events => events.Error("error_handler"))
                                   .Create(update => update.Action("EditingInline_Update", "RequestCapacity",new {testing="#=dataItem#"}).Type(HttpVerbs.Post))
                          .Read(read => read.Action("PopulateRequest", "RequestCapacity").Type(HttpVerbs.Post))
                                  .Update(update => update.Action("EditingInsline_Update", "RequestCapacity","#=dataItem#").Type(HttpVerbs.Post))
                          .Destroy(update => update.Action("EditingInline_Destroy", "Capacity"))
              )
)

 

controller code.

public ActionResult RequestCapacityPopUp()<br>        {<br>            var dynamicBinding = new List<string>(){"Week Starting"};<br>            using (var dataModel = new CapacityPlannerEntities())<br>            {<br>                foreach (var team in dataModel.Teams)<br>                {<br>                    dynamicBinding.Add(team.TeamName);<br>                }<br>            }<br>            return View(dynamicBinding);<br>        }

Alexander Popov
Telerik team
 answered on 09 Jun 2015
1 answer
208 views

Hi

How do I pass a value from the button .content

@(Html.Kendo().Button()
                .Name("p14")
                 .HtmlAttributes(new { type = "button" })
                .Content("135")
                       .Events(ev => ev.Click("onClickPol")))
     <script>
    function onClickPol(e) {
       //This dos not work, I want to retrieve the name, content of that button what n this case is 135
        var xContent  = $(e.event.target).closest(".k-button").attr("textContent")

    }
    </script>

Dimiter Madjarov
Telerik team
 answered on 09 Jun 2015
1 answer
444 views

Strange that I have one grid instance where I created a custom ClientRowTemplate, as I needed to display an image and other info...

I have 2 custom command buttons, one to show Item Details, and another to Copy Item details, basically pointing to distinct jQuery functions that get the id of the record in the row then redirect to a specific controller action.

 

It seems that regardless of which button is clicked, the first function is being fired...

 

Here is the grid markup...

 @(Html.Kendo().Grid<LibEquipmentApp.ViewModels.SimpleItemViewModel>()
.Name("ManageItems")
.Columns(columns =>
{
columns.Bound(p => p.EItemID).Width(0).Visible(false);
columns.Bound(p => p.ECatID)
.Width(0)
.Visible(false);
columns.Bound(p => p.ImgPath)
.Filterable(false)
.Width(80)
.Title("Photo");
columns.Bound(p => p.EItemName)
.Width(240)
.Title("Item Name");
columns.Bound(p => p.SDBBarcode)
.Width(100)
.Title("Barcode #");
columns.Command(command => { command.Custom("Details").Click("showDetails"); command.Custom("Copy").Click("showCopy"); }).Width(140);
})
.ClientRowTemplate(
"<tr class='k-std' data-imgpath='#: ImgPath #'>" +
"<td >" +
"<img class='img-responsive' src='" + Url.Content("~/Images/EqImg/") + "#:data.ImgPath#' alt='#: data.EItemName #' />" +
"</td>" +
"<td class='details'>" +
"<span class='name'>#: EItemName# </span>" +
"</td>" +
"<td class='details'>" +
"#: SDBBarcode #" +
"</td>" +
"<td class='details'>" +
"<a class='k-button k-button-icontext k-grid-Details'><span>Details</span> </a>" +
"<a class='k-button k-button-icontext k-grid-Details'><span>Copy</span> </a>" +
"</td>" +
"</tr>"
)
.ClientAltRowTemplate(
"<tr class='k-altz' data-imgpath='#: ImgPath #'>" +
"<td >" +
"<img class='img-responsive' src='" + Url.Content("~/Images/EqImg/") + "#:data.ImgPath#' alt='#: data.EItemName #' />" +
"</td>" +
"<td class='details'>" +
"<span class='name'>#: EItemName # </span>" +
"</td>" +
"<td class='details'>" +
"#: SDBBarcode #" +
"</td>" +
"<td class='details'>" +
"<a class='k-button k-button-icontext k-grid-Details'><span>Details</span> </a>" +
"<a class='k-button k-button-icontext k-grid-Details'><span>Copy</span> </a>" +
"</td>" +
"</tr>"
)
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.Contains("Contains")
))
)
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:600px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => { events.Error("error_handler"); events.RequestEnd("onRequestEnd"); })
.Model(model =>
{
model.Id(p => p.EItemID);
})
.Read(read => read.Action("Items_Read", "Admin"))
)
)

 

And here are the functions....

 <script type="text/javascript">
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var id = dataItem.EItemID;
$.ajax({
url: "/Admin/ManageItem",
//send current record ID to the server
data: { id: dataItem.EItemID },
error: function () {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
},
success: function (data) {
window.location = '/Admin/ItemDetails?id=' + id;
}
})
}
function showCopy(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var id = dataItem.EItemID;
$.ajax({
url: "/Admin/CopyItem",
//send current record ID to the server
data: { id: dataItem.EItemID },
error: function () {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
},

success: function (data) {
window.location = '/Admin/CopyItem?id=' + id;
}
})
}
function selectedIndexChanged(e) {
var value = this.value();
var grid = $("#ManageItems").data("kendoGrid");
if (value) {
grid.dataSource.filter({ field: "ECatID", operator: "eq", value: value });
} else {
grid.dataSource.filter({});
}
return;
}
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function onRequestEnd(e) {
$(".ref-success").load(window.location + " .ref-success")
}
</script>

 

The showDetails() function is always being fired... Any help would be greatly appreciated! Thanks!

Sergiu
Top achievements
Rank 2
 answered on 08 Jun 2015
1 answer
113 views

When in the Kendo editor image browser, there is a delete button that is only visible when a file or folder is selected. It invokes the "Destroy" post. When pressed a javascript confirmation is invoked with the message "Are you sure you want to delete "{fileName}"". How would I override this message in MVC Razor. 

Thanks

Alexander Popov
Telerik team
 answered on 08 Jun 2015
1 answer
204 views
Has there been any progress in developing a pluggable standalone File Browser.
Sebastian
Telerik team
 answered on 08 Jun 2015
2 answers
409 views

Not the best title, because I don't know what title to give a good title for this issue.

Basically, I am trying to build a Grid with the ASP.NET MVC wrapper for a MVC model I created. All is fine. In fact, I am pleasantly surprised that Kendo is able to display data properly when I set `<DisplayFormat(DataFormatString:="{0:N0}")>` to one of the fields in my model. (It gives commas every 3 digits from the least significant digits i.e. 12345 => 12,345 etc). However, when I added the annotation `NullDisplayText:="0"`, the grid still leaves the cell blank instead of displaying "0" on the cell where the value is NULL.

So my question is that, why the behaviour is as such? I thought Kendo called `@Html.DisplayFor(Function(s) s.Property)` somewhere in the background but apparently this is not the case (since the annotation for `NullDisplayText` is not acknowledged).

Also, naturally, the next question is, how do I get the behaviour I am expecting? I would guess you would suggest me to use Client Template as suggested in this post, but I am hoping that I have done something wrong somewhere and that it can be placed all in one location just like the `DataFormatString` annotation.

Diga
Top achievements
Rank 1
 answered on 08 Jun 2015
1 answer
88 views
Is it possible to override the default behavior of the navigation key in Kendo Grid?  Specifically, my client would like to use the tab key to traverse cells vertically (in a column).
Alexander Popov
Telerik team
 answered on 08 Jun 2015
3 answers
513 views

I'm trying to add in custom conditions in the ClientTemplate using the guide here http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq

I have a checkbox in the child grid which i want to show a cross or a tick depending on the state.

​columns.Bound(o => o.IsChecked).ClientTemplate(
 
    "# if (IsChecked == true) { #" +
        "<i class='tickButton'></i>" +
    "# } else { #" +
        "<i class='crossButton'></i>" +
    "# } #"
);

 However, doing this, i get the error message "Uncaught ReferenceError: IsChecked is not defined"

 

What is the correct way to get this columns bound value?

Dimiter Madjarov
Telerik team
 answered on 08 Jun 2015
3 answers
460 views

I am defining the following Kendo DropDownlist in asp.net mvc:

@(Html.Kendo().DropDownList()
     .Name("OrganizationName")                   
     .DataTextField("OrganizationName")
     .DataValueField("OrganizationName")
     .OptionLabel("-- Select an Organization --")
     .HtmlAttributes(new { style = "width: 100%;" })
     .DataSource(source =>
     {
          source.Custom()
          .ServerFiltering(false)
          .Type("aspnetmvc-ajax")
          .Transport(transport =>
          {
               transport.Read(read =>
               {
                   read.Url(@Url.HttpRouteUrl("DefaultAPI", new { controller = "OrganizationAPI", action = "GetAllOrganizations" })).Type(HttpVerbs.Get);
               });
           })
           .Schema(schema =>
           {
               schema.Data("Data")
               .Total("Total");
           });
      }))

And I am trying to reload the dropdownlist using javascript, as follows:

 

function RebindOrganizations() {
    $('#OrganizationName').data("kendoDropDownList").dataSource.read();
}

The DropDownList is loading initially, but it throws an "undefined" in the javascript, specifically at the .data("kendoDropDownList") portion of the code. The error is:

 

TypeError: $(...).data(...) is undefined

Now I think it's probable that the issue arises because I'm trying to make the call upon returning from a modal window. Here is the code that actually calls my function:

 

    function bindForm(dialog) {
    $('form', dialog).submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    $('#myModal').modal('hide');
                    if (result.url != null)
                        $('#replacetarget').load(result.url); //  Load data from the server and place the returned HTML into the matched element
                    else {
                        RebindOrganizations();
                    }
                } else {
                    $('#myModalContent').html(result);
                    bindForm(dialog);
                }
            }
        });
        return false;
    });
}

But when I click an input button with onClick="RebindOrganizations();" it works.

Anyone able to tell me what I'm doing wrong?

Thanks!

Laurie

Laurie
Top achievements
Rank 2
 answered on 05 Jun 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?