This is a migrated thread and some comments may be shown as answers.

[Solved] Grid (editing settings window builder) Example

15 Answers 312 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

15 Answers, 1 is accepted

answered on 23 Sep 2010, 02:39 PM

Thanks Atanas.

This will definitely help, but I guess what I was looking for was some sample code (for the Telerik Grid control) that shows how to setup the Grid to open a custom window. I know I can use the following to open a default PopUp that will reflect my object and display an edit page:

<%= Html.Telerik().Grid<InventoryCategory>()

.Name("InvCatList")

...

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

%>

Figure 1

But what I'd like to do (and I'm not familiar enough with your controls to know if I can) is to pop up a window with custom content. And I don't know if I'd use this:

<%= Html.Telerik().Grid<InventoryCategory>()

.Name("InvCatList")

...

.Editable(editable => editable.Window({...not sure what goes here})

%>

Figure 2

It's the {...not sure what goes here} is where my difficulty is coming in. Do you pass a partial control, markup, etc.?

I know I can create a Telerik window by hand using Html.Telerik().Window() but I'd like to be able take advantage of some of the plumbing inside of the grid for popping up a window when editing as well as take advantage of the plumbing to save the edit without having to write custom javascript to call my action.

I hope this is clear?

I guess it boils down to this. I need to use the Grid and when a rows Edit button (in the grid) is clicked then open a window that contains custom markup to allow the user to edit the data. Then when the Save button (on the window) is clicked, a call will be made to a controller action method that I've denoted on the grid.

My particiular situation prevents me from just using what's in Figure 1 above or I would.

Thanks for your help!

-Mark

answered on 24 Sep 2010, 11:00 AM

Atanas,

I am having a problem when I edit the grid. The grid opens and displays everything just fine, but when I click the Edit button I receive the following:

Line: 106574458
Error: Object doesn't support this property or method

Once I click the No button (on the jscript error message) the popup opens just fine. The code that's highlighted (if I debug the jscript error) is at the very top of the Html and doesn't really point anywhere helpful.

Here's my view:

<%= Html.Telerik().Grid<InventoryCategory>()

.Name("InvCatList")

.DataKeys(dataKeys => dataKeys.Add(ic => ic.InventoryCategoryId))

.ToolBar(tools => tools.Insert().ButtonType(GridButtonType.ImageAndText))

.Columns(columns =>

{

columns.Command(commands =>

{

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

}).Title("Commands")

.Width(125)

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

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

columns.Bound(ic => ic.InventoryCategoryName)

.Title("Inventory Category Name")

.Width(230)

.HeaderHtmlAttributes(new { style = "text-align:left;" })

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

columns.Bound(ic => ic.IsActive)

.Title("Active")

.Width(75)

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

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

})

.DataBinding(dataBinding =>

{

dataBinding.Ajax()

.Select("GetList", "ManageInventoryCategories")

.Insert("Create", "ManageInventoryCategories")

.Update("Save", "ManageInventoryCategories");

})

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

.Scrollable(scrollable => scrollable.Enabled(true))

.Footer(true)

%>

<%= Html.EditorFor(m => m) %>

Here's my object:

[ReadOnly(true)]

[HiddenInput(DisplayValue = false)]

public long InventoryCategoryId

{

get;

set;

}

[DisplayName("Inventory Category Name:")]

[Required, StringLength(50)]

public string InventoryCategoryName

{

get;

set;

}

[HiddenInput(DisplayValue = false)]

public int AppearAfterInventoryCategoryId

{

get;

set;

}

[DisplayName("Appear After:")]

[Required]

[UIHint("AppearAfterInventoryCategory")]

public string AppearAfter

{

get;

set;

}

[DisplayName("Active?")]

public bool IsActive

{

get;

set;

}

[ScaffoldColumn(false)]

public string Active

{

get;

private set;

}

Notice I'm using a UIHint on the AppearAfter property which points to a EditorTemplate named AppearAfterInventoryCategory.ascx. This partial just contains a Telerik dropdown list.

Do you know what might be going on here?

Thanks in advance.

-Mark

answered on 24 Sep 2010, 02:30 PM

Hi Atanas,

To manually add the telerik.list.min.js file, I changed my ScriptRegistrar to the following:

<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => group

.Add("~/Scripts/2010.2.825/telerik.list.min.js")

.Add("~/Scripts/jQuery.Serialization.js")

.Add("~/Scripts/VariLogic.Ajax.js")

.Combined(true).Compress(true))

%>

The script tag that is rendered (when adding the telerik.list.min.js to the ScriptRegistrar) is incorrect.:

<script type="text/javascript" src="http://aspnet-scripts.telerikstatic.com/mvcz/2010.2.825/telerik.list.min.min.js"></script>

