Telerik Forums
UI for ASP.NET MVC Forum
2 answers
152 views
I have a question about duplicate static window content script initialization.

Let's see an example:
I have a KendowUI Window with static content:
@Html.Kendo().Window().Name("Window").Content(@<div>
            <script type="text/javascript">
                $(document).ready(function () {
                    alert('It\'s me!');
                });
            </script>
            </div>).Visible(false).Modal(true).Title("Test").Draggable(false)

So when I am opening page with provided code I see two alerts.

Please help me to find different solution except provided below:
            <script type="text/javascript">
                $(document).ready(function () {
                    alert('It\'s me!');
                });
            </script>
@Html.Kendo().Window().Name("Window").Content(@<div>
            </div>).Visible(false).Modal(true).Title("Test").Draggable(false)

This is very important for me for initializing KendoUI controls inside of static window content.
Josh
Top achievements
Rank 1
 answered on 18 Dec 2012
1 answer
402 views
Hello when I select a file with Multiple(true) and AutoUpload(false) (I plan to have a separate button launch uploads) Inside a Kendo Window, it displays two files (and actually attempts to upload two files, one with filename="" and the other with filename="<the uploaded file name>").

I have attached an example project and a screenshot of what is happening.

Any ideas on what is going on?
Daniel
Telerik team
 answered on 18 Dec 2012
5 answers
948 views
I have downloaded theKendo UI Complete + Server Wrappers for ASP.NET MVC (kendoui.trial.2012.2.710.zip)  but I see no indication at all about what I am supposed to do with this file once it is downloaded.

I am using VS2010 and have MVC3 and MVC 4 installed - what am I supposed to do with the downloaded file?
Atanas Korchev
Telerik team
 answered on 18 Dec 2012
3 answers
319 views
I am trying to load a drop down list, with data from AJAX.   When it loads, I get the "waiting" circle over the list continually.  I looked at the example, and noticed the same behavior.

View Code:
<fieldset class="form-list"> <ol> <li> <label>Project *</label> @(Html.Kendo().DropDownList()   .Name("1Project")   .DataTextField("DisplayName")   .DataValueField("ProjectID")   .DataSource(source =>   {   source.Read(read =>   {   read.Action("ProjectList""ReturnMail");   });   }) ) </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress1" class="k-textbox" /> </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress2" class="k-textbox" /> </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress3" class="k-textbox" /> </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress4" class="k-textbox" /> </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress5" class="k-textbox" /> </li> <li> <label>City</label> <input type="text" id="1City" class="k-textbox" /> </li> <li> <label>State</label> <input type="text" id="1State" class="k-textbox" maxlength="2" /> </li> <li> <label>&nbsp;</label> <button id="SearchAddressButton" class="k-button primary">Search</button> </li> </ol> </fieldset> 

Controller Code:
public JsonResult ProjectList(string userName = "") { if (userName == "") userName = Request.ServerVariables["AUTH_USER"]; List<ProjectModel> proj = ProjectModel.AllProjects(); return Json(proj); } 
Georgi Krustev
Telerik team
 answered on 18 Dec 2012
6 answers
187 views
Hello again,
i have the kendo UI for MVC Q3 2012,but inside there is no example folder  so i can view the full example for the cascading.
I tried to implement the scenario from the demo,the online example ,but for the moment,the second dropdownlist is not activating when i choose a category.
the cshtml look like this:
<p>
    <label for="categories">Categories:</label>
    @(Html.Kendo().DropDownList()
          .Name("categ")
          .OptionLabel("Select category...")
          .DataTextField("CategoryName")
          .DataValueField("CategoryID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeCategories", "Controls");
              });
          })
        
    )
</p>
<p>
    <label for="products">Products:</label>
    @(Html.Kendo().DropDownList()
          .Name("produc")
          .OptionLabel("Select product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "Controls")
                      .Data("filterProducts");
              }).ServerFiltering(true);
          })
          
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categ")
          
       
    )
