Telerik Forums
UI for ASP.NET MVC Forum
3 answers
260 views
Hello,
i am using Vs2012,kendo 2013.1.154 version,
and i want it to do the dropdown cascade example,and it gives me in firebug,that he doesn't know that javascript function put as filter
the error message is : filterProducts is not defined
here is my view
<div class="demo-section">
    <h2>View Order Details</h2>
    <p>
        <label for="categories">Catergories:</label>
        @(Html.Kendo().DropDownList()
              .Name("groups")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select group...")
              .DataTextField("Name")
              .DataValueField("pkTallyGroup")
              .DataSource(source => {
                   source.Read(read => {
                       read.Action("GetCascadeGroups", "Employees");
                   });
              })
        )
    </p>
    <p>
        <label for="subgroups">Products:</label>
        @(Html.Kendo().DropDownList()
              .Name("subgroups")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select subgroup...")
              .DataTextField("Name")
              .DataValueField("pkTallySubGroup")
              .DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeSubgroups", "Employees")
                          .Data("filterProducts");
                  })
                  .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("groups")
        )
        <script>
            function filterProducts() {
                return {
                    groups: $("#groups").val()
                };
            }
        </script>
    </p>
    
</div>

what should be the problem?or do i need to set something in VS2012 to see the scripts in the same page?
Regards,
Daniel
Vladimir Iliev
Telerik team
 answered on 16 Aug 2013
6 answers
168 views
Hello,
i have another question:
I would like to filter the grid data,based on some filters(textboxes or dropdowns) and when i press a button,the date will be loaded into the kendo grid.But initially i do not want to fill anything.based on filter inputs,i create the criteria and make the selection in where clause of the repository for the given entity.
How can i do that?can you show me an example?
Best Regards,
Daniel
Nikolay Rusev
Telerik team
 answered on 16 Aug 2013
0 answers
172 views
Hi to all Members.I have installed Kendo and i am using a very basic Grid
I have bind it successfully but paging sorting doesn't seems to Work

This is my View
@model IEnumerable<UserManagementApplication.Models.tblUser>
@{
    ViewBag.Title = "GetDataKendo";
}
<h2>GetDataKendo</h2>
   
@(Html.Kendo().Grid(Model)  
    .Name("Grid")
     .Columns(columns =>
      {        
          
          columns.Bound(model => model.FirstName);
          columns.Bound(model => model.LastName);
          columns.Bound(model => model.EmailAddress);
          columns.Bound(model => model.IsActive);
      })
      
    .Pageable()
    .Sortable()
    .Filterable()
    .Scrollable()
    .Groupable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetUserDataKendo", "User")
        )
    )
)

And this is my Controller Method
 public ActionResult GetUserDataKendo([DataSourceRequest]DataSourceRequest request)
        {                   
            
            var displayedEvents = client.GetUserList(1, 100, "", false, "");      
           var result = new DataSourceResult()
            {
                Data = displayedEvents
            };
            return Json(result);
        }


My problem is that Paging Sorting are not working .Please see attached Image that how my image is showing

Jack
Top achievements
Rank 1
 asked on 16 Aug 2013
2 answers
2.5K+ views

I have created a single page application with Kendo Grid.  and users have different roles. I need to Hide and show buttons on  User Role Type.
Chrys
Top achievements
Rank 1
 answered on 15 Aug 2013
3 answers
176 views
Hello,

We are having some problems with the image browser using the Kendo UI build v2013.2.716.

These problems can be replicated using the image browser demo (/razor/web/editor/imagebrowser) found in the Kendo.Mvc.Examples project provided with the Kendo UI install. These issues were also not present in the Q1 2013 release that we were using before.

When you try to upload an image:
The image uploads successfully but an image named "undefined" is added with the ajax spinner for a thumbnail.
Upon refreshing the page the uploaded image will show correctly in the list.

When you try to create a directory or when you try to delete an image/directory:
A request is posted to the create URL for every file in the list.

The posts look like this:
POST /razor/web/ImageBrowser/Create HTTP/1.1
Name=a100.png&Size=73289&EntryType=0&path=

POST /razor/web/ImageBrowser/Create HTTP/1.1
Name=aeroviewr.png&Size=15289&EntryType=0&path=

POST /razor/web/ImageBrowser/Create HTTP/1.1
Name=bg-glossy.png&Size=1128&EntryType=0&path=

