Dear KendoUI team,
my grid displays data delivered from a JSONP webservice.
Rather than extending the webservice model
I would like to tweak a column on the client side to show an <img> depending on the value of another property in the model.

So, how can I show an <img> which' src depends on the value of another property in the model?
For instance:
the service model has a

• Name (string)
• IsValid (boolean)
• Count (number)

property.

Column definitions in the grid look like:
columns:[
   {field:"Name", title:"Product"},
   {field:"IsValid", title: "State"}
]

What I actually want is a column that should behave like:
   {field:"IsValid", title: "State"
     , template: {
         function(model) {
           if(model.IsValid && model.Count > 0)
              return "<img src ='images/good.png'/>";
           else return "<img src ='images/bad.png''/>";
         }
      }
   }
According to the - much better - documentation, "template" property expects a string, but is it possible to add some JavaScript code to the template string as well, something like

var imgTemplate = kendo.template(
   "#if (model.IsValid && model.Count > 0){#<img src='icons/A.png'/>#}#else {#
<img src='icons/B.png'/>#}#"); 

and in the columns definition

template: imgTemplate(model)

Thank you in advance,
Hermann

Hi,
I am using Kendo Grid for Add,Update and Delete functionality. While populating the grid I am giving a list of Data to the grid.  

@model OSI.DNAweb.Web.UI.Areas.Administrator.ViewModels.Business.BusinessUserAccountModel
@(Html.Kendo.Grid<Accounts>()
.Name("Grid")
    .Columns(columns =>
                 {
                     columns.Bound(p => p.AccountNumber).Title("Account Number");
                     columns.Bound(p => p.CreditCardNumber).Title("Credit Card Nbr");
                     columns.Bound(p => p.EnrollTypes).ClientTemplate("#=EnrollTypes.EnrollTypeName#").Title("Type").Width(200);
                     columns.Bound(p => p.DisplayName).Title("Nickname").Width(200);
                     columns.Bound(p => p.AsofDate).Title("As Of Date").Format("{0:d}").Width(50);
                     columns.Command(command => command.Custom("Delete").Click("showDetails")).Width(15);
                 })
                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                })
                     .Editable(editable =>
                     {
                         editable.Mode(GridEditMode.InCell);
                         editable.DisplayDeleteConfirmation(false);
                     }
                  )
                 .Pageable(page => page.Enabled(false))
                 .DataSource(dataSource => dataSource
                          .Ajax()
                          .Batch(true)
                          .Events(events => events.Error("error_handler"))
                          .Model(model =>
                                  {
                                      model.Id(p => p.CompanyIdent);
                                      model.Field(p => p.CreditCardNumber).Editable(false);
                                      model.Field(p => p.EnrollTypes).DefaultValue(new EnrollTypes() { EnrollType = "", EnrollTypeName = "Select" });
                                  })
                          .Create("CreateAccount", "Business")
                          .ServerOperation(false)
                          .Read(read => read.Action("GetAccounts", "Business"))
                          .Update("UpdateAccount", "Business")
                          .Destroy("DeleteAccount", "Business")
                          )
      )

While Adding,Updating and Deleting it is sending a list of Accounts Class to the respective ActionResult in the controller with the changes. But In my case I want to use BusinessUserAccountModel and pass it to the controller so I can also have some additional properties mentioned in BusinessUserAccountModel class along with Accounts Collection.Please see below the Classes structure:

    [Serializable]
    public class Accounts
    {
        #region Properties
        public int CompanyIdent { get; set; }
        [Required]
        [DNAwebCustomValidator(DNAWebValidationDataTypesEnum.AlphaNumeric)]
        public string AccountNumber { get; set; }
        public string CreditCardNumber { get; set; }
        [Required]
        [DNAwebCustomValidator(DNAWebValidationDataTypesEnum.AcctNickName)]
        public string DisplayName { get; set; }
        [DNAwebCustomValidator(DNAWebValidationDataTypesEnum.Date)]
        public string AsofDate { get; set; }
        [UIHint("AccountTypes"), Required]
        public EnrollTypes EnrollTypes { get; set; }
        #endregion
    } 

    public class BusinessUserAccountModel : BusinessUserBaseModel
    {
        public IEnumerable<Accounts> Accounts { get; set; }
        public BusinessUserAccountModel(){}
        public BusinessUserAccountModel(BusinessData businessData,IEnumerable<Accounts> accts) : base(businessData, BusinessTab.Accounts)
        {
            Accounts = accts;
        }
    }