Look at the <script tag above and refer to the filename that was generated by the ScriptRegistrar. An extra .min was added to the filename. So I removed the .min from my ScriptRegistrar call (thinking the Registrar must always pull the minified version) and it failed there too.

However, If I don't use the ScriptRegistrar and manually add a <script>...</script> tag pointing to the telerik.list.min.js file, it works fine.

-Mark

answered on 24 Sep 2010, 03:38 PM

Hello MarkOnDotNet,

You can add the file without .min. You also need to register telerik.common.js:

<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => group

        .Add("telerik.common.js")

.Add("telerik.list.js")

.Add("~/Scripts/jQuery.Serialization.js")

.Add("~/Scripts/VariLogic.Ajax.js")

.Combined(true).Compress(true))

%>

Best wishes,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 24 Sep 2010, 07:08 PM

Thanks Atanas!

Do you guys have an area on your site (besides the demos) that shows how to set the value of a dropdown list (that's in a partial control and associated to a model property by the UIHint)? I implemented the .ClientEvents and attached to the OnEdit thinking I could use plain jQuery to set the value through script, but no go...it allows me to set the .val('to some value') but it doesn't retain the setting when the window is displayed.

Or better yet, supply the selected value to the partial control that contains the Telerik.DropDownList(). Is this possible?

Thanks again!

-Mark

answered on 27 Sep 2010, 07:52 AM

telerik-extensions-for-aspnet-mvc-2010-2-926-hotfix.zip

Hi MarkOnDotNet,

You should be able to use the value() JavaScript method to set the selected item based on its value. Unfortunately in the current official release the DropDownList does not support that behavior. The good news is that we recently implemented it and the feature will be live with the next service pack. I am attaching the latest internal build so you can try it.

Regards,
Atanas Korchev
the Telerik team

answered on 27 Sep 2010, 03:41 PM

That fixed it. Thanks Atanas for all your help.

Another need that developers may require (which I do, but wrote my own implementation) is the ability to get the selected index. So, if I have three items in my dropdown list (combobox, whatever) and the second item (index 1) is the selected item - I would like to be able to get or set the selected index.

To Get the Selected Index

var selectedListIndex = $("#AppearAfter").data("tDropDownList").index();

To Set the Selected Index

$("#AppearAfter").data("tDropDownList").index(1);

Business Case
I needed to remove an item from the dropdown list. So, to do so, I had to get the selected index (using the value of the item I had available) and then splice the .data array. Here's the code I used to do this:

//

//Remove the current Inventory Category item (being edited) from the appear

//after list so the edited item is not available for the user to select.

var selectedListIndex = $.telerik.dropDownList.getListIndex("AppearAfter", e.dataItem.InventoryCategoryId.toString());

$("#AppearAfter").data("tDropDownList").data.splice(selectedListIndex, 1);

I've experimented and haven't found a way to do this in the existing implementation of your script libraries.

Thanks,
Mark

answered on 27 Sep 2010, 05:09 PM

Hello Mark,

Thank you for your feedback.

I will forward your request to our developers for further investigation and consideration. If the feature is easily achievable, the feature will be included in the official release of the Telerik Components for ASP.NET MVC scheduled for the end of the September.

Kind regards,
Georgi Krustev
the Telerik team

answered on 23 Nov 2010, 07:10 PM

Hey, just started trying out these extensions and im quite confussed. I used a grid with a command but the command won't take my action/controll settings.

here is my grid

<%= Html.Telerik().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(o => o.name).Width(400);

columns.Command(commands =>

{

commands.Delete();

}).Width(200);

})

.DataKeys(keys => keys.Add(o => o.id))

.DataBinding(dataBinding => dataBinding

.Ajax()

.Delete("Delete", "Deck"))

.Scrollable(scrolling => scrolling.Enabled((bool)ViewData["scrolling"]))

.Sortable(sorting => sorting.Enabled((bool)ViewData["sorting"]))

.Pageable(paging => paging.Enabled((bool)ViewData["paging"]))

.Filterable(filtering => filtering.Enabled((bool)ViewData["filtering"]))

.Groupable(grouping => grouping.Enabled((bool)ViewData["grouping"]))

.Footer((bool)ViewData["showFooter"])

%>

and here is what i get in my form.

<form method="post" class="t-grid-actions" action="/Admin/Deck/Index/bf08e807-5879-4f35-8dbe-1f82c3c19052">

I'm pretty sure the "Index" in that form should be "Delete" for my delete action.

So what is my error here ?

**Update**
I switched out Ajax for server at the databinding and managed to get the form action to match what i needed.

<form method="post" class="t-grid-actions" action="/Admin/Deck/Delete/bf08e807-5879-4f35-8dbe-1f82c3c19052">

However i get page not found now, the only difference from my links by Html.ActionLink and this is that my domain eg. <http://localhost> is in front of /Admin/..., how do i fix this ?

**UPDATE**
Got it working, did not have enabled Post for my action.