Questions on Kendo UI for jQuery Forum

2 answers

133 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

442 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

380 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

75 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.

Date/Time Pickers

asked on 20 Sep 2012

2 answers

132 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

144 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

41 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

237 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

154 views

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();

Grid

answered on 19 Sep 2012

2 answers

857 views

Read() without cache

I have a problem that when we datasource.read() it gets cached data and not up-to-date data from the server.
Of course it seems that it only does it in internet explorer... firefox works fine.

We send a query string with a random number to keep the request from getting cached data.

GridData = new kendo.data.DataSource({

transport: {

read: {

url: buildAsyncUrl('GetData'),

dataType: "json",

data: JSON.stringify(GridFilters)

}

},

......

});

function buildAsyncUrl(cont) {

return cont + '/?nocache=' + Math.random();

}

//whenever we need to refresh the grid we call:

GridData.read();

If you profile it it firefox:
1rst request:   ?nocache=0.36012812319771115
2nd request:   ?nocache=0.5465367197402407
3rd request:   ?nocache=0.5722005265817256

If you profile it in IE:
1rst request:   ?nocache=0.6602959470869887
2nd request:   ?nocache=0.6602959470869887
3rd request:   ?nocache=0.6602959470869887

How can I keep the datasource.read() from reusing the same value (url) it had when first called or initiated??
Or is there any "no cache" like option?

Data Source

answered on 19 Sep 2012