Telerik Forums
UI for ASP.NET MVC Forum
1 answer
99 views
Basically, I have a bulleted list inside the listview, and when a user selects and item, I want it to automatically fire the create action method. And when the user deselects I want it to fire the Destroy action method
Vladimir Iliev
Telerik team
 answered on 04 Oct 2012
0 answers
99 views
Hi,

I have noticed that the "Ends with" filter does not always work when the entry matches an item in the column. I'm using client side filtering and paging.

An example of this behavior can be seen by going to the  Grid /Binding to local data online sample at http://demos.kendoui.com/web/grid/local-data.html 

In the City column set the filter "Ends with" then enter New York in the text field, 17 records are returned 4 with New York as the city, 3 with Redmond as the city and 10 with Seattle as the city.

Is there a fix and/or workaround for this issue?

Thank you,
Eric
Eric Brunswick
Top achievements
Rank 1
 asked on 03 Oct 2012
0 answers
130 views

I am using mvc4. On one of my page, it has Kendo Grid. I want to show 5 rows per page. I have no problem doing it using pure javascript, however, If I am using mvc helper. I got lost, couldn't find any samples online.

here's my javascript code.




$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "json",
serverPaging: true,
pageSize: 5,
transport: { read: { url: "Products/GetAll", dataType: "json"} },
schema: { data: "Products", total: "TotalCount" }
},
height: 400,
pageable: true,
columns: [
{ field: "ProductId", title: "ProductId" },
{ field: "ProductType", title: "ProductType" },
{ field: "Name", title: "Name" },
{ field: "Created", title: "Created" }
],
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
});
});



now if i am using mvc helper

@(Html.Kendo().Grid(Model) 
.Name("Grid")  // please help me to finish this



John
Top achievements
Rank 1
 asked on 03 Oct 2012
6 answers
1.7K+ views
MVC3 
I use in Form.cshtml
    @Html.DropDownListFor(m => m.GroupID, ViewData["GroupNameDDL"as SelectList, "-- Select one --")    

in Controller  
    ViewData["GroupNameDDL"] = _tbl68SpeciesgroupsRepository.Tbl68Speciesgroups.Select(b => new {
      Id = b.GroupID,       Name = b.GroupName}); TELERIK MVC in EditorTemplate Tbl68SpeciesgroupsForeignKey.cshtml
   @using System.Collections
   @using Telerik.Web.Mvc.UI
   @(Html.Telerik().DropDownList()
        .Name("GroupNameDDL")
        .BindTo(new SelectList((IEnumerable)ViewData["GroupNameDDL"], "ID""Name"))) 
in GridViewmodel.cs
        [Required]
        [UIHint("Tbl68SpeciesgroupsForeignKey")]
        public int? GroupId { getset; }
In Telerik I use in Form.cshtml
      columns.ForeignKey(b => b.GroupId, (IEnumerable)ViewData["GroupNameDDL"], "ID""Name");

How to implement
"-- Select one --"

    
Rudolf
Top achievements
Rank 1
 answered on 03 Oct 2012
1 answer
279 views
Hello,

I'm using MVC 4, and the KendoUI Upload widget.

.kendoUpload working fine for Controller Upload call. 
like
"public ActionResult UploadImage(HttpPostedFileBase files, string title) { }".

How can i upload files using Web-ApiController?
(ie) how can i connect "kendoUpload" to "ApiController" action?
Is it possible?

Thanks in advance!

ramesh
Top achievements
Rank 1
 answered on 03 Oct 2012
1 answer
769 views
I'm trying to create a detail popup for each line in my grid (which uses Server Binding)
I've created a custom command as follows.

columns.Command(command =>
{command.Edit();
command.Custom(

"Details").Text("Line Details").Action("Product", "Home").DataRouteValues(v => v.Add(c => c.SKU).RouteKey("selectSID"));}
);

Corresponding Controller action

public ActionResult Product(string selectSID){
var result = IProductRepository.One(p => p.SID == selectSID);
i
f (result == null)
{
return RedirectToAction("Error");}
else
return PartialView(result);
}

This all works but my Partial View is opened as a full page in the existing window, how can I open this as a popup?

I've tried using JS and kendowindow to open the popup and this does work but I can't see how to pass the SKU from the selected line in the grid so I see my error page loaded in the popup window.

This is my partial view

 @model TestKendo.Models.Product

 <fieldset>
<div class="display-field">
@Html.DisplayFor(model => model.Description)

</div
 <img src="..\120571.jpg" />
</fieldset
 <p> @Html.ActionLink("Back to List", "Order") </p>  

Any and all help appreciated, i've got this far from browsing the forums and sample apps.

Timothy
Top achievements
Rank 1
 answered on 03 Oct 2012
5 answers
671 views
Hi,

Is it possible to conditionally display the destroy button? I've messed with command.Destroy().HtmlAttributes... but it is not working.

Thanks!
David A.
Daniel
Top achievements
Rank 2
 answered on 03 Oct 2012
2 answers
216 views
Hi all, I hope someone can help on this odd problem I have.
I am performing binding against some objects called Instances.
Each Instance has a couple of strings, and another object called a Hosting Environment.
HostingEnvironment has the LocationName as a string.

So I'm using a ClientTemplate to display LocationName, while binding to the HostingEnvironment for that grid column.
I'm also using a PartialView for displaying the list of HostingEnvironment locations names in a dropdown during an edit.
That all works great, I can view and edit records.

The problem happens as soon as I click the "Create" button... it immediately throws an error:
0x800a1391 - JavaScript runtime error: 'HostingEnvironment' is undefined

When I break into the generated code, I can see that all the strings are blank (a good thing) except HostingEnvironment doesn't have a value (yes it's null)... so I guess the PartialView doesn't like that maybe?

I'm not really sure what to do...

Here's my main view.

@model IEnumerable<Core.Domain.Entities.Instance>

@(Html.Kendo().Grid(Model)
    .Name("Instances")
    .Columns(columns =>
    {
        columns.Bound(p => p.InstanceName).Title("Instance Name");
        columns.Bound(p => p.InstanceFullName).Title("Instance Full Name");
        columns.Bound(p => p.HostingEnvironment);//.Title("Hosting Environment").ClientTemplate("#: HostingEnvironment.LocationName #");
        columns.Bound(p => p.SysId);
        columns.Command(command => {command.Edit(); command.Destroy(); });
    })
    .Pageable()
    .Sortable()
    .Scrollable() 
    .Filterable()
    .ToolBar(commands => commands.Create()) 
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource        
        .Ajax()
        .Model(model => model.Id(p => p.SysId))
        // Configure CRUD -->
        .Create(create => create.Action("CreateNew", "Instance"))
        .Read(read => read.Action("Read", "Instance"))
        .Update(update => update.Action("Update", "Instance"))
        .Destroy(destroy => destroy.Action("Destroy", "Instance"))
        // <-- Configure CRUD        
     )
)
Jon
Top achievements
Rank 1
 answered on 03 Oct 2012