Was some change overlooked and not committed into the code samples? Any workarounds for this?

Thank you
Alex Gyoshev
Telerik team
 answered on 15 Aug 2013
5 answers
470 views

Hi,

I looked at the example in  http://demos.kendoui.com/web/grid/editing-popup.html (ASP.NET MVC)

Kendo.Mvc.Examples.Models.ProductViewModel is a simple object,

I am interested in supporting Create and Update of an object that relates to other objects (in a Parent child manner)

For example : Lets say the grid shows  Students and a Student relates to Phones via StudentPhones
The popup should enable the user to edit/create a Student with its Phones all together.

I wonder if you can supply me  a project that shows how to handle the Create and Update in a similar scenario to the one I described.

 

Thanks in advance.

Lauri

p.s. My app is an N-Tier app using EntityFramework

 

Vladimir Iliev
Telerik team
 answered on 15 Aug 2013
1 answer
97 views
I have a grid where a filter gets set through the API automatically, but I want to be able to display what that current filter is, and allow the under to easily remove it.  I'm thinking of using MultiSelect to accomplish this purely from the standpoint of how it looks to the user and could allow them to click on that X to easily remove the filter.  But I'm not sure this is the right or even a workable approach.  I figure before I go to effort to try to implement this and go through testing, that I'd ask the experts here and see what your recommendations may be to accomplish something like this.

Any input would be most appreciated, thank you!
Vladimir Iliev
Telerik team
 answered on 15 Aug 2013
2 answers
612 views
I am having the following issue when I’m using Kendo UI Grid in partial view loaded by Ajax.ActionLink.
Sorting and everything works as long as I‘m not adding any events, but I need to use Change event in order to implement
 Master-Child grid.
After I add the event, sorting stops working, event is not firing. My test code is
Controller
public class TestKendoAjaxController : Controller
    {
        public ActionResult Index()
        {           
           return View();
       }
        public ActionResult PartialGrid()
        {
            List<TestKendoAjaxModel> result = new List<TestKendoAjaxModel>();
            result.Add(new TestKendoAjaxModel { FirstName = "Test1", LastName = "test1Last" });
            result.Add(new TestKendoAjaxModel { FirstName = "test2", LastName = "test2Last" });
            Main nn = new Main();
            nn.blah = result;
            return PartialView("_TestPartial", nn.blah);
        }
          [HttpPost]
        public ActionResult Data_Read([DataSourceRequest]DataSourceRequest request)
        {
            List<TestKendoAjaxModel> result = new List<TestKendoAjaxModel>();
            result.Add(new TestKendoAjaxModel { FirstName = "test1", LastName = "test1Last" });
            result.Add(new TestKendoAjaxModel { FirstName = "test2", LastName = "test2Last" });
            return
Json(result.ToDataSourceResult(request));
       }
   }

View

@model Johnson.OAT.MVC4.Models.Main
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
@Ajax.ActionLink("Load partial view", "PartialGrid", new AjaxOptions
{
    OnSuccess = "updatePlaceholder",
    UpdateTargetId = "result"
})
</p>

 <div id="result"></div>
<script type="text/javascript">
   function updatePlaceholder(context) {
        // the HTML output of the partial view
        var html = context.get_data();

        // the DOM element representing the placeholder
        var placeholder = context.get_updateTarget();

        // use jQuery to update the placeholder. It will execute any JavaScript statements
        $(placeholder).html(html);

        // return false to prevent the automatic update of the placeholder
        return false;
    }
</script>

Partial view

@model IEnumerable<Johnson.OAT.MVC4.Models.TestKendoAjaxModel>

 @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.FirstName).Format("{0:d}").Width(80);
            columns.Bound(o => o.LastName).Width(200);
           
                             
        }).Sortable().Pageable(p => p.PageSizes(new[] { 20, 30, 50 })
        ).Filterable()
        .Selectable()
         .DataSource(datasource => datasource
           .Ajax()
           .Read(read=> read.Action("Data_Read","TestKendoAjax").Type(HttpVerbs.Post))
           
 )
 .Events(events => events.Change("change"))
 )


<script>
    function change(e) {
       alert("")
    }
</script>



 

Thank you in advance!

 

Halina
Halina
Top achievements
Rank 1
 answered on 14 Aug 2013
