Hi
  Is this possible? I've tried a few variations but can't seem to get it working

http://dojo.telerik.com/IWag/2

thanks

I created a grid using kendo grid that looks like that 


I also use a "SelfAssesmentEditor" Template that looks like that 

I am currently working on a Web page which is built dynamically, not only on the initial page load, but also updating the page via REST-based service calls which return HTML fragments (containing their own "data-bind" tags) as well as portions of JavaScript meant to augment the observable object.

I have a simple ViewModel which looks like the following:



Inside the Web page, I have both an <input> element and a <div> element (acting as a placeholder) which looks like something below:



In the JavaScript, the view is correctly bound in my $(document).read() :



Now, I make a REST-based service call which return the following fragment (as variable 'htmlFragment'):


I then set the 'html' member of my ViewModel:  


I am seeing the following occur: a) The text box appears with the value "Test"; and b) after the service call, a new text box appears, but without any data.  Now, changing the text box originally rendered will update the ViewModel, but the second text box will not.  The HTML (with the same binding as the first generated text box) is injected into the DOM with the correct data-bind tag, but no binding occurs on the element.

For lack of any other methods I decided to again call kendo.bind($("#mainView"), viewModel) after the service call and after the HTML injection and it then apparently binds correctly and now both text boxes are synchronized.  All of that being said, here are my questions:

a) Is there inherently anything wrong with calling the kendo.bind() method multiple times if either the ViewModel and/or DOM are augmented with new members/bindings?
b) Is there any way to 'refresh' the bindings without calling bind() again (as I don't know how other UI elements will behave yet)?
c) Is it possible to hook the change event (not specifically for a particular named binding, but for a binding type (i.e. "html" binding) and just refresh the bindings for that particular HTML fragment?

Any information or suggestions would be greatly appreciated, thank you!

I have an application with a form in which i have a inline-editor where i can create a html -page. The problem is that i can't put a <form> code in this editor-html, because this is overruled by the parent form. I use the top-form to submit all the information to the server.

I have a sample here : http://jsbin.com/yutugipi/1/edit

In this sample i can't place (in the html-editor) the html-string : <form></form>
If i remove in the source code the <form> definition (so the editor is no longer part of a form), it works fine.

I hope you can solve this problem

Regards,
Ivor

It seems like the event.action "add" is a bit different from the "itemchange". The "itemchange" event does what it should do but the "add" only inserts the values and the change routine is not fired, is there a way to fire the "itemchange" after an "add" to update the row ?

Hi All,

I have a textbox inside template which i want to display on Kendo Popup, everything is working except validation. 

 <script type="text/x-kendo-template" id="popup-template">
     <div>
           @Html.TextBoxFor(m => m.Address)
        </div>
</script>

which will render below html tag for textbox 

<input class="k-textbox" data-val="true" data-val-length="Address  must have a length between 1 and 100 characters." data-val-length-max="100" data-val-length-min="1" data-val-regex="Address must only contain alpha-numeric characters." data-val-regex-pattern="^[A-Za-z\d]*$" id="Address " name="Address " placeholder="Type Address " type="text" value="">

Any specific reason why validation is not working here. Please correct me if I am doing anything wrong here.

Thanks-

Hi All,

I have a textbox inside template, which I want t display on Kendo Popup. Everything is working fine except Validation 

here is Template code:

  <script type="text/x-kendo-template" id="popup-template">
     <div>
   @Html.TextBoxFor(m => m.Address)
        </div>
</script>

here is html render for Textbox :
<input class="k-textbox" data-val="true" data-val-length="Address must have a length between 1 and 200 characters." data-val-length-max="200" data-val-length-min="1" data-val-regex="Address must only contain alpha-numeric characters." data-val-regex-pattern="^[A-Za-z\d]*$" id="Address" name="Address" placeholder="Type Address" type="text" value="">

Any specific reason why validation is not working here. please correct me if I am doing anything wrong.

Thanks-

I am manually adding an object to the dataSouce property of the grid. As expect the item is added. The types of the fields include dates. The dates are not rendering propertly when they are manually added to the grid. 


This is obviously not the look I want in the columns. Can you let me know the best way to format the dates(hopefully by configuration). 

Thanks

I have a kendo grid bound to a data source. I need to display a radio button column for the Primary key in the datasource. 

My Datasource looks something like this

CountryID ,CountryName

1 , SomeCountryName1
2 , SomeCountryName2

Model

public class Country
    {
        public Country()
        {
        }

        public int CountryID { get; set; }
        public string CountryName { get; set; }
    }

What is the right way of adding a radio button client template to the CountryID column. Also i need to obtain the selected Country ID 
I managed to get the radio buttons but they don't seem to be working the way i want it to.

I need to get it working something like this.

The selection of radio button should highlight a single row and give back the ID 


@(Html.Kendo().Grid<Mvc4SampleApplication.Models.Country>()
    .Name("CountriesGrid2")
    .EnableCustomBinding(true) // Enable custom binding
        .Pageable(pager => pager
        .PageSizes(true))
    .Columns(columns =>
    {
        columns.Bound(o => o.CountryID).Width(200).ClientTemplate("<input type='radio' name='CountryID' value='#= CountryID #'  />").Title("Select Country").HtmlAttributes(new { style = "text-align:center" });  
              columns.Bound(o => o.CountryName);

    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Index2", "Address").Type(HttpVerbs.Get))
                        .Model(model =>
                        {

                            //The unique identifier (primary key) of the model is the ProductID property
                            model.Id(country => country.CountryID);

                            // Declare a model field and optionally specify its default value (used when a new model instance is created)
                            model.Field(country => country.CountryName).DefaultValue("N/A");

                            // Declare a model field and make it readonly

                        })
                    ).Pageable(pager => pager
                        .PageSizes(true)).Sortable().Scrollable()
                            .Selectable(selectable => selectable.Enabled(true)
             .Mode(GridSelectionMode.Single)
                       .Type(GridSelectionType.Row)).Events(events => events.Change(@<text>
                function(e) {
                //event handling code
                   
                    alert("Hello");
                }
                </text>)))

 

Hello All,

I am working on customizing the MultiSelect to function a little differently for a slightly older (less Facebook savvy) crowd. I am trying to duplicate the functionality of the following jQuery plugin:
http://www.erichynds.com/examples/jquery-multiselect/examples.htm

Note, the check all / uncheck all is not necessary... I basically want to show the list of check-boxes next to each item, giving a visual indication that items can be toggled on and off.

Adding the check-boxes is a simple task accomplished via templates, and keeping the list open is easy with autoClose: false... but I have a few problems...

1. When an item is selected, it is removed from the list.  I can't find any documentation on how to prevent this
2. Once issue 1 is taken care of, I need to check the check-box and make a second click of the list item deselect said item.  I assume some function bound to the select event will be needed to accomplish this, but I'm not that far along yet.
3. Once 1 & 2 are complete, I will need to pre-select the checkboxes.  I am likely going to jump to an MVVM model for this functionality, but I was trying to keep this simple until I had a proof of concept that the Kendo controls could do what I need.

Here is where I'm at so far:
http://jsbin.com/reluti/2/edit?html,js,output

Doe anyone have any insight on the two issues above?

Thanks,
James Carpenter