As you see above BusinessUserAccountModel is further inheriting BusinessUserBaseModel. If somehow in my grid CRUD operations if i able to pass BusinessUserAccountModel class along with the Accounts Collection that will solve my problem.

Just for more clarification in my page I have other controls in my page other than grid, so whenever I do CRUD operation in the grid those controls validation should also get fired. Hope you got cleared with my problem.     

Thanks,
Nandan

 

Hi,

Is it possible to change the text "Insert HTML" in the editor when using snippets?

http://demos.kendoui.com/web/editor/snippets.html

Greets

Sébastien

I have a grid to which I bind some data using a datasource . My problem is that my json objects have some nested arrays inside and I want that when you click on the edit button I should be able to see that array in a list.



How do I get that collection to be displayed in my edit template so that I can add or delete items.jsfiddle example

I want to add checkbox in the grid column, for that i am using .Template(" Check box code")

same as below example,

columns.Template(@<text>
                     <input name="selectedProducts" type="checkbox" title="select product" value="@item.ProductID" 
                     @{
                         if (@item.ProductID)
                         {
                            @("checked=checked")
                         }
                     }/>
                    </text>)

But i am getting this value as undefined.

Any ideas will be appreciated for the same.

Thanks in advance!!

Hi Friends,

I am New to this Kendo UI conrols.
I am using ASP.NET MVC framework.
I am facing issue on the following problem.
I have a xml files with me.
I want to read the xml file  data and display the data in a grid. I also required the in-line edit option in the kendo Grid. When the user edit some data, the source xml file needs to update.

kindly give some solution for this.

Thanks
A R

I am really struggling with this. I have tried looking at every forum example and made sure that I have the right code and the right format for the JSON file, but I cannot get the grid to show anything but the column headers.

Any help would be appreciated.

Thanks,
Brian

I have one dropdwonlist in my view i want to when change dropdownlist list many checkbox and id change again save the state

Hi,

So I've just started using the UI, but I've used the Jquery mobile one before.  Features I liked that I can't find is:

Go to an another page.  
     Page 1 url: /home
     Page 2 url: /search

and NOT
    url: /#/search

I don't want the ajax calls to happen.  I like them don't get me wrong but the next page does it's own stuff.  

can you add the feature of "data-ajax=false" or "rel=external".  Something so we can move to the next page and not load within.

Thanks

Hi,

I used a script file (xxx.js) where i created a div with id = "#divid" and then created the window. I added this script file to my page in head tag. Now if i try to access the div with id "#divid" i am able to access it but if i try to access

$(

 

'#divid')..data("kendoWindow"), it is giving null error. if i create the kendo window in the page itself in a script tag, iam able to access the data object but if i do the same in seperate js file, i am not able to. Is there any problem with this type of creating? Please help me out. Following is code snippet in my .js file.

 

$(

 

'[data-class=MyModal]').click(openmodal);

 

 

 

function openmodal(event) {

 

 

 

var dialog = $('#divid');

 

 

 

debugger;

 

 

 

if (dialog.length == 0) {

 

dialog = $(

 

'<div id="divid" style="display:none"></div>').appendTo('body');

 

}

 

dialog.kendoWindow({

modal:

 

true,

 

title: "Some Title"

 

,

 

actions: [

 

"Close"],

 

draggable: true

 

,

 

resizable: true

 

,

 

height: "400px"

 

,

 

width: "400px"

 

,

 

content: "myurlofsomepagewithinsamedomain",

});

dialog.data(

 

"kendoWindow").center();

 

dialog.data(

 

"kendoWindow").open();

 

}

 

 

event.preventDefault();

 

 

 

 

 

}