1 answer
499 views
Hi.

I currently have the following Model:
public class AwesomeDTO
{
  public string ID {get;set;}
  public string Name {get;set;}
  public string Description {get;set;}
 
}
I currently have a following partial view with a grid.
@model IEnumerable<AwesomeDTO>
 
@(Html.Kendo().Grid(Model)
    .Name("AwesomeGrid")
    .Columns(columns =>
            {
                             
                columns.Bound(u => u.Name).Title("Name").Filterable(true).Width(200);
                columns.Bound(u => u.Description).Title("Description").Filterable(false).Width(200);
                columns.Command(command => command.Custom("Manage").Click("manageUser").Text("Manage")).Title("Manage");
            }
        )
    .Pageable()    
    .Filterable(filter => filter.Enabled(true))
    .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .PageSize(10)
            .Model(model => model.Id(u => u.ResourceID))
            .Events(events => events.Error("onError"))
                .Read(read => read.Action("GetAwesome", "Awesome"))
       )
     )

The custom command calls the following Javascript function "manageUser" defined as follows:

function manageUser(e) {
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var result;
 
        debugger;
        $.ajax({
            url: '@Url.Action("ManageAwesoem", "Awesome")',
            type: 'POST',
            data: JSON.parse(JSON.stringify(dataItem)),
            content: 'text/html',
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert('error:' + data);
            }
        });
    }

My Controller is as follows:
public ActionResult ManageAwesome(AwesomeDTO userToManage)
{
    return View(userToManage);
}

I would like the View to render with the AwesomeDTO properties. The step where I am not quite understanding is when and how to call the ManageAwesome view so that it renders in a new location in the browser. I do not want to expose the ID of the AwesomeDTO in the URL string and so I am looking for an alternative way to achieve this from the Kendo Grid.

Any help would be appreciated.

Thanks,
Navin
Atanas Korchev
Telerik team
 answered on 14 Aug 2013
2 answers
1.8K+ views
I've been looking around and found a few examples, this one for example.

But I cant get it to work, if I set it to use the standard Kendo popup editor, it works as expected. 
.Editable(editable => editable.Mode(GridEditMode.PopUp))

But when I use my template, it does not run/call the action defined in .update(), although I can see the change in the grid behind it, but nothing happens when "updated" button is clicked, cancel works, and that of course cancels changes.

I've probably missed something basic... Below is my code!

GarbageRouteIndex.cshml:
01.@(Html.Kendo().Grid<GarbageRouteViewModel>()
02.    .Name("garbageRoutes")
03.    .DataSource(dataSource => dataSource
04.        .Ajax()
05.        .ServerOperation(false) // Needs to be used if Grouping or filtering is done in linq-qry(on WeekSchedule or Season), cos ToDataSourceResult() won be able to revers from VM. //uni0jh
06.        .Model(model => model.Id(x => x.ID))
07.        .Read(read => read.Action("GetGarbageRoutes", "GarbageRoute"))
08.        .Update(update => update.Action("UpdateGarbageRoute", "GarbageRoute"))
09.        .Group(groups => groups.Add(model => model.WeekSchedule))
10.        //.PageSize(2)
11.    )
12.    .Columns(columns =>
13.    {
14.        columns.Bound(x => x.ID).Visible(false);
15.        columns.Bound(x => x.SortOrderIndex).Width(10).Title("^");
16.        columns.Bound(x => x.ObjectName);
17.        columns.Bound(x => x.Season);
18.        columns.Bound(x => x.WeekSchedule);
19.        columns.Bound(x => x.Description);
20.        columns.Bound(x => x.PartAreaName);
21.        columns.Bound(x => x.PartAreaId).Visible(false);
22.        columns.Command(command => command.Edit().UpdateText("Uppdatera").CancelText("Avbryt"));
23.    })
24.       
25.    .ToolBar( toolbar => {
26.            toolbar.Template(@<text>
27.           <div class="toolbar">
28.                    <label class="partArea-label" for="partArea">PartArea:</label>
29.                        @(Html.Kendo().DropDownList()
30.                            .Name("partAreaFilter")
31.                            .OptionLabel("Alla")
32.                            .DataTextField("Name")
33.                            .DataValueField("ID")
34.                            .AutoBind(false)
35.                            .Events(e => e.Change("partAreaFilterChange"))
36.                            .DataSource(ds =>
37.                            {
38.                                ds.Read("GetPartAreas", "PartArea");
39.                                 
40.                            })
41.                        )
42.                        </div>
43.        </text>);
44.    })
45.    //.HtmlAttributes(new { style = "height: 460px" })
46.    //.Editable(editable => editable.Mode(GridEditMode.PopUp)) //detta är kendos built in-variant.
47.    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("GarbageRouteEdit")) 
48.    //.Groupable()
49.    .Pageable()
50.    .Sortable()
51.     
52.)

