Hello,

I wanted to develop application using kendo mobile ui in Asp.net MVC 3.  In my application for all view couple of things are common like footer. 

I want same footer in all pages . Right now I am writing below code in all my view. I don't wont to write below code in all my view.

<footer data-role="footer">
              <div data-role="tabstrip">
                 <a href="#home" data-icon="home">Home</a>          
                 <a href="#products" data-icon="info">Products</a>
                 <a href="#settings" data-icon="cart">Cart</a>         
                 <a href="#contact" data-icon="contacts">Contact</a>
              </div>
 </footer>

Is there any way to achieve this thing? Can any one please send me sample code for this?

Thanks

I keep coming across usage of the data-role attribute, but I can't find any documentation that explains what it is for and how to use it. Can you help?

Here's the scenario, I have a grid (i'm using MVC wrapper to create it, but the problem is on the client so this forum should be ok...), the grid is setup for editing in popup mode. On the databound event, I have some script that alters the buttons to use my own icons rather than the default and it removes any text in the buttons as well.

This is made necessary since there is no way to customize the button's html.

Here's the script that runs on the databound event: The above script works great, it displays exactly like i want it to. The details button is a custom button, while the edit and delete are the default output of the MVC wrapper for those commands. The problem starts when I complete an edit, rather when i click the "Update" or "Cancel" button on the popup. For some reason, the buttons switch back to thier original state with the original icons and text.

I've tried binding to the click events of the update and cancel, but the change is occuring after that event. I've tried binding to the DOMNodeInserted/DOMNodeRemoved events but I cannot seem to get those events to bind or fire consistently across all browsers or all situations.

Any ideas on how to prevent the buttons from changing back to thier original state? Any help would be appreciated.

I built a custom download using your tool for the last release. I now need to use the current internal build/hotfix but the custom download tool does not support internals, apparently.

How can I combine the .js files I need into one kendo.custom.min.js file? Is it simply a matter of iterating thru each file and concatenating the text into the new file? Is there an order that must be observed?

I tried this LinqPad C# script but the resulting .js file did not appear to work.
Thanks,
Gary Davis

For some reason i can get second tab (Product Details) to bind record in the grids although the GetAllProductList return records. Please advise, thank you

index.cshtml

@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items =>
{
items.Add().Text("Search")
.LoadContentFrom("Index", "ProductDetails")
.Selected(true);



items.Add().Text("Product Details")
.LoadContentFrom("_Product", "ProductDetails")



})
)

_Product.chtml (Partial page)

@(Html.Kendo().Grid<HH.PrductModel>()

.Name("Product")
.HtmlAttributes(new { @Style = "align:center; font-size:10px; width:950px" })
.Columns(columns =>
{

columns.Bound(p => p.ProductId).Width(95);
columns.Bound(p => p.Name).Width(120);


})

.ToolBar(toolbar => toolbar.Create())
.Sortable()
//.Pageable()
.Pageable(paging => paging
.Input(false)
.Numeric(true)

.PreviousNext(true)
.PageSizes(new int[] { 5, 10, 25, 50 })
.Refresh(false)

)
.Selectable()
.Scrollable()
.ColumnMenu(c => c.Columns(false))
.DataSource(dataSource => dataSource

.Ajax()//bind with Ajax instead server bind
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.ProductId);

})
.Sort(sort => sort
.Add(x => x.Name).Descending())

.Read(read => read.Action("GetProductData", "ProductDetails").Type(HttpVerbs.Get))


)



)

ProductDetails controller

public ActionResult GetProductData([DataSourceRequest] DataSourceRequest request)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
return Json(GetAllProductList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

The following will return records but for some reason it would bind to grid in Product details tab

/// <summary>

/// </summary>
/// <returns></returns>
private static IEnumerable<ProductModel> GetAllProductList()
{
using (var dc = new HHEntities())
{
var result = (from a in dc.Products

select new ProductModel
{
ProductId= a.ProductId,
Name= a.Name,
Description= a.Description,
ExpiryDate= a.ExpiryDate


});
return result.Distinct().ToList();
}


}

public ActionResult  _Product()
{
      return PartialView();
}

I have a ClientListItem javascript prototype with several fields such as "ClientName" and "ClientID". I have a list of these objects in a viewmodel datasource called "BrokersDatasource". It is a property of a kendo observable.

In the HTML markup I declare the combobox and bind it to the datasource with the following
<input
id="viewRequest_drpBroker"
data-role="combobox"
data-text-field="ClientName"
data-value-field="ClientID"
data-bind="source: BrokersDatasource, value: InspectionRequest.BrokerID"
/>

The list is populated correctly, the datasource is bound, the proper text appears, however the ClientID is not being bound as the value. On selection of a combobox item I am expecting the ClientID to be reflected in the viewmodels InspectionRequest.BrokerID. However instead of setting the ClientID, it is setting the entire ClientListItem instance to the BrokerID. So the actual BrokerID value is something like '{ClientName: "Generic Broker", ClientID: "44"}', when in fact it should just be "44".

The issue only occurs one way. If I set the BrokerID using viewmodel.set("InspectionRequest.BrokerID", 44), it will find and toggle the correct list item and text in the widget. However when selecting from GUI/Widget it sets the BrokerID to entire instance of the object instead of just numeric value.

The bug is present in both the latest commercial release(2012.1.515) and latest internal build(2012.1.615). I have used autocomplete and dropdownlists in a similar way with no issues encountered.

Do you enjoy Google’s instant search feature?  If so, this is the tutorial for you.  Basically we want to create a widget that will update search results as you type in a text box. Google calls this “Instant”.  We can achieve this same functionality by combining the AutoComplete widget and the Grid widget.

Setup the AutoComplete control.
We need to set Suggest = false, otherwise the control will attempt to suggest a value within the search textbox.  The magic happens in our event handlers, “BenefitDataBound” and “OnOpen”.

When the AutoComplete widget is databound, we simply want to extract the JSON data from the datasource and pass it off to a method that will create and bind a Grid.

Or if you prefer to create everything using the MVC wrappers, you can do the following:



Lastly we need to prevent the AutoComplete widget from displaying any UI.  This can be handled by the OnOpen event handler.

There you have it.  Enjoy!

Hi. 

I am trying to figure out how I get only the checked children of a node, not checked grand children. 

I use this code at the moment, fires when i click on a link attached to the parent:

var tree = $("#treeview").data("kendoTreeView");
var items = $(this).closest(".k-item").find(".k-group .k-item input[type=checkbox]:checked");
                items.each(function() {
                    var getNode = $(this).closest(".k-item");
                    var item = tree.dataItem(getNode);
                    console.log(item.id);
                });
            }

