Hey,

I've recently started working with the grid component and have the need for custom templates for columns (checkboxes for booleans instead of true/false, slider for certain integer values etc).

When I set up a template for a column e.g. template: '<div style="text-align: center"><input type="checkbox" #= is_included ? checked="checked" : "" # /></div>' it displays as expected but any changes to the column are not reflected back in the datasource. 

I've seen mention of this before in the forum and was wondering if it has been fixed and I'm missing a step and if it currently is something that's missing is it going to be added at some point.

Thanks for your help

How do I change the transition on a kendoToggleClass? e.g
function toggle_button(e) {
    e.button.kendoToggleClass('not-complete', {transition:'linear'});
};
Can't work out the syntax...

Hi,

Is it possible to bind a ListView to a collection of HTML elements?

If items is an ObservableArray of <li> elements, what goes into the template?  Or is a template necessary?

<script id="li-template" type="text/x-kendo-template">

    ???? WHAT GOES HERE if items is a collection of <li> elements

</script>

<ul id="documentsList" data-role="listview" data-bind="source: items" data-template="li-template"></ul>

Incidentally, the reason the items collection contains HTML elements (<li>) rather than data objects is because the list-items wrap Seadragon.Viewer objects.  The constructor for a Seadragon.Viewer object takes a container HTML element as its parameter.  At this point, I’m merely exploring ways to convert this section of code to an MVVM approach using declarative bindings.  Toward that end, binding to the ObservableArray of <li> elements would be a first step.  But if there is a better approach – I suspect there is – then I would certainly like to hear about it.

Thanks!

Hi there,

I have an issue with the stock browser on the Samsung tab 10.1 whereby the device renders what looks to be a native textview over the html input tag when it receives focus. When receiving focus the popover and modalviews both close immediately. The popop or modalview do not close when not using the splitview.

See these videos.

Working without splitview
http://sdrv.ms/13i1Blz

Closing immediately with splitview
http://sdrv.ms/13i1CpE

I am using the modalview index.html directly from your samples. With the splitview/modalview page, I have dropped the Modalview code into the splitview index.html. See attached

I do not experience this problem on the google nexus 7 tablet using chrome.

Side Note: Would you happen to know whether I can disable this rendering behaviour on this Samsung device? I have noticed other Samsung specific UX behaviour in the browser, in particular drop down select lists draw completely different, so turning this off would be ideal. 

Given its only happening via the splitview, i suspect it could be fixed/addressed by your product, if not, are you able to provide an explanation as to what order of focus/hide events could be happening on this tablet that makes the browser behave like it is which I can then pass onto a ticket with Samsung. 

Thanks.

Please help me out in doing server side pagination using kendo grid
Below is my index.cshtml

@using Kendo.Mvc.UI
<script src="../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
@*<script src="../../js/jquery-1.7.1.min.js" type="text/javascript"></script>*@
@*<script src="../../js/jquery.min.js" type="text/javascript"></script>*@
<link href="../../styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<script src="../../js/kendo.all.min.js" type="text/javascript"></script>
<link href="../../styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="../../js/kendo.aspnetmvc.min.js" type="text/javascript"></script>




@model IEnumerable<KendoGrid.Controllers.Product>

@(Html.Kendo().Grid(Model)    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID).Groupable(false);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Address);
        columns.Command(command => command.Destroy()).Width(110);
    })
    
    .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();                
    })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
            
    .Sortable(sortable => sortable.SortMode(GridSortMode.MultipleColumn))
    .Scrollable()
    .Navigatable()
    .Filterable()
    .Pageable()
    .Groupable()
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
    .Selectable()  
         
    .DataSource(dataSource => dataSource       
        .Ajax()         
        .Batch(true)        
        .ServerOperation(true)        
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ID))
        .Create("Editing_Create", "Home")
        .Read("Editing_Read", "Home")                    
        .Update("Editing_Update", "Home")
        .Destroy("Editing_Destroy", "Home")
       
       
    )
   
    )

And below is my HomeController.cs

using System.Collections.Generic;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;
using System.Linq;
using System.Web;

