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

Multiple Div on edit window (modal) of Grid

0 Answers 198 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sameer
Top achievements
Rank 1
Sameer asked on 12 Mar 2013, 03:31 PM
I have a Grid. Add & Edit has been done through modal popup . For modal pop-up i have used template. I want to have multiple forms in modal pop-up . There each form should have its own validation. 
sample code :

<div id="CurrentDiv">
    <div class="editor-label">
        @this.Html.LabelFor(model => model.Stations.Name)
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="StationName" required="required" name="StationName" validationMessage="Station Name Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="StationName"></span>
    </div>
     
     <div class="editor-label">
        @this.Html.LabelFor(model => model.Stations.ChannelID)
    </div>
    <div class="editor-field">
       <input name="ChannelID"  id="ddlChannelID" data-source="dsChannelDropdown" data-text-field="Text" 
        required="required"   validationMessage="Channel Required!" 
    data-value-field="Value" data-bind="value:ChannelID" data-role="dropdownlist" data-option-label="Select Channel..." disabled="disabled"  />
       <span class="k-invalid-msg" data-for="ChannelID"></span>
        <a href="javascript:void(0)" onclick="showHideChannel(true);">Add</a>
    </div>
</div>   
 div id="divChannel" style="display:none;">
  <div class="editor-label">
        Name :
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="ChannleName"name="ChannleName" validationMessage="Channle Name Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="ChannleName"></span>
    </div>
      <div class="editor-label">
         Description :
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="ChannelDescrip"
         name="ChannelDescrip" validationMessage="Channel Description Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="ChannelDescrip"></span>
    </div>
    <div>
<a class='k-button k-button-icontext' onclick='SaveChannel();'>Add</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Cancel</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Back</a>
</div>
</div>
 <script type="text/javascript" language="javascript">
function SaveChannel() {

        $.ajax({
            type: "POST",
            url: "/Channel/CreateAjax",
            data: {
                Id: '0',
                Name: $("#ChannleName").val(),
                Descrip: $("#ChannelDescrip").val(),
                Enabled: true
            },
            error: function (error) {
                alert(error);
            },
            success: function (response) {
                alert(response);
            }
        })
        return false;

    }
    function showHideChannel(show) {
        if (show) {
            $("#divChannel").show();
            $('#CurrentDiv').hide();
            $(".k-edit-form-container").find(".k-grid-update").hide();
            $(".k-edit-form-container").find(".k-grid-cancel").hide();
            $(".k-window-title").html("Add Channel");

        } else {
            dsChannelDropdown.read();
            if ($("#ChannleName").val() != "") {
                var ddlChannelID = $("#ddlChannelID").data("kendoDropDownList")
                ddlChannelID.text($("#ChannleName").val());
            }
            $("#divChannel").hide();
            $('#CurrentDiv').show();
            $(".k-edit-form-container").find(".k-grid-update").show();
            $(".k-edit-form-container").find(".k-grid-cancel").show();
            $(".k-window-title").html("Add/Edit Station");
            
           
        }
    }

</script>


on click of add button it will show channelDiv and will hide currentDiv on click of Add button it will call ajax method and will save channel and will take you back to currentDiv where in dropdown currently added channel will appear. and on click of update button of main div it will save station information in db .
problem is on click of update in Main modal pop-up , it calls validation of all Divs , where as I want validation of currentDiv should be done . and on click of Add button of channelDiv it should validate Channel Div .

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Sameer
Top achievements
Rank 1
Share this question
or