This code gives me all checked children, grand children and so on, but i need only the children. I tried changing the .find() filter with .children() filter, but then items is empty.

Can anyone point me in the right direction? Your help is much much appreciated.

Hi,

I am using kendo date picker in couple of places in my application, and it is appearing differently in some places. Some places these are having shadow around them while some places these are fine.
Please see the attached file to see the appearances.

Please le me know why these are having shadow around them.

Regards,

Poonam


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 




At another place the
kendo datepicker


 


 

Edited to add - I just realized I didn't put this post in the MVC specific forum.  I'm going to post it there as well, feel free to delete this if necessary.

Greetings, I've been trying to set up a modal popup Window that contains a treeview from which a user can select a single item and then close the window.  

I basically took the code we use all over our site for modal popup windows (without errors) and then just tried putting a treeview in it.   In Firefox the error is not explicitly thrown, the tree itself renders, but anything you tried to put in the window underneath the treeview does not render at all.  In Chrome, the window renders but not the tree and no error is thrown (i.e. you get an empty window).  In IE you get an error in jQuery-1.8.2.min.js as soon as you try to open the window.  The error says "0x80020101 Microsoft JScript Runtime Error:  could not complete the operation due to error 80020101" (useful, I know).  The window never opens at all.

I created a dummy test page on my site that includes only the kendo and jQuery libraries/css/js files in the layout and removes everything not involved with housing the treeview in the window and I still get the same error.

The error occurs before calling the controller method to get the data to populate the tree (and I have another treeview that is NOT in a window using the same controller method which one works properly, and if I run in firefox it does actually call the method and populate the tree, just nothing below the tree like buttons - so I am positive the problem is not the controller method).  You can substitute any data you want if you try to repro this since the code below is data agnostic, just give it's type a property called TagName or substitute your own value of DataTextField.

If I remove the code defining the treeview and replace it with a simple "hi", I do not get the error, which proves the problem is the tree + window combination (because remember, the exact same tree works perfectly outside of the window).  

My code is below, distilled down to the absolute simplest case, still throwing the same error in IE9:
(I even got rid of the select handler and the confirm/cancel buttons just to try to get rid of the error)

The versions of jQuery & jQueryUI we include are the full downloaded library from jQuery - we have not customized them in any way.  The specific version number that we are using are ones we've had to upgrade to because of error conflicts with other between other Kendo controls and jQuery.  I suspect something similar is at play here.

If there is a specific way I need to set up the window to support this functionality please let me know, or if there is a problem with the interaction of the window + tree + jQuery that needs to be fixed can we please get a patch for it ASAP?  There are a bunch of places in our app where we'll need to have a tree in a popup window like this.

Thanks in advance, please let me know if you need anything else from me to diagnose the issue!

@model NeedleFinder.WebUI.Areas.CaseMgmt.Models.Tag.ManageTagsViewModel
@using Kendo.Mvc.UI
@{
    ViewBag.Title = "TreeWindowPopup";
    Layout = "~/Views/Shared/_TestLayout.cshtml";
}
<div>  <input type="button" name="btnChooseParent" value="Select" onclick="openParentTagList();" />
</div>
<script id="parentTagSelection" type="text/x-kendo-template">

  @(Html.Kendo().TreeView()
        .Name("trvParentTag")
        .DataTextField("TagName")
       .DataSource(dataSource => dataSource
                                      .Read(read => read
                                                        .Action("GetTagsForTree", "Tag", new { area = "CaseMgmt" }))
        )
   )  

     
</script>
  
<script type="text/javascript">

    function openParentTagList() {
        var kendoWindow = $("<div />").kendoWindow({
            title: "Select parent tag",
            resizable: false,
            modal: true,
            height: 500,
            width: 400
        });

        kendoWindow.data("kendoWindow")
            .content($("#parentTagSelection").html())
            .center().open();

       
        return false;
    }
   
    </script>


My layout looks like this:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/redmond/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <!-- PROTOTYPE CSS -->

    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.web.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jQuery.Validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    @if (false)
    {
        <script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
    }
</head>

    <body>
       
        @RenderBody()
</body>
</html>