namespace KendoGrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            //return View(GetProducts());
            return View();
        }

        public ActionResult Remote_Data()
        {
            return View("AjaxBinding");
        }

        //public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
        //{
        //    return Json(GetProducts().ToDataSourceResult(request));
        //}



        public ActionResult Editing()
        {
            return View();
        }

        public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
        {
            

            return Json(SessionProductRepository.All().ToDataSourceResult(request));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<Product> products)
        {
            var results = new List<Product>();

            if (products != null && ModelState.IsValid)
            {
                foreach (var product in products)
                {
                    SessionProductRepository.Insert(product);
                    results.Add(product);
                }
            }

            return Json(results.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<Product> products)
        {
            if (products != null && ModelState.IsValid)
            {
                foreach (var product in products)
                {
                    var target = SessionProductRepository.One(p => p.ID == product.ID);
                    if (target != null)
                    {
                        target.Name = product.Name;
                        target.Address = product.Address;
                        SessionProductRepository.Update(target);
                    }
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Editing_Destroy([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<Product> products)
        {
            if (products.Any())
            {
                foreach (var product in products)
                {
                    SessionProductRepository.Delete(product);
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

        public ActionResult Products(int pageSize, int skip)
        {
            var products = SessionProductRepository.All();

            // Get the total number of records - needed for paging
            var total = products.Count();

            // Page the data
            var data = products.Skip(skip).Take(pageSize).ToList();

            // Return as JSON - the Kendo Grid will use the response
            return Json(new { total = total, data = data });
        }



        //private static IEnumerable<Product> GetProducts()
        //{
        //    List<Product> products = new System.Collections.Generic.List<Product>();

        //    products.Add(new Product { ID = 1, Name = "Test-1", Address = "Address-1" });
        //    products.Add(new Product { ID = 2, Name = "Test-2", Address = "Address-2" });
        //    products.Add(new Product { ID = 3, Name = "Test-3", Address = "Address-3" });
        //    products.Add(new Product { ID = 4, Name = "Test-4", Address = "Address-4" });

        //    return products;
        //}

    }






    public class Product 
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
    }

    public static class SessionProductRepository
    {
        public static IList<Product> All()
        {
            IList<Product> result = (IList<Product>)HttpContext.Current.Session["Products"];

            if (result == null)
            {
                
            List<Product> products = new System.Collections.Generic.List<Product>();

            products.Add(new Product { ID = 1, Name = "Test-1", Address = "Address-1" });
            products.Add(new Product { ID = 2, Name = "Test-2", Address = "Address-2" });
            products.Add(new Product { ID = 3, Name = "Test-3", Address = "Address-3" });
            products.Add(new Product { ID = 4, Name = "Test-4", Address = "Address-4" });

            products.Add(new Product { ID = 5, Name = "Test-5", Address = "Address-5" });
            products.Add(new Product { ID = 6, Name = "Test-6", Address = "Address-6" });
            products.Add(new Product { ID = 7, Name = "Test-7", Address = "Address-7" });
            products.Add(new Product { ID = 8, Name = "Test-8", Address = "Address-8" });
            products.Add(new Product { ID = 9, Name = "Test-9", Address = "Address-9" });
            products.Add(new Product { ID = 10, Name = "Test-10", Address = "Address-10" });
            products.Add(new Product { ID = 11, Name = "Test-11", Address = "Address-11" });
            products.Add(new Product { ID = 12, Name = "Test-12", Address = "Address-12" });
            products.Add(new Product { ID = 13, Name = "Test-13", Address = "Address-13" });

            HttpContext.Current.Session["Products"] = result = products;
            }

            return result;
        }

        public static Product One(Func<Product, bool> predicate)
        {
            return All().Where(predicate).FirstOrDefault();
        }

        public static void Insert(Product product)
        {
            product.ID = All().OrderByDescending(p => p.ID).First().ID + 1;

            All().Insert(0, product);
        }

        public static void Update(Product product)
        {
            Product target = One(p => p.ID == product.ID);
            if (target != null)
            {
                target.Name = product.Name;
                target.Address = product.Address;
            }
        }

        public static void Delete(Product product)
        {
            Product target = One(p => p.ID == product.ID);
            if (target != null)
            {
                All().Remove(target);
            }
        }
    }

}

Hi,

I need a "ComboBox" to look and behave similar to "Autocomplete". I need "dataValueField" and "dataTextField" so I have to use "ComboBox" control. My "ComboBox" is using REST JSON service that filters the data, but the service is called only the first time.


I believe I have to use "change" event of "ComboBox", but I am not sure if this is the right pattern.

I would appreciate help. Thanks.

Igor

Hi,

If I stop dragging an element outside of the drop target it 'flies' back to the original position.  Is there any way to prevent this?  Ideally, I'd like it to be able to just fade it out and have the original fade back in.  Any help would be appreciated on achieving this please?

How can I scroll a data item into view? (Even if it is on a different page).

Hello,

i've searchd for a way to add new items to a exsisitng ListView without reading the DataSoucre again.

I want to add one or more complete filled items to the exisiting ListView that have a DataSource the question is how should i do that?

Sample-Code:
If i use after the initialisation of the ListView the follwoing Code it will work but i need a way to add these items withoud rebinding the DataSource.


Your help would be very welcome!

I'm not sure if this is bug or I'm doing something wrong. But I have a grid with a custom template. There are data-bind:click bindings inside the template. I also have a dropdownlist on the same page that is bound to that same datasource. When the dropdownlist is bound, the click bindings inside the grid row template don't work and give an error:
 TypeError: Object [object Object] has no method 'apply'
Once i remove the binding from the dropdownlist it works. Everything else seems to be fine with the dropdownlist.