This project is read-only.

Advice on Using Jquery/Javascript in DataGrid Edit Template

Apr 18, 2013 at 4:07 PM
Hi,

I've been getting to grips with using the MVC Control Toolkit and so far so good! I have a Templated Datagrid I'm using to display records and I'd like to add some client side script to make some changes depending on the value of the Push Message field. Here's a row from my grid in edit mode.

Screen shot

So if the user selects Yes for Push message then there are some extra validation rules to apply such as message can only be 50 characters long and the URL field is not required. How would you recommend going about adding this functionality to my datagrid. The code for my edit template is shown below.

Thanks

Al
        @<text>
        <td class="ToDo">
            @item.ValidationMessageFor(m => m.GroupId, "*")
            @item.ValidationMessageFor(m => m.NewNotificationGroupIdList, "*")

            @if (item.ViewData.Model != null && item.ViewData.Model.GroupId != null)
            {
                @item.DropDownListFor(m => m.GroupId, ChoiceListHelper.Create(Model.CollectionGroupList, p => p, p => p, p => p))
                @item.Hidden("NewNotificationGroupIdList", "single")
            }
            else
            {
                @item.Hidden("GroupId", "multiple")
                @item.DropDownListFor(m => m.NewNotificationGroupIdList, new { multiple = "true" }, ChoiceListHelper.Create(Model.CollectionGroupList, p => p, p => p, p => p))
            }
        </td>
        <td class="ToDo">
            <table>
                <tr>
                    <td>
                        Title
                    </td>
                    <td>
                        @item.ValidationMessageFor(m => m.Title, "*")
                        @item.TextBoxFor(m => m.Title)
                    </td>
                </tr>
                <tr>
                    <td>
                        Message
                    </td>
                    <td>
                        @item.ValidationMessageFor(m => m.Message, "*")
                        @item.TextAreaFor(m => m.Message)
                    </td>
                </tr>
                <tr>
                    <td>
                        Push Message
                    </td>
                    <td>
                        @item.ValidationMessageFor(m => m.IsPushMessage, "*")
                        @item.DropDownListFor(m => m.IsPushMessageString,
                                                    new SelectList(
                                                        Model.YesNoList,
                                                        "value",
                                                        "text",
                                                        item.ViewData.Model.IsPushMessageString))
                    </td>
                </tr>
                <tr>
                    <td>
                        Url
                    </td>
                    <td>
                        @item.ValidationMessageFor(m => m.Url, "*")
                        @item.TextBoxFor(m => m.Url)
                    </td>
                </tr>
            </table>
        </td>
        <td class="ToDo">
            @item.ValidationMessageFor(m => m.DateTimeFrom, "*")
            @item.DateTimeFor(m => m.DateTimeFrom, DateTime.Today).Date()
        </td>
        <td class="ToDo">
            @item.ValidationMessageFor(m => m.DateTimeTo, "*")
            @item.DateTimeFor(m => m.DateTimeTo, DateTime.Today).Date()
        </td>
        <td class="ToDoTool" colspan="2">
            @item.HiddenFor(m => m.NotificationId)
            @item.HiddenFor(m => m.CreatedDate)
            @item.HiddenFor(m => m.CreatedBy)

            @item.ImgDataButton(DataButtonType.Cancel, "../../Content/undo.jpg", null)
        </td>
        </text>
Coordinator
Apr 19, 2013 at 5:41 PM
What you need is conditional validation. The right way to implement conditional validation is by implementing new validation attributes and all stuffs needed to apply the validation also on the client side. If you do this job for the validation rule you need the grid will automatically apply your custom rules, as it applies the standard validation rules with no further effort. To extend your attribute on the client side it must implement the IClientValidatable interface, plus you have to write the javascript code to implement the validation rule on the client side.

Conditional attributes are difficult to implement, since on the client side the validation rule must associate someway the two related input fields.
For the generic stuff of implementing the custom attribute+client side stuffs give a look here: http://www.codeproject.com/Articles/301022/Creating-Custom-Validation-Attribute-in-MVC-3. For more hints on how to relate fields on the client side give a look to the sources of the mvc controls toolkit itself. The DynamicRangeAttribute is a conditional validation attribute and shows how to deal with conditional validation. Its javascript part is in the MvcControlsToolkit.Core javascript file