Questions on Kendo UI for jQuery Forum

1 answer

152 views

MVC Wrapper Grid ButtonType

Hi,
trying to port an Telerik MVC Grid.
But there is no option to change the button type.

.Columns(cols =>

{

....

cols.Command(commands =>

{

commands.Edit().ButtonType(GridButtonType.Image);

commands.Delete().ButtonType(GridButtonType.Image);

})

.ToolBar(tb =>

{

tb.Insert().ButtonType(GridButtonType.Image);

})

Please tell me how to do this...

Grid

answered on 20 Sep 2012

2 answers

167 views

multi column header

Hi,
how can i do multi column header like:
asp net ajax multi colum demo

Grid

answered on 20 Sep 2012

2 answers

486 views

Changing ButtonType for Grid Commands

Good morning everyone,

I am currently using the licensed version of Kendo UI Complete for ASP.NET MVC (Q2 2012) and trying to figure out how to change the ButtonType for the Grid Commands.

Before this, I was using the licensed version of Telerik Extensions for ASP.NET MVC. Below is the code I had for it:

@{Html.Telerik().Grid(Model)

.Name("grdAllUsers")

.DataKeys(keys => keys.Add(k =>

k.Id)

)

.Columns(columns =>

{

columns.Bound(o => o.FirstName)

.Width(150);

columns.Bound(o => o.LastName)

.Width(150);

columns.Bound(o => o.EmailAddress)

.Width(200);

columns.Command(commands =>

{

commands.Edit().ButtonType(GridButtonType.Image);

commands.Delete().ButtonType(GridButtonType.Image);

})

.Width(70)

.HtmlAttributes(new { style = "text-align:center" });

})

.NoRecordsTemplate(@<text>No User records to display.</text>)

.Pageable(paging =>

paging.PageSize(15)

)

.Sortable()

.Filterable()

.Render();

}

The below is the current Kendo UI code:

@{Html.Kendo().Grid(Model)

.Name("grdAllUsers")

.Columns(columns =>

{

columns.Bound(o => o.FirstName)

.Width(150);

columns.Bound(o => o.LastName)

.Width(150);

columns.Bound(o => o.EmailAddress)

.Width(200);

columns.Command(commands =>

{

commands.Edit().ButtonType(???);

commands.Delete().ButtonType(???);

})

.Width(70)

.HtmlAttributes(new { style = "text-align:center" });

})

.Pageable(paging =>

paging.PageSize(15)

)

.Sortable()

.Filterable()

.Render();

}

When I am using the "Edit" and "Delete" command for the Kendo UI Grid, I need to only use image button type. How do i change it from ImageAndText (which seems to be the default), to Image button type only? How can i make only the images show for these Grid command buttons like "delete", "edit", etc. ??

Thank you very much for your help

Grid

answered on 20 Sep 2012

2 answers

408 views

Edit and Delete Grid Buttons

good morning everyone,

i just read and found out that :
"Buttons related to editing now utilize both images and text. There are no text-only or image-only buttons available" at the below URL

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/migration/widgets/grid#editing

Since it has been implemented like that, is there some sort of work around or way to not have both images and text but only the images for the "Edit" and "Delete" grid buttons when doing Grid editing?????

I know that the Telerik Extensions for ASP.NET MVC Grid allowed for "Images and Text", "TExt" only, and "Image" only:

columns.Command(commands =>

{

commands.Edit().ButtonType(GridButtonType.Image);

commands.Delete().ButtonType(GridButtonType.Image);

})

For my purposes, I really need only the images for the delete and edit button.

Thank you very much for your help

Grid

answered on 20 Sep 2012

0 answers

90 views

Using a library like datejs or sugarjs

I want the user to be able input 'today', 'next friday' etc (as defined http://www.datejs.com/) in the input field to set the desired date, what would be the recommended way to do this?

I imagine that I have to handle the change event, but don't get the text input by the user. Now I can fire a jQuery to find the input element & its value, but I wanted to know if there is a better way to do it so that this code does not break when I upgrade to newer versions of Kendo.

DatePicker

asked on 20 Sep 2012

2 answers

164 views

Menu Styling (background-image not display in firefox)

Please help to look at my simple code as below. Thank you.

<style>
ul.k-menu {
   border: 0;
   background-color: transparent;
   font-weight: bold;
   text-decoration: none;
background-image: url('divBg_bg.jpg');
   background-repeat: repeat-x;
color: White;
}</style>

<div id="example" class="k-content">
<ul id="treeview">
<li data-expanded="true">Item 1
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
</li>
<li>Item 3</li>
</ul>

<script>
$(document).ready(function() {
$("#treeview").kendoMenu();
});
</script>
</div>

Works fine: IE & Chrome.

Not work: Firefox v15.0.1

Menu

answered on 20 Sep 2012

0 answers

169 views

Menu in MVC from Sitemap

Hello all,

I am working on MVC3 App and i would want to have a menu where items will come from sitemap file(I have multiple sitemap files and based on the user selection i have to pass appropriate sitemap to view). i have seen the menu demo in telerik website which says " how to get a menu from single sitemap". Can anyone tell me how i should proceed if i have multiple sitemaps for a single menu.

Appreciate the help

Thanks

Menu

asked on 19 Sep 2012

0 answers

58 views

$(document).on and kendDropTarget

Hi,

In jquery we can do something like that :

$(document).on('click', '.myClass', function () {

....
});

I want to do the same but for the kendo control, I'm doing this on a specific class.

I have this code in my javascript :

$('.myClass'.kendoDropTarget({
	drop: function (e) {
		...
	}
});

So my goal here is to do the line on code $(document).on and affect the kendoDropTarget event.

It is possible ???

General Discussions

asked on 19 Sep 2012

3 answers

253 views

problem with templating and MVVM

Hi,

Urgent Please,
I am evaluating Kendo UI for my company, so please answer it, very urgent please thanks.
Following is the simple example of my problem. I get json data using REST services.
Following is the summary for the problem -
After i ran sample, program display three text boxes, without any value and on editing value, I get the following error in the browser console window -
Uncaught TypeError: Cannot set property 'Name' of undefined

Following is sample code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type = "text/javascript">
        // this is the structure of the data comes from server
        function Employee(Name, Age)
        {
            this.Name = Name;
            this.Age = Age;
        }
        $(document).ready(function ()
        {
            var em1 = new Employee("Daljit", 23);
            var em2 = new Employee("Manjit", 20);
            var em3 = new Employee("Joga", 25);
            var Department =
            {
                Name: "Question Name",
                Employees: new Array(em1, em2, em3)
            };
            var departmentVM = kendo.observable
					(
	                	Department
	                );
            var templateContent = $("#myTemplate").html();
            var template = kendo.template(templateContent);
            $("#daljitControls").append(template(departmentVM.Employees));
            kendo.bind($("#daljitControls"), departmentVM);
        });        
    </script>
    </head>
<body>
    <div id = "daljitControls"> 
            <input type="text" data-bind="value:Name" class="k-textbox" name="Name" /> 
    </div>
    <script type="text/x-kendo-template" id="myTemplate">
           # for (var i = 0; i < data.length; i++) { #
                # var employee = data[i]; #
                 <input data-bind="value: employee.Name" class="k-textbox"/> 
           # } # 
           </script>
</body>
</html>

Thanks,

Templates

answered on 19 Sep 2012

4 answers

226 views

[Solved] GridSettings in a Central Location

I would like to put the main Grid setup in a central location to be reused throughout the application.
What is the best way to do it?

eg something like:

@{

var settings = new MySettings(); //containing .Pageable() .Sortable() etc

settings .Name("KendoGrid")

settings .Columns(columns =>

{

columns.Bound(p => p.Description);

})

.Editable(editable => editable.Mode(GridEditMode.InLine))

.ToolBar(commands => commands.Create())

)

}

@Html.Kendo().Grid(settings).BindTo(Model).Render();