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

Does Kendo UI have a replacement for a select element with a size attribute - essentially a list box?  I looked at the Kendo ListBox but didn't see how I could only have one item per row.

Thanks,
--Ed

In my scenario I need to load a dropdownlist with data that is determined at runtime.

In my case I have a grid filed with a single product's master data.   Each row in the Kendo grid contains an attribute name and its associated value.   

ex. "Product Name" "Ibuprophen"
      "Strength"            "200 mg"
      "Form"                  "Casule"

Each attribute of the product comes from a different master data table, so what I was hoping to do was pass an entire object containing the information I need to dynamically load the dropdownlist to the editor template like so:

@model IEnumerable<NewGlobalProductCatalogue.Models.ProductInfo>

<p>Product Info - @ViewBag.ProductLanguage</p>
@{ string lang = ViewBag.ProductLanguage; }

@(Html.Kendo().Grid(Model)
    .Name("ProductInfo_" + lang)
    .Columns(columns =>
    {
        columns.Bound(c => c.ColumnName);
        columns.Bound(c => c.ProductData.FieldName);
        columns.Bound(c => c.ProductData).ClientTemplate("#: ProductData.MasterDataValue   
#").EditorTemplateName("EditorProductMasterData");       <<--this is the important line... ProductData is a class with all the data I need to look up the product master data

        columns.Command(command => { command.Edit(); });
    })
    .DataSource(d => d
      .Ajax()
      .Read(r => r.Action("Get", "Product"))
      .Model(m =>
      {
         m.Id(p => p.ProductData.FieldID);
         m.Field(p => p.ColumnName).Editable(false);
         m.Field(p => p.ProductData.FieldName).Editable(false);
         m.Field(p => p.ProductData.MasterDataValue).Editable(true);
      })
     .Update(u => u.Action("Update", "Product"))
     )
    .Pageable()
    .Editable(e => e.Mode(GridEditMode.InLine))   

And then in the editor I would pass the necessary parameters on to the .read action so that the controller would dynamically load the listbox from the correct table.   (NOTE: All the master data tables have a predictable field structure so I simply call a dynamic stored procedure which builds the appropriate SQL query)

Here was my editor:

@model NewGlobalProductCatalogue.Models.ProductMasterData
@(Html.Kendo().DropDownList()
.Name("MasterDataValues")
.DataValueField("MasterDataID")
.DataTextField("MasterDataValue")
.DataSource(d => d
   .Read(r => r.Action("Index", "MasterDataSelection", new { countrycode = Model.Country, lang = Model.Language, GlobalFieldName = Model.FieldName, MDTableName = Model.MasterDataTableName }))
)
.SelectedIndex(0)
)


Of course it all came crashing down when I realized that the editor template is only called once when the grid is built.   The weird part is, the controller that loads the data IS called every time I click on a rows EDIT button.
 
public class MasterDataSelectionController : Controller
    {
        //
        // GET: /MasterDataSelection/
        private APOIPCEntities db = new APOIPCEntities();
        public JsonResult Index(string countrycode, string lang, string GlobalFieldName, string MDTableName)
        {

           return  this.Json(db.GetCountryLanguageMasterData(countrycode,lang,GlobalFieldName, MDTableName), JsonRequestBehavior.AllowGet);

        }
}

I am wondering if someone can think of a sneaky way this behavior could be exploited to achieve the dynamic data loading I am looking for.   Maybe if I could put a function call in my controller that could look back into the grid to see what row it is currently focused on, and extract the necessary data from it prior to calling the stored procedure ..... just not sure how to do that.


Thanks for any thoughts you might have.

-Sheldon 

I am using a kendo grid for a task list and when users click on the row item it opens a web page.

The hyperlink to the web page can be from different projects so this is all dynamic.

I am having a problem that sometime the the last part of my URL is truncated.

Below is my code from when the grid row is selected:

When i alert my data variable the Url is correct:
http://test/Workflow/SetStatus/1

But when the iframe is loaded the /1 part is removed.
The iframne tries top navigate to: http://test/Workflow/SetStatus

I have no answer as to why this happens.

function TaskItemSelected(e) {
        var sender = e.sender;
        var model = sender.dataItem(sender.select());
        if (!model) {
            return;
        }
        var serialNumber = model.SerialNumber;
        var data = model.Data;
        alert(data);
        $('html,body').css("cursor","wait");

        var windowElement  = $("<div />").attr("id", "taskdetailswindow").kendoWindow({
            modal: true,
            draggable: true,
            position: {
                top: 50,
                bottom: 50
            },
            resizable: true,
            width: "850px",
            height: "500px",
            title: "Task Details",
            actions: [
                "Close"
            ],
            iframe: true,
            content: data,
            refresh: function () {
                $('html, body').css("cursor", "auto");
            },
            close: function () {
                $("html, body").css("cursor", "auto");
                $("#TaskListGrid").data("kendoGrid").dataSource.read();
            },
            error: function () {
                $("html, body").css("cursor", "auto");
            }
        }).data().kendoWindow.center().open();
    }


Any ideas suggestions would be much appreciated.