Click here to Skip to main content
15,884,298 members
Home / Discussions / Web Development
   

Web Development

 
AnswerRe: Modal PopUp extender Pin
Sandeep Mewara25-May-12 18:01
mveSandeep Mewara25-May-12 18:01 
QuestionJohn Ray still relevant? (TCP/IP related) Pin
Mossmyr21-May-12 1:24
Mossmyr21-May-12 1:24 
QuestionNot able to Ajax post knockout (KO) data in XML format Pin
AumSingh20-May-12 6:38
professionalAumSingh20-May-12 6:38 
AnswerRe: Not able to Ajax post knockout (KO) data in XML format Pin
AumSingh23-May-12 23:52
professionalAumSingh23-May-12 23:52 
Questiontigrina lexikon ትግርኛ መዝገብ ቃላት seglelet.com Pin
mululer19-May-12 22:27
mululer19-May-12 22:27 
QuestionHow to display XML data using XSL in HTML? Pin
RedUnited18-May-12 1:35
RedUnited18-May-12 1:35 
AnswerRe: How to display XML data using XSL in HTML? Pin
berba19-May-12 6:44
berba19-May-12 6:44 
QuestionProblem with Knockout mapping of observable array. Pin
AumSingh18-May-12 0:04
professionalAumSingh18-May-12 0:04 
I am using knockout (KO) in my MVC project. I create an MVC model (for a grid) on server and pass it to the view. On the view it is serialized and converted into a KO model (using ko.mapping) which in turn is used for binding. That binding is then used in HTML for grid creation.

This is how my MVC grid model looks like which in turn gets converted to corresponding KO model by ko.mapping:

C#
public class GridModel
    {
        /// <summary>
        /// Grid body for the grid.
        /// </summary>
        public GridBodyModel GridBodyModel { get; set; }
        
        /// <summary>
        /// Grid context.
        /// </summary>
        public GridContext GridContext { get; set; }

        /// <summary>
        /// Grid header for the grid.
        /// </summary>
        public GridHeaderModel GridHeader { get; set; }
    }

public class GridBodyModel
    {
        /// <summary>
        /// List of grid body rows.
        /// </summary>
        public IList<GridRowModel> Rows { get; set; }
    }


public class GridContext
    {
        /// <summary>
        /// Total number of pages. Read-only.
        /// </summary>
        public int TotalPages{ get; set; }
    }

public class GridHeaderModel
    {
        /// <summary>
        /// List of grid header cells.
        /// </summary>
        public IList<GridHeaderCellModel> Cells { get; set; }
    }


As it is clear the main model class GridModel is made of following classes which are present as properties:

GridBodyModel: Has list of rows to be rendered in the grid body.

GridContext: Has total number of pages as a property. It has other properties as well but that is out of scope of this discussion.

GridHeaderModel: Has a list of cells that has to be displayed in header of the grid.

Then I have this script that will execute on fresh page load.

JavaScript
$(document).ready(function () {
        // Apply Knockout view model bindings when document is in ready state.
        ko.applyBindings(Global_GridKOModel, document.getElementById("gridMainContainer"));
    });

// Serialize the server model object. It will be used to create observable model.
Global_GridKOModel = ko.mapping.fromJS (<%= DataFormatter.SerializeToJson(Model) %>);


Global_GridKOModel is global javascript variable.
Model is the MVC grid model coming from server.

A user can perform further search on the page again. I handle this by posting new search criteria via Ajax. On this post a new MVC model is created and is sent back as Ajax response. This new MVC Model is then simply used to update Global_GridKOModel using ko.mapping which in turn refreshes the grid (with new data) that was constructed earlier on fresh page load. This is how I am doing it.

JavaScript
$.ajax({
        url: destUrl,
        data: dataToSend
        success: function (result) {
            ko.mapping.fromJS(result, Global_GridKOModel);
        },
        error: function (request, textStatus, errorThrown) {
            alert(request.statusText);
        }
    });