GarbageRouteIndex.cshtml:
001.@model Roa.Common.DTO.GarbageRouteViewModel
002. 
003.@Html.HiddenFor(model => model.ID)
004. 
005.    <div class="span8">
006.        <div class="span3">
007.            <div class="editor-label">
008.                Beskrivning
009.            </div>
010.            <div class="editor-field">
011.                @Html.TextAreaFor(model => model.Description, new { @required="*", @placeholder="Beskrivning här..." } )
012.                @Html.ValidationMessageFor(model => model.Description)
013.            </div>
014.            <div class="editor-label">
015.                Veckodag
016.            </div>
017.            <div class="editor-field">
018.                @Html.TextBoxFor(model => model.Weekday, new { @required="*" })
019.                @Html.ValidationMessageFor(model => model.Weekday)
020.            </div>
021. 
022.            <div class="editor-label">
023.                Start mÃ¥nad
024.            </div>
025.            <div class="editor-field">
026.                @Html.TextBoxFor(model => model.StartMonth, new { @required="*" })
027.                @Html.ValidationMessageFor(model => model.StartMonth)
028.            </div>
029.            <div class="editor-label">
030.                Start dag
031.            </div>
032.            <div class="editor-field">
033.@*                @(Html.Kendo().DateTimePickerFor(model => model.StartDay)
034.                  .Value(DateTime.Now)
035.                  .Max(DateTime.Now)
036.                  .Events(e => e.Change("startChange"))
037.                  )*@
038.                @Html.TextBoxFor(model => model.StartDay, new { @required="*" })
039.                @Html.ValidationMessageFor(model => model.StartDay)
040.            </div>
041. 
042.            <div class="editor-label">
043.                Start timma
044.            </div>
045.            <div class="editor-field">
046.                @Html.TextBoxFor(model => model.StartHour, new { @required="*" })
047.                @Html.ValidationMessageFor(model => model.StartHour)
048.            </div>
049.        </div>
050.        <div class="span4">
051. 
052. 
053.            <div class="editor-label">
054.                Slut mÃ¥nad
055.            </div>
056.            <div class="editor-field">
057.                @Html.TextBoxFor(model => model.EndMonth, new { @required="*" })
058.                @Html.ValidationMessageFor(model => model.EndMonth)
059.            </div>
060. 
061.            <div class="editor-label">
062.                Slut dag
063.            </div>
064.            <div class="editor-field">
065.                @Html.TextBoxFor(model => model.EndDay, new { @required="*" })
066.                @Html.ValidationMessageFor(model => model.EndDay)
067.            </div>
068. 
069.            <div class="editor-label">
070.                Slut timma
071.            </div>
072.            <div class="editor-field">
073.                @Html.TextBoxFor(model => model.EndHour, new { @required="*" })
074.                @Html.ValidationMessageFor(model => model.EndHour)
075.            </div>
076. 
077.            <div class="editor-label">
078.                Ojämn vecka
079.            </div>
080.            <div class="editor-field">
081.                @Html.CheckBoxFor(model => model.OddWeeks, new { @required="*" })
082.                @Html.ValidationMessageFor(model => model.OddWeeks)
083.            </div>
084. 
085.            <div class="editor-label">
086.                Jämn vecka
087.            </div>
088.            <div class="editor-field">
089.                @Html.CheckBoxFor(model => model.EvenWeeks, new { @required="*" })
090.                @Html.ValidationMessageFor(model => model.EvenWeeks)
091.            </div>
092.        </div>
093.        <div class="span8">
094.            <input type="file" name="files" id="files" multiple="multiple" value=" " />
095.            <p>
096.                
097.            </p>
098. 
099.        </div>
100.    </div>
101.    

Mattias Hermansson
Top achievements
Rank 1
 answered on 14 Aug 2013
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?