<script type="text/javascript">
        function filterProducts() {
            
            return {
                categories: $("#categ").val()
            };
        }
        
    </script>

the Code in controller look like this:
public JsonResult GetCascadeCategories()
        {
            

            return Json(_categoryRepository.GetAll().Select(c => new { CategoryId = c.CategoryID, CategoryName = c.CategoryName }), JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetCascadeProducts(string categories)
        {
           
            var products = _productRepository.GetAll();

            if (!string.IsNullOrEmpty(categories))
            {
                products = products.Where(p => p.Category.CategoryName == categories);
            }

            return Json(products.Select(p => new { ProductID = p.ProductID, ProductName = p.ProductName }), JsonRequestBehavior.AllowGet);
        }

Or,can you send me a functional example taking data from a real database like Northwind.

Thanks in advance.
Daniel
Top achievements
Rank 1
 answered on 18 Dec 2012
5 answers
514 views
Hello.
I am trying to use the Kendo UI Grid with the DataSourceRequest object, in an MVC3 web application.
When I use the MVC helpers to define the grid with razor notation, it works correctly, with paging, filtering, sorting, etc.
But, because of our architecture, we have to use the attribute-driven notation, like so:

<div id="userGrid"
  data-role="grid"
  data-columns='[{ "field": "Name", "title": "Users"}]'
  data-filterable='true'
  data-navigatable="false"
  data-pageable='true'
  data-selectable="row"
  data-sortable='{"mode": "single", "allowUnsort": true}'
  data-bind="source: userDataSource"></div>

The controller's action code is exactly the same in both situations:

public ActionResult ListUsers([DataSourceRequestDataSourceRequest request)
{
  return Json(GetUsers().ToDataSourceResult(request));
}

When using attribute-driven, the grid works fine listing the records and the paging also works.
But not the filter and sorting.
Debugging the controller, I found out that the "request" parameter only has the Page and PageSize values, while
the Filter and Sort properties are null.
Looking at the POST request sent by each version of the grid, I found some differences.
This is the request sent by the Grid created with the MVC helper:

sort:
page:1
pageSize:10
group:
filter:Name~contains~'aaa' And this is the request sent by the attribute-driven: take:30
skip:0
page:1
pageSize:30
sort[0][field]:Name
sort[0][dir]:asc
filter[filters][0][field]:Name
filter[filters][0][operator]:contains
filter[filters][0][value]:25
filter[logic]:and

That's probably why the option parameters are not being sent to the action, but what do I have to do to format the options correctly?
This is the script I'm using to define the transport read function for the datasource:

read: function (options) {
  $.ajax({
    url: '/home/ListUsers',
    type: 'POST',
    data: options.data,
    success: function (data, textStatus, jqXHR) {
      options.success(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
      alert(errorThrown);
    }
  });
}

What do I have to do to send the options data correctly?

Thanks!
Atanas Korchev
Telerik team
 answered on 18 Dec 2012
1 answer
165 views
I'm having an issue getting the selected node of the treeview when trying to drag to it.

Explanation of what I'm trying to do:
   I'm trying to drag a row from the grid to the treeview.

I've linked to the full VS project.

Visual Studio 2012 TreeView Project
Petur Subev
Telerik team
 answered on 17 Dec 2012
3 answers
249 views
I'm receiving a weird error that is only occurring in my web application in internet explorer (v9.0.8). It occurs when I try to instantiate a grid more than once on a div. It only seems to occur in IE not on any of the other browsers I have tested (chrome, firefox, safari). 

This situation occurs because of the navigation flow of my single page application. As I move from one page to another page I am dynamically paging the content on the screen. When I return back to the listing page I must call the setup listing to refresh the grid (javascript is used to dynamically change the contacts of the page without a browser post, it is all clientside). I have created jfiddle to show this example here. When you click on the "Click Here to Refresh HTML" it resets the html in the div and than sets up the grid. If you look in IE's console you see a SCRIPT5022: DOM Exception: NOT_FOUND_ERR (8) error. Also when you click the other button "Click Me" you receive a different error  Invalid calling object kendo.all.min.js, line 8 character 73742 . Remember to make sure you are on Internet Explorer 9 when running the jfiddle. If I comment out the datasource line for the grid setup than the error does not occur if that helps.

Please help.

Thanks in advance
Atanas Korchev
Telerik team
 answered on 17 Dec 2012
5 answers
513 views
I'm following the dataviz -> bar_charts -> grouped_data example from Kendo.Mvc.Examples that groups by stock symbols and displays closing values by date.
I'm trying to do the same thing and group by sTypeLabel and display dValue by dtDate and it's not working.  I think it has something to do with the read.Action, but I'm not sure how to make it work.  My example is so simple.  When I look at the Kendo.Mvc.Examples it uses an action of  _StockData in Scatter_Charts controller, which I see returns Json(ChartDataRepository.StockData()).  Do I need to create an Action to do something?  Is there documentation on this somewhere?

First my Model class:
    public class TimeBasedTrendsGraphModel
    {
        public int ID { get; set; }
        public DateTime dtDate { get; set; }
        public string sTypeLabel { get; set; }
        public double dValue { get; set; }
    }

My controller:
   public class TimeBasedTrendsGraphController : Controller
    {
        private MOSTestDBContext db = new MOSTestDBContext();

        public ViewResult Index()
        {
            return View(db.TimeBasedTrendsGraph.ToList());
        }

I'm using MOSTestDBContext, which created the SQL Server database MOSTest, in table TimeBasedTrendsGraphModels, with rows:
ID dtDate sTypeLabel dValue
1 2012-01-01 00:00:00.000 CourtesyDriver 5
2 2012-01-01 00:00:00.000 VanDrivers 10
3 2012-01-01 00:00:00.000 LaneCapt 15
4 2012-01-01 00:00:00.000 LotMaint 20
5 2012-01-01 00:00:00.000 LotCoord 25
6 2012-01-01 00:00:00.000 ServiceTruck 5
This repeats for 2012-01-02, 2012-01-03, and 2012-01-04 with the same data, increasing ID's, for testing

My view (Index.cshtml):
@model IEnumerable<MvcApplication5.Models.TimeBasedTrendsGraphModel>

@{
    ViewBag.Title = "Index";
}

<h2>Time Based Trends Graph</h2>

<div class="chart-wrapper">
    @(Html.Kendo().Chart(Model)
        .Name("chart1")
        .Title("Time Based Trends")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("_TBTData", "TimeBasedTrendsGraph"))
            .Group(group => group.Add(model => model.sTypeLabel))
            .Sort(sort => sort.Add(model => model.dtDate).Ascending())
        )
        .Series(series =>
        {
            series.Column(model => model.dValue)
                .Name("value")
                .Stack(true)
                .GroupNameTemplate("#= group.value # (#= series.name #)");
        })
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .CategoryAxis(axis => axis
            .Categories(model => model.dtDate)
            .Labels(labels => labels.Format("MM/DD/YY"))
        )
        .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format("{0}"))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}")
        )
    ) 
</div>
T. Tsonev
Telerik team
 answered on 17 Dec 2012
2 answers
479 views
Hi there,

I got some issue with the kendo datepicker component, he generate wrong date format, my culture is set to "fr-FR", if i use then Kendo Html Helper to generate the component i got a wrong date format, exemple :

@(Html.Kendo().DatePicker().Name("Test").Value(DateTime.Now))
But if i manually instanciate the compenent with javascript like this :
<input name="Test" id="Test" value="@DateTime.Now" />
<script type="text/javascript">
    $(document).ready(function () {
        $('#DebutJ').kendoDatePicker();
    });
</script>
it's correctly display the date, i only have this issue in one area of my MVC app,
Fabien
Top achievements
Rank 1
 answered on 16 Dec 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
Security
ColorPicker
DateRangePicker
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
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?