Everything is working fine except in the following scenario.

An Ajax request is made for which no result is returned i.e. GridBodyModel and GridHeaderModel is null in the model GridModel. That time grid rightly shows that no record has been found. This is correct. This happens by the following HTML binding.

HTML
<!-- When no record is found. -->
<div data-bind="ifnot: GridContext.GridPager.TotalPages() > 0">
    No record(s) were found.
</div>
    
<!-- This is actual grid table container. This is binded when records are found -->
<div data-bind="if: GridContext.TotalPages() > 0">

Grid construction happens here

</div>


Now after this if another Ajax request is made but this time records are returned (I have checked the response with firebug and it is confirmed that records are indeed returned). This time grid construction happens wherein various observable arrays are accessed. For example, to construct pager for the grid following is a piece of HTML binding I wrote.

HTML
<td data-bind="attr:{colspan: GridHeader.Cells().length }">


This time KO throws following error which can be seen in firebug.

Unable to parse bindings.

Message: TypeError: GridHeader.Cells is not a function;

Bindings value: attr:{colspan: GridHeader.Cells().length }


It work fine so long there are records being returned but it breaks after no record is returned as explained above. Please note GridHeader was null in earlier response when no records were returned. I smell something fishy in ko.mapping. I think there is some problem while mapping observable array.

So what is it that I am not doing right? Anyone please?

Please feel free to ask for clarification if I have not mentioned things clearly.

Thanks in advance.
AnswerRe: Problem with Knockout mapping of observable array. Pin
AumSingh18-May-12 20:07
professionalAumSingh18-May-12 20:07 
Questionhow can i bind data from excel file? Pin
heinhtataung16-May-12 23:09
heinhtataung16-May-12 23:09 
AnswerRe: how can i bind data from excel file? Pin
frostcox19-May-12 21:36
frostcox19-May-12 21:36 
AnswerRe: how can i bind data from excel file? Pin
frostcox25-May-12 11:08
frostcox25-May-12 11:08 
QuestionUse of Session states in SharePoint 2010 Pin
Athar Raza Faridi16-May-12 20:37
Athar Raza Faridi16-May-12 20:37 
QuestionMessage box with 3 buttons Yes/NO/Cancel in ASP.Net Pin
berba16-May-12 3:15
berba16-May-12 3:15 
AnswerRe: Message box with 3 buttons Yes/NO/Cancel in ASP.Net Pin
Sandeep Mewara16-May-12 7:38
mveSandeep Mewara16-May-12 7:38 
QuestionEmails Sent by Window Service/C# Code are landing in spam in Gmail Pin
masterprogrammertech14-May-12 1:19
masterprogrammertech14-May-12 1:19 
AnswerRe: Emails Sent by Window Service/C# Code are landing in spam in Gmail Pin
Bernhard Hiller14-May-12 21:36
Bernhard Hiller14-May-12 21:36 
QuestionSubpages are not found. Pin
m_kukulka10-May-12 3:03
m_kukulka10-May-12 3:03 
AnswerRe: Subpages are not found. Pin
Bernhard Hiller10-May-12 4:25
Bernhard Hiller10-May-12 4:25 
QuestionWeb Crawling / Searching Pin
eddieangel9-May-12 6:08
eddieangel9-May-12 6:08 
AnswerRe: Web Crawling / Searching Pin
Bernhard Hiller9-May-12 21:20
Bernhard Hiller9-May-12 21:20 
QuestionFormat Date According to Regional Settings Pin
berba9-May-12 3:22
berba9-May-12 3:22 
AnswerRe: Format Date According to Regional Settings Pin
Richard MacCutchan9-May-12 4:31
mveRichard MacCutchan9-May-12 4:31 
AnswerRe: Format Date According to Regional Settings Pin
David Mujica9-May-12 4:35
David Mujica9-May-12 4:35 
GeneralHow to write code for Admin approve ! Pin
heinhtataung8-May-12 18:26
heinhtataung8-May-12 18:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.