0 answers
380 views
Thought this might help, a client has a requirement for a grid to be placed in a splitter with grid in line editing at the same time in another splitter pane they want an editable version of the record shown.
The problem I had was getting kendo data binding on to the partial view this is my solution for a general binding function where the container is an html form bound to a POCO class, the model is the dataItem of a selected grid row.

function databind (container, model) {
   if (container) {
      container.find(":input:not(:button, [" + kendo.attr("role") + "=upload], [" + kendo.attr("skip") + "]), select").each(function () {
         var bindAttr = kendo.attr("bind"),
               binding = this.getAttribute(bindAttr) || "",
               bindingName = this.type === "checkbox" ? "checked:" : "value:",
               fieldName = this.name;

         if (binding.indexOf(bindingName) === -1 && fieldName) {
            binding += (binding.length ? "," : "") + bindingName + fieldName;

            $(this).attr(bindAttr, binding);
         }
      });
      kendo.bind(container, model);
   }
}

function grid_change (e) {
   var pid = this.select();
   var dataItem = this.dataItem(pid);
   var details = $('#your container for form');
   var frm = $("#your form");
   if (frm[0]) {
      databind(details, dataItem);
   }
   else {
      $.post('@Url.Action("GetPartialViewForForm","Controller")', {
         ID: dataItem.ID
      }, function (data) {
         details.empty().append(data);
         databind(details, dataItem);
         var frm = $("#your form");
         frm.submit(function (e) {
            var data = $(this).serialize();
            $.post(this.action, data, function () { });
            e.preventDefault();
         });
      });
   }
}

//Controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetPartialViewForForm(int ID)
{
   //get the data
   return PartialView();
}

Timothy
Top achievements
Rank 1
 asked on 03 Oct 2012
4 answers
936 views
Hi,

I'm having trouble creating a custom filter textbox. I'm trying to add the filter with javascript syntax, but in the controller I'm seeing that request.Filters is null for some reason. Here's my code:

@(Html.Kendo().Grid<ToolWarehouseGUI.Models.ToolRowModel>()
.Name("KendoGridTest")
.Columns(columns =>
  {
  columns.Bound(p => p.Name).Title("Nimike");
  columns.Bound(p => p.Description).Title("Kuvaus");
  columns.Bound(p => p.AmountAvailable).Title("Varastossa");
  columns.Bound(p => p.AmountBooked).Title("Lainassa");
  columns.Template(@<text>
        <a class="link-button" href="@Url.Action("Edit", new {toolid=item.ToolId})">
            <span class="add-item">Muokkaa</span>
        </a>  
        <a class="link-button" href="@Url.Action("Details", new {toolid=item.ToolId})">
            <span class="add-item">Lisätiedot</span>
        </a>                                                      
    </text>)
  .ClientTemplate("<a class=\"link-button\" href=\"" + Url.Action("Edit", "Warehouse") + "?toolId=#=ToolId#" + "\">" +
                  "<span class=\"add-item\">Muokkaa</span>" +
                  "</a>" +
                  "<a class=\"link-button\" href=\"" + Url.Action("Details", "Warehouse") + "?toolId=#=ToolId#" + "\">" +
                  "<span class=\"add-item\">Lisätiedot</span>" +
                  "</a>")
  .Title("Toiminnot");
  })
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("GetTools", "Warehouse")
    .Type(HttpVerbs.Post)
    )
)
.Filterable(filtering => filtering
   .Enabled(true)
   )
.ToolBar(factory => factory
  .Template(@<text>
         <div>
             Hakusana: @Html.TextBox("SearchText")
             <button id="searchBtn" class="ui-state-default ui-corner-all" type="submit">Hae</button>
         </div>
     </text>)))
 
<script>
    function refreshGrid() {
        $filter = new Array();
        $filter.push({ field: "Name", operator: "contains", value: $('#SearchText').val() });
        var grid = $("#KendoGridTest").data("kendoGrid");
        grid.dataSource.filter($filter);
        grid.dataSource.read();
    }
 
    $('#searchText').on("keypress", function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            refreshGrid();
            return false;
        }
    });
 
    $('#searchBtn').on("submit", function(e) {
        refreshGrid();
        return false;
    });
</script>  
Mika
Top achievements
Rank 1
 answered on 03